1，Li列表 通過ul 和 li 的方式，我們可以構(gòu)造出一些無序列表。通過ul+li，我們不僅可以做出一些漂亮的菜單，也可以做出一些完美的樹形結(jié)構(gòu)。 ul+li默認(rèn)樣式在前面有個(gè)小黑點(diǎn)，實(shí)際項(xiàng)目中我們可以通過背景來代替這個(gè)小黑點(diǎn)。
下面我們看2個(gè)實(shí)例：
http://demo.jb51.net/html/cssbackground/a1/demo1.html
http://demo.jb51.net/html/cssbackground/a1/demo2.html

2,文本替換 文本替換也是項(xiàng)目中比較常見的技術(shù)。實(shí)際開發(fā)中經(jīng)常需要使用圖片來替換文本。通過背景來代替文本。
下面我們看3個(gè)實(shí)例：
http://demo.jb51.net/html/cssbackground/a2/demo1.html
http://demo.jb51.net/html/cssbackground/a2/demo2.html
http://demo.jb51.net/html/cssbackground/a2/demo3.html
當(dāng)然我需要對(duì)前面的2個(gè)實(shí)例進(jìn)行一下補(bǔ)充說明：
在例2中，通過text-indent:-9999px;屬性把 文字隱藏到看不到的地方。當(dāng)然有一缺點(diǎn)：禁止圖片下載時(shí)，什么都沒有了。
在例3中，通過添加額外標(biāo)簽，然后使用定位方式把背景定位在上層，來遮住文字。也有一缺點(diǎn)：圖片需要能完全遮住文字，要實(shí)底的圖片。

3,自適應(yīng)按鈕 自適應(yīng)在實(shí)際中也經(jīng)常使用，通過自適應(yīng)，我們不需要做額外的圖片。我以前看過一些老的項(xiàng)目，給不同文字的按鈕做了好多不同的圖片，然后每個(gè)按鈕的樣式有btn2word,btn4word,btn6word.... 可見非常不靈活。自適應(yīng)按鈕能從根本上解決這個(gè)問題。
我們來看1個(gè)實(shí)例：
http://demo.jb51.net/html/cssbackground/a3/demo1.html
你已經(jīng)看到了，自適應(yīng)需要至少2個(gè)閉合元素。通過一個(gè)背景左對(duì)齊和另一個(gè)背景圖片的右對(duì)齊 來做成自適應(yīng)按鈕。

4,圓角 以前很多項(xiàng)目都是方角，不知什么時(shí)候起，流行起圓角了。就像汽車一樣，以前的桑塔納的邊角都是方角的，現(xiàn)在的車都是圓角的了。
圓角的實(shí)現(xiàn)方式跟自適應(yīng)有點(diǎn)類似，只不過背景的對(duì)齊方式有點(diǎn)區(qū)別罷了。
http://demo.jb51.net/html/cssbackground/a4/demo1.html

5,等高欄 這個(gè)是最近在看 無懈可擊的Web設(shè)計(jì) 中的一個(gè)例子，的確作者也講解的非常不錯(cuò)。而且以前在做項(xiàng)目中，的確遇到過這個(gè)問題。不過解決方式貌似沒作者這么簡單。
話不多說，先看3個(gè)實(shí)例：
http://demo.jb51.net/html/cssbackground/a5/demo1.html
http://demo.jb51.net/html/cssbackground/a5/demo2.html
http://demo.jb51.net/html/cssbackground/a5/demo3.html
或許你已經(jīng)看明白了 我將要講解什么。對(duì)了，就是側(cè)邊欄跟主體欄的高度問題。實(shí)際應(yīng)用中，我們經(jīng)常要使他們2個(gè)呈現(xiàn)一樣的高度。通過對(duì)最外層元素使用背景圖片來達(dá)到了這種效果。
打包下載

最新評(píng)論