CSS+DIV設(shè)計(jì)實(shí)例:超酷的豎排導(dǎo)航欄_Web標(biāo)準(zhǔn)教程
HTML:
以下為引用的內(nèi)容:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>
</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
CSS:
以下為引用的內(nèi)容:
#navcontainer { margin-left: 30px; }
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li { margin: 0; }
#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer ul ul li { margin: 0; }
#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}
#navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ):開始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- 典型的三行二列居中高度自適應(yīng)布局
- CSS樣式表規(guī)劃與管理的經(jīng)驗(yàn)總結(jié)
- WEB2.0標(biāo)準(zhǔn)教程:第四天 調(diào)用樣式表
- Microsoft于2008年2月12日將瀏覽器強(qiáng)制升級(jí)至IE7
- 什么人需要學(xué)習(xí)、適合學(xué)習(xí)WEB標(biāo)準(zhǔn)?
- 用 Dreamweaver 8 搞定web標(biāo)準(zhǔn)
- web2.0網(wǎng)站常用可用性功能塊分析
- 為什么需要有Web標(biāo)準(zhǔn)?誰(shuí)會(huì)在意它?
- 用CSS輕松實(shí)現(xiàn)網(wǎng)上填空
- Div CSS網(wǎng)頁(yè)布局、web標(biāo)準(zhǔn)應(yīng)用容易出現(xiàn)的問題匯總
猜你也喜歡看這些
- CSSHack代碼范例:兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0
- 解決IE7以下版本不支持無(wú)A狀態(tài)偽類的幾種方法!
- 區(qū)分IE6,IE7和firefox的CSS hack
- CSS實(shí)例:區(qū)分IE6、IE7、FF對(duì)HR解釋的CSShack
- Web頁(yè)面優(yōu)化減小頁(yè)面對(duì)內(nèi)存及CPU的占用
- 最常用的10種CSS BUG解決方法與技巧
- CSS hack之特殊符號(hào)的應(yīng)用
- DIVCSS實(shí)例教程:去除鏈接元素的虛線框(兼容IE7、IE6、FF)
- 非主流瀏覽器Nascape中CSS的顯示與IE的差別
- IE中文字結(jié)尾出現(xiàn)重復(fù)跳字的解決辦法
- 相關(guān)鏈接:
- 教程說(shuō)明:
Web標(biāo)準(zhǔn)教程-CSS+DIV設(shè)計(jì)實(shí)例:超酷的豎排導(dǎo)航欄
。