takeasy

your imagination is my power

網頁設計技巧：CSS固定footer

by Chris 2009/11/24 留言 (0)

網頁設計技巧：CSS固定footer


當做一個頁面時，如果頁面內容很少，不足於填充整個畫面，按普通的佈局，就會出現下面圖片中的樣子(也就是底部內容並沒有位於窗口的底部，而留下了大量空白。


對於追未完美的設計師來說，這是不美觀的。網上有一些解決方案，但會出現當改變窗口高度時，底部和正文重疊的BUG。儘管沒有多少人會有事沒事兒的去改變窗口高度，但設計嘛，追求的就是盡善盡美。


下面是我找到的一個比較完美的方法，來自國外的設計達人，純CSS，可以實現：當正文內容很少時，底部位於窗口最下面。當改變窗口高度時，不會出現重疊問題。



HTML代碼：
<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>
<div id="footer">
使用這個佈局的前提，就是footer要在總的div容器之外，footer使用一個層，其它所有內容使用一個總的層。如果確實需要到添加其它同級層，那這個同級層就必須使用position:absolute進行絕對定位。

CSS代碼：
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* 必須使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的負值 */
    height: 150px;
    clear:both;}
需要注意的就是#main的padding值、footer的高度和負margin值，需要保持一致。

瀏覽器的兼容：
對#main部份進行著名的Clearfix Hack:
clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
測試於兩欄懸浮佈局，兼容各大主流瀏覽器，包括Google Chrome。


  • 網絡上之前比較知名的footer佈局有Ryan Faits創造的，不過它的方法在HTML代碼中會有一個空的div層。嚴格來說，是不符合語義網代碼標準的。
  • 另外，還有一篇Exploring Footers article from A List Apart，但使用了一些JavaScript代碼。

原站：CSS Sticky Footer

TOP
 

網頁設計技巧：8個簡單和實用的CSS技巧

by Chris 2009/11/09 留言 (0)

網頁設計技巧：8個簡單和實用的CSS技巧


最好的解決方案往往是最簡單的，這裏列出8個CSS技巧，非常簡單，簡單到只需要寫一行代碼，只需要定義一個屬性參數。非常適合學習CSS的新手朋友閱讀。

  1. 使用line-height來達到垂直居中
    2. line-height:24px;
    當你有一個固定高度的區域，你可以通過把line-height和區域的高度設為相同的數值而達到垂直置中。 Demo
  2. 使用overflow防止内容溢出
    3. #main{ overflow:hidden; }
    這個應該基本都知道了。可以在限制內容塊的寬度的前提下，隱藏那些有可能溢出的文本或圖像。雖然會導致一些內容被隱藏，但總比溢出撐開影響頁面佈局要好。
  3. 強制在同一行內顯示所有內文
    4. a{ white-space:nowrap;}
    強制在同一行內顯示所有內文，直到內文結束或者< br>。
  4. 始終顯示Firefox垂直捲軸
    5. html{ overflow:-moz-scrollbars-vertical;}
    Firefox默認是不顯示垂直捲軸的，而這個參數設置將能讓它始終顯示垂直捲軸。
  5. 内容置中
    6. margin:0 auto;
    這個大家都應該知道了，但是這個設置並不是在所有流覽中都有效。並且，在相同的流覽器中，如果受其他影響，也很可能會失去效果。
  6. 移除IE的默認捲軸
    7. textarea{ overflow:auto;}
    IE默認是顯示內文框的垂直捲軸，這個參數將移除這個捲軸，除非輸入的內容超過內文框的高度。
  7. 強制列印時自動分頁
    8. h2{ page-break-before:always;}
    這個屬性參數可以「始終在物件之前插入頁分割符」，主要用於需要列印的頁面設置。
  8. 移除點擊鏈結時的虛線框
    9. a:active, a:focus{ outline:none;}
    大家都知道，點擊鏈結時，通常會出現虛線框，影響美觀。這個屬性設置可以移除點擊時的虛線框。

TOP
 

網頁設計技巧：用CSS實現網頁垂直置中

by Chris 留言 (0)

用CSS實現網頁垂直置中


在設計頁面佈局的時候，我們很可能需要到一些內容可以達到垂直置中。如果使用<table>裏面的valign屬性，那很容易達到內容的垂直置中。但使用<table>的缺點就是，你很可能就為了達到垂直置中，就弄了一個煩人的表格框架。以下是其中一個解決方法，純CSS實現頁面的垂直居中。

  1. HTML代碼
    2. <div id="container">
 <div id="position">
  <div id="content">
  Text Here.
  </div>
 </div>
</div>
  2. CSS代碼
    3. <STYLE type="text/css">
 #container { width: 100%; height: 100%; display: table; }
 #position { display: table-cell; vertical-align: middle; 
width: 100%; text-align: center; }
</STYLE>
    這串CSS代碼，幾乎支持所有的browser （除了IE之外），所以需要對IE進行一個小小的Hack
  3. 對IE的Hack
    4. <!--[if IE]>
<STYLE type="text/css">
 #container { position: relative; }
 #position { position: absolute; top: 50%; }
 #content { position: relative; top: -50%; }
</STYLE>
<![endif]–>
按這裏查看 Demo 或 下載 。

TOP
 

網頁設計技巧：偵測解析度進入不同網頁

by Chris 2009/11/05 留言 (0)

網頁設計技巧：偵測解析度進入不同網頁

自動辨識瀏覽者解析度而進入不同的網頁

放於<head>與</head>之間：


<script type="text/javascript"> 
<!-- 
var swidth=1024; 
var sheight=768;
if (screen.width<swidth||screen.height<sheight)
{ location.replace("800.htm"); } 
else { location.replace("1024.htm"); }
//--> 
</script> 
800.htm和1024.htm就是自動辨識解析度進入的網頁

TOP
 

網頁設計技巧：IE6支援png圖檔的方法。

by Chris 留言 (0)

網頁設計技巧：IE6支援png圖檔的方法。



PNG 是一種很好很強大的圖檔格式，可支援 32 bit 色彩，GIF 只到 256 色，色彩上更細緻，而且不會像 JPEG 會有壓縮性的破壞，並可以儲存成透明格式，檔案也不會大的離譜，這些都是 JPEG 望塵莫及的。

這麼好用的圖片格式，很可惜的是在現在瀏覽器市場市佔率第一名的 IE 6 上卻不支援，網頁設計師們只能退而求其次，選擇色彩較少的 GIF 檔，而且 GIF 在轉成透明圖時，會有難看的毛邊出現，並不像 PNG 那般平順。

下面介紹的方法可以讓這個古老、萬惡的IE6也可以讀取PNG透明圖檔，而不在出現醜暴的灰底。

  1. 下載pngfix.js檔案，儲存到適當的地方。
  2. 然後將下列語法貼至<html></html>之間（我也看過有人貼<head></head>在之間，可我測試是無效的。
<!–-[if is IE 7.]>
<script defer type='text/javascript' src='pngfix.js'></script>
<![endif]–->
註一：src='pngfix.js' 注意該js檔案的路徑位置是否與你上傳的路徑相同
註二：src='pngfix.js' 可以寫絕對路徑。

TOP
 

PHP 的日期計算

by Chris 2009/11/04 留言 (0)

在 PHP 內計算兩個日期之間的差距的話，可以先將日期轉成 Unix timestamp 的數值然後再作計算。例如要計算兩個日期 01/01/2009 及今天的日期差距，可以這樣做：

// 將日期以 "/" 附號分隔, 得出 日, 月, 年
$time = explode("/", "01/01/2009");
 
// 將 01/01/2009 轉換成 Unix timestamp
$unix_time = mktime(0, 0, 0, $time[0], $time[1], $time[2]);
 
// 計算 $unix_time 和現在的差距, 並除 86400 (一天有 86400 秒)
$time_diff = (time() - $unix_time) / 86400;

// 只擷取整數部份
$time_diff = (int) $time_diff;
 
echo "01/01/2009 距離現在 " .  $time_diff . " 天.";
?>

TOP
 

訂閱： 文章 (Atom)