CSS網(wǎng)頁布局入門教程11：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш綀D片美化版_基礎(chǔ)教程

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:55:05

CSS網(wǎng)頁布局入門教程11：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш綀D片美化版_基礎(chǔ)教程

CSS網(wǎng)頁布局入門教程11：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш綀D片美化版_基礎(chǔ)教程:雖然完成了標(biāo)簽式導(dǎo)航，但是廣場(chǎng)狀的導(dǎo)航似乎并不能夠順應(yīng)現(xiàn)在的設(shè)計(jì)潮流，其實(shí)導(dǎo)航不僅可以使用css的顏色來定義，同樣可以采用精心設(shè)計(jì)的圖片或其它元素來構(gòu)建導(dǎo)航，在這里我們將開始改善導(dǎo)航的設(shè)計(jì)，使它成為更加出色的標(biāo)簽效果。我們將考慮去掉單一的方

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀CSS網(wǎng)頁布局入門教程11：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш綀D片美化版_基礎(chǔ)教程:雖然完成了標(biāo)簽式導(dǎo)航，但是廣場(chǎng)狀的導(dǎo)航似乎并不能夠順應(yīng)現(xiàn)在的設(shè)計(jì)潮流，其實(shí)導(dǎo)航不僅可以使用css的顏色來定義，同樣可以采用精心設(shè)計(jì)的圖片或其它元素來構(gòu)建導(dǎo)航，在這里我們將開始改善導(dǎo)航的設(shè)計(jì)，使它成為更加出色的標(biāo)簽效果。我們將考慮去掉單一的方

雖然完成了標(biāo)簽式導(dǎo)航，但是廣場(chǎng)狀的導(dǎo)航似乎并不能夠順應(yīng)現(xiàn)在的設(shè)計(jì)潮流，其實(shí)導(dǎo)航不僅可以使用css的顏色來定義，同樣可以采用精心設(shè)計(jì)的圖片或其它元素來構(gòu)建導(dǎo)航，在這里我們將開始改善導(dǎo)航的設(shè)計(jì)，使它成為更加出色的標(biāo)簽效果。
　　我們將考慮去掉單一的方塊狀背景元素，使用帶色彩的圓角標(biāo)簽來完成我們的設(shè)計(jì)。不過從這個(gè)改進(jìn)中能夠體會(huì)到css設(shè)計(jì)的另一個(gè)優(yōu)勢(shì)，就是可以不需要修改結(jié)構(gòu)代碼，只需要修改樣式，便可以完成改進(jìn)，所以這里可以直接看看css代碼的設(shè)計(jì)：

<style> 
body { background-color:#000000;} 
#nav { height:30px; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;} 
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif ) left 84px; ; color:#ffffff;} 
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;} 
</style>

從以上代碼可以看出，我們?nèi)サ袅吮尘吧脑O(shè)定，給頁面的body標(biāo)簽加上了黑色的背景，a對(duì)象被我們放置了重新制作的gif圖片，包含普通、鼠標(biāo)移上、當(dāng)前頁三種交互狀態(tài)。但是你們會(huì)現(xiàn)，這三種狀態(tài)的圖片在一張上。為什么呢？這里采用軟件里的一種設(shè)計(jì)方式，一方面使用圖片管理，另一方面在網(wǎng)頁下載的時(shí)候只用下載一個(gè)圖片就行了。而把這個(gè)圖片設(shè)置為背景圖片時(shí)只需要用css控制圖片的位置就可以了，看來css功能真是太強(qiáng)大了。
　　僅僅通過修改css代碼，就更換了導(dǎo)航的外觀，試想一下在大型網(wǎng)站的應(yīng)用當(dāng)中，如果我們對(duì)某一個(gè)通用模塊不太滿意，也不必再去修改所有的頁面了，只能改動(dòng)樣式就實(shí)現(xiàn)了。css真正讓您的設(shè)計(jì)變得輕松起來！

<!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> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
body { background-color:#000000;} 
#nav { height:30px; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;} 
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 84px; ; color:#ffffff;} 
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;} 
</style> 
</head> 
<body> 
 <ul id="nav"> 
 <li><a href="/index.asp">主頁</a></li> 
 <li><a id="current" href="/Sort/List_4.html">DIV+CSS教程</a></li> 
 <li><a href="/Sort/List_5.html">常用代碼</a></li> 
 <li><a href="/Sort/List_6.html">水晶圖標(biāo)</a></li> 
 <li><a href="/Sort/List_7.html">幻燈圖片</a></li> 
 <li><a href="/Sort/List_10.html">軟件下載</a></li> 
 <li><a href="/css2/">CSS2.0實(shí)用手冊(cè)</a></li> 
 </ul> 
</body> 
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS網(wǎng)頁布局入門教程11：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш綀D片美化版_基礎(chǔ)教程

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：導(dǎo)航教程入門

熱門焦點(diǎn)

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

CSS網(wǎng)頁布局入門教程11：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш綀D片美化版_基礎(chǔ)教程

CSS網(wǎng)頁布局入門教程11：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш綀D片美化版_基礎(chǔ)教程

CSS網(wǎng)頁布局入門教程11：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш綀D片美化版_基礎(chǔ)教程

最新推薦

猜你喜歡

熱門推薦