客服
橫向?qū)Ш讲藛?Web標(biāo)準(zhǔn)(div+css)教程
今天我們開(kāi)始學(xué)習(xí)《十天學(xué)會(huì)web標(biāo)準(zhǔn)(div+css)》的html列表，包含以下內(nèi)容和知識(shí)點(diǎn)：
一、橫向列表菜單
二、用圖片美化的橫向?qū)Ш?/p>
三、css Sprites
一、橫向列表菜單
前邊學(xué)習(xí)過(guò)縱向?qū)Ш讲藛?，又學(xué)習(xí)了float屬性，那么要實(shí)現(xiàn)橫向?qū)Ш讲藛问遣皇呛芎?jiǎn)單了，只需要把li橫向排列就可實(shí)現(xiàn)了。把第四節(jié)的代碼拿過(guò)來(lái)直接用，修改后的代碼如下：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { border: 1px solid #CCC; height:26px; background: #eee;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">網(wǎng)頁(yè)版式布局</a></li> <li><a href="#">div+css教程</a></li> <li><a href="#">div+css實(shí)例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
最主要就是用float讓li向右浮動(dòng)后，實(shí)現(xiàn)橫向排列，具體步驟不再贅述。以前許多朋友提問(wèn)怎么讓它水平居中，其實(shí)很簡(jiǎn)單，首先導(dǎo)航的寬度是固定的，然后設(shè)置margin:0 auto;即可實(shí)現(xiàn)了
為了用戶(hù)體驗(yàn)更加友好，還是把a(bǔ)轉(zhuǎn)換成塊級(jí)元素，也可以給a設(shè)置背景色或背景圖片來(lái)更加美觀了，另外再設(shè)置鼠標(biāo)放上時(shí)的樣式。西安做網(wǎng)站推薦閱讀>>> 下拉及多級(jí)彈出菜單-Web標(biāo)準(zhǔn)(div+css)教程，
#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left;}
#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}
#menu ul li a:hover { background:#333; color:#fff;}
學(xué)到這里，常用的樣式大部分都涉及到了，也許許多你還記不住，但至少混個(gè)臉熟。為了提高效率，建議大家還是手寫(xiě)代碼，如果你還不能手寫(xiě)代碼，就參考上邊的樣式，自己在css編輯器里設(shè)置吧，不再大量截圖了。
經(jīng)過(guò)上邊的修改，現(xiàn)在的用戶(hù)檢驗(yàn)是不是更加友好了呢。
這里的#menu ul li a本來(lái)是可以不加float:left的，但I(xiàn)E6下在li沒(méi)有設(shè)置寬度，#menu ul li a設(shè)置display:block的情況下，將會(huì)顯示錯(cuò)亂，所以需要在a上增加float:left來(lái)修正。萬(wàn)惡的IE6，怎么就淘汰不掉呢.西安做網(wǎng)站推薦閱讀>>> css表單設(shè)計(jì)-Web標(biāo)準(zhǔn)(div+css)教程，
二、 用圖片美化的橫向?qū)Ш?/strong>
背景圖片也是網(wǎng)頁(yè)制作當(dāng)中最常用的樣式之一，運(yùn)用好背景圖片，可以使你的頁(yè)面更加出色，更加人性化和更快的加載速度。下面還是用以前視頻教程中的實(shí)例進(jìn)行講解，或者直接去看視頻教程http://www.aa25.cn/div_css/895.shtml。顯示效果如下：
用到三張圖片，分別為當(dāng)前狀態(tài)，鼠標(biāo)放上時(shí)樣式，和默認(rèn)樣式用的圖片：
下面修改css樣式，只截圖了一張，設(shè)置方法相同：
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
為了讓用戶(hù)知道當(dāng)前所處的頁(yè)面，做了一個(gè)當(dāng)前頁(yè)面的狀態(tài)，把ID添加到相應(yīng)的a上。
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;} #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;} #menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首頁(yè)</a></li> <li><a href="#">網(wǎng)頁(yè)版式</a></li> <li><a href="#">web教程</a></li> <li><a href="#">web實(shí)例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
三、 CSS Sprites技術(shù)
CSS Sprites在國(guó)內(nèi)很多人叫css精靈或css雪碧。它是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的背景圖片定位到要顯示的位置。這樣做可以減少文件體積，減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，提高效率。
講CSS Sprites之前，先把背景圖片給搞清楚
#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }
css背景屬性縮寫(xiě)后如上所示，#ccc表示背景色；url（）里是背景圖片路徑；接下來(lái)的兩個(gè)數(shù)值參數(shù)分別是左右和上下，第一個(gè)參數(shù)表示距左多少px，第二個(gè)參數(shù)表示距上多少，這和padding的簡(jiǎn)寫(xiě)方式是不 一樣，一定不要弄混。另外再?gòu)?qiáng)調(diào)一點(diǎn)css中值為0可以不帶單位，其它數(shù)值都必須帶單位（line-height值為多少倍時(shí)，zoom，z-index除外）；no-repeat表示背景圖片向哪個(gè)方向重復(fù)，此時(shí)為不重復(fù)。西安做網(wǎng)站推薦閱讀>>> div+css網(wǎng)頁(yè)標(biāo)準(zhǔn)布局實(shí)例教程-Web標(biāo)準(zhǔn)(div+css)教程，
還需說(shuō)明一點(diǎn)的是定位圖片位置的參數(shù)是以圖片的左上角為原點(diǎn)的，理解了這些，CSS Sprites技術(shù)就基本上懂了，就是靠背景圖片定位來(lái)實(shí)現(xiàn)的。把三張背景圖片整合到一張上，如下圖：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;} #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;} #menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首頁(yè)</a></li> <li><a href="#">網(wǎng)頁(yè)版式</a></li> <li><a href="#">web教程</a></li> <li><a href="#">web實(shí)例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
文章出處：標(biāo)準(zhǔn)之路 編輯：楊雨晨思
相關(guān)文章：
-
西安網(wǎng)站建設(shè)_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò)公司...
-
CSS實(shí)現(xiàn)圖片裁剪居中 其實(shí)，css實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，只需要設(shè)置img的樣式：object-fit：none即可，不過(guò)你要給img一個(gè)高度，因?yàn)椴眉袈?頁(yè)面：（圖片可以自己隨便截兩張來(lái)測(cè)試） !--長(zhǎng)圖片-- div clas...
-
CSS背景圖片自適應(yīng)全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的濾鏡 }...
-
Viewport viewport：可視窗口，也就是瀏覽器。 vw Viewport寬度， 1vw 等于viewport寬度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：...
-
從企業(yè)建站角度講，最便捷、最適合企業(yè)的建站系統(tǒng)莫過(guò)于自助建站系統(tǒng)，市場(chǎng)上可供選擇的自助建站平臺(tái)也是一搜一大把。這些自助建站平臺(tái)采用傻瓜式建站風(fēng)格，容易上手，操作簡(jiǎn)單方便...
-
現(xiàn)在想做一個(gè)網(wǎng)站成本很低了，買(mǎi)個(gè)域名，買(mǎi)個(gè)幾十塊空間，弄個(gè)網(wǎng)站建設(shè)程序就可以開(kāi)始你的玩耍了，如果你還想找成本更低的，可以看下面的分享。 如何創(chuàng)建網(wǎng)站一直都是很多朋友想要知...
-
商城網(wǎng)站建設(shè)如何將吸引力提升 在信息如此豐富多樣的今天，商城網(wǎng)站建設(shè)如何才能夠在眾多的同類(lèi)當(dāng)中脫穎而出，獲得大眾的吸引和青睞呢？這其實(shí)是相關(guān)網(wǎng)站建設(shè)人員一直在思考的一個(gè)問(wèn)...
-
現(xiàn)在越來(lái)越多的企業(yè)重視網(wǎng)站的運(yùn)營(yíng)推廣，那怎樣推廣效果更好呢？西安蟠龍網(wǎng)絡(luò)小編認(rèn)為沒(méi)用永恒不變得，而且要根據(jù)企業(yè)的具體情況選擇合適的推廣方式才是最好的，如果你又運(yùn)營(yíng)推廣的...
-
隨著互聯(lián)網(wǎng)的發(fā)展，人們每時(shí)每刻已經(jīng)離不開(kāi)網(wǎng)絡(luò)，而網(wǎng)站是網(wǎng)絡(luò)的基本組成部分，可以這么說(shuō)，網(wǎng)絡(luò)是由各種各樣的網(wǎng)站組成的，當(dāng)下，網(wǎng)站是每個(gè)企業(yè)的標(biāo)配，很多個(gè)人都有自己的網(wǎng)站，...
-
網(wǎng)站現(xiàn)在是一個(gè)企業(yè)的標(biāo)配，很多沒(méi)有網(wǎng)站的企業(yè)不清楚網(wǎng)站對(duì)企業(yè)有什么作用，那么今天西安蟠龍小編總結(jié)一下網(wǎng)站對(duì)企業(yè)都有哪些好處，希望看完之后您對(duì)網(wǎng)站有更深一層的認(rèn)識(shí)。 一、低...