You are here: 首頁 文章分類選單 CSS語法專區

飛朵啦學習手札

本網站建議使用Firefox2.0以上,或是使用Goole瀏覽器來瀏覽,並使用1024x768解析度來觀看.

CSS語法範例

網頁置中的方法和注意事項

E-mail 列印 PDF

總共有以下幾種寫:

第一種寫法:這是為了舊版瀏覽器 IE 5.0 而使用的寫法,如下:

  1. body{ text-align:center; } 
  2. /* 先讓網頁內所有的內容置中,因此 myDIV 區塊也會被置中 */ 
  3. #myDIV{ text-align:left; } 
  4. /* 再將 myDIV 區塊內的內容恢復置左 */
複製代碼
第二種寫法:IE6 和 Firefox 等新版瀏覽器都通用的寫法,如下:
  1. #myDIV{ margin-left:auto; margin-right:auto; } 
  2. /* 將 myDIV 區塊的外部間距設定為自動均分,就可以達到置中的效果 */
複製代碼
第三種寫法:IE6 和 Firefox 等新版瀏覽器都通用的寫法,如下:
  1. #myDIV{ margin: 0 auto; } 
  2. /* 與第二種方法作用相同,這是較精簡的寫法 */
複製代碼
最近更新 ( 週四, 24 十二月 2009 14:39 )
 
 

[轉]常用的css命名方法

E-mail 列印 PDF

本文轉自:http://www.baihe107.com/web-design/common-css.html;

友好的css命名不僅有利於搜索引擎快速地渲染頁面,更有利於配合程序員高效的完成工作。以前也在藍色經典上見過這些,最近又參考了其他文章,做了一些總結,或許有些地方不是很適合,但作為參考,希望能與朋友們共享:

頁頭:header
內容:content/container
尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
登錄條:loginbar
標誌:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航/二級導航:subnav
子頁面/二級頁面:subpage

 

 
 

[轉]完美的CSS絕對底部

E-mail 列印 PDF

本文章轉自:wowbox


CSS的簡單在於它易學,CSS的困難在於尋找更好的解決方案。在CSS的世界裡,似乎沒有完美這種說法。所以,現在介紹的CSS絕對底部,只是目前個人見過的方案中比較完美的吧。


先說我們為什麼會使用到這個CSS底部佈局解決方案:

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



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



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



甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部佈局方案。不知道他有沒有去申請專利:)

HTML代碼:

程序代碼 程序代碼
<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>
<div id="footer">
</div>

說明:使用這個佈局的前提,就是footer要在總的div容器之外,footer使用一個層,其它所有內容使用一個總的層。如果確實需要到添加其它同級層,那這個同級層就必須使用position:absolute進行絕對定位。

CSS代碼:
下面是主要的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值,需要保持一致。

就是這麼簡單,不過還沒完。如果你的主體是使用懸浮佈局,還得解決一些瀏覽器的兼容問題,這裡使用的重點是為了Goolge Chrome。

對#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。

P.S:
網絡上之前比較知名的footer佈局有Ryan Faits創造的,不過它的方法在HTML代碼中會有一個空的div層。嚴格來說,是不符合語義網代碼標準的。 
另外,還有一篇Exploring Footers article from A List Apart,但使用了一些JavaScript代碼。 
這樣一比較,上面看似簡單的純CSS,就顯得偉大許多了。 
OK!沒有了。如果沒看懂,具體的使用方法和說明可以到原站查看

 

[轉]CSS Compressor – CSS 壓縮機,線上幫你的 CSS 檔減肥瘦身。

E-mail 列印 PDF

本文章發佈於免費資源網路社群,轉貼時請註明頁面網址並保留本訊息,謝謝。 

css-compressor.jpg

若你是網頁設計者,且常常會感覺網頁開啟速度有點延遲或是不夠快的話,那麼有可能是你的 CSS 檔或是 JS 檔案太過龐大。此時你便可以透過 CSS Compressor 這項線上工具來為你的 CSS 檔進行壓縮和減肥。

進到 CSS Compressor 頁面後,你可以看到許許多多的選項,若你覺得這樣太麻煩,那麼可以點選 Regular mode ,該模式下就不需要做太多設定,直接點選壓縮的比例和註解的設定就可以,接著將 CSS 文件所有內容複製並且貼在下方 Insert CSS Code 的位置,按下 Compress-It 就開始進行壓縮。接著會顯示出壓縮前的容量與壓縮後的容量差異,你可以決定是否採用壓縮後的 CSS 檔。

 

CSS下拉式選單

E-mail 列印 PDF
  由於網路上的下拉式選單(drop down menu)。
 
  大部份都是要套javascript才能完成的 

  但我記的CSS也可以做出此效果 

  因此找到一個簡單範例

  原始網址CSS Drop Down Menu 

最近更新 ( 週五, 10 七月 2009 14:25 )
 
第 1 頁, 共 2 頁