最基本的ulli構(gòu)成的橫向?qū)Ш讲藛?本站頂部所示)_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
本站頂部所用TAGS導(dǎo)航標(biāo)簽,是典型的UL、LI所構(gòu)成的菜單。
在一般的網(wǎng)頁(yè)制作中,這樣的菜單是非經(jīng)常用的。
而構(gòu)成的技巧是非常簡(jiǎn)單易學(xué)的。
公布代碼如下,稍看一下就應(yīng)該能夠理解!
XHTML代碼:
CSS代碼:
查看運(yùn)行效果:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
在一般的網(wǎng)頁(yè)制作中,這樣的菜單是非經(jīng)常用的。
而構(gòu)成的技巧是非常簡(jiǎn)單易學(xué)的。
公布代碼如下,稍看一下就應(yīng)該能夠理解!
XHTML代碼:
示例代碼 [m.dounai2.com]
<div id="topmenu">
<ul>
<li><a href="http://m.dounai2.com/default.asp?tag=Web Standard">Web Designing with Web Standards</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=CSS Templates">CSS Templates</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=CSS Layout Example">CSS Layout Example</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=CSS Web Design">CSS Web Design</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=Div CSS網(wǎng)頁(yè)布局">Div CSS網(wǎng)頁(yè)布局</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=Web2.0標(biāo)準(zhǔn)網(wǎng)頁(yè)">Web2.0標(biāo)準(zhǔn)網(wǎng)頁(yè)</a></li>
</ul>
</div>
<ul>
<li><a href="http://m.dounai2.com/default.asp?tag=Web Standard">Web Designing with Web Standards</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=CSS Templates">CSS Templates</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=CSS Layout Templates">CSS Layout Templates</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=CSS Layout Example">CSS Layout Example</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=CSS Web Design">CSS Web Design</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=Div CSS網(wǎng)頁(yè)布局">Div CSS網(wǎng)頁(yè)布局</a></li>
<li><a href="http://m.dounai2.com/default.asp?tag=Web2.0標(biāo)準(zhǔn)網(wǎng)頁(yè)">Web2.0標(biāo)準(zhǔn)網(wǎng)頁(yè)</a></li>
</ul>
</div>
CSS代碼:
示例代碼 [m.dounai2.com]
*{
font-size:12px;
}
#topmenu {
width:900px;float:left;background:#ccc;
}
#topmenu ul{
list-style-type: none;
margin:10px 0 10px 40px;
padding: 0px;
}
#topmenu li{
display:inline;padding:0 5px;
}
#topmenu li a{
color:#000;
text-decoration:none;
}
#topmenu li a:hover{
color:#f00;
}
font-size:12px;
}
#topmenu {
width:900px;float:left;background:#ccc;
}
#topmenu ul{
list-style-type: none;
margin:10px 0 10px 40px;
padding: 0px;
}
#topmenu li{
display:inline;padding:0 5px;
}
#topmenu li a{
color:#000;
text-decoration:none;
}
#topmenu li a:hover{
color:#f00;
}
查看運(yùn)行效果:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 結(jié)構(gòu)中id與class的使用原則與技巧
- WEB2.0標(biāo)準(zhǔn)教程:第十天自適應(yīng)高度
- CSS實(shí)戰(zhàn):id是狙擊槍class是雙刃劍合則兩利分則兩敗
- absolute與relative如何區(qū)分怎么用?
- overflow解決float浮動(dòng)后高度自適應(yīng)問(wèn)題
- CSS標(biāo)識(shí)當(dāng)前位置頁(yè)效果的實(shí)現(xiàn)原理
- CSS網(wǎng)頁(yè)布局中文排版心得
- 網(wǎng)頁(yè)中表單常見(jiàn)問(wèn)題解決辦法
- div css網(wǎng)頁(yè)布局如何合理的運(yùn)用html標(biāo)簽?
- DivCSS教程:CSS控制Table單元格強(qiáng)制換行與強(qiáng)制不換行
猜你也喜歡看這些
- 圖片邊框變換CSSHover狀態(tài)效果一例
- DivCSS布局實(shí)例:三行單列上下固定高度中間自適應(yīng)
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- CSS實(shí)例:ULli打造CSS橫向菜單藍(lán)色地平線
- DIVCSS布局實(shí)例:各種2欄3欄布局實(shí)例(附下載)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- 用背景圖片實(shí)現(xiàn)CSS柱狀圖表一例
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
- DIVCSS圖形菜單之仿DreamWeaver
- DIVCSS菜單:縱向CSS菜單實(shí)例之橙色記憶
- 相關(guān)鏈接:
- 教程說(shuō)明:
Div+CSS教程-最基本的ulli構(gòu)成的橫向?qū)Ш讲藛?本站頂部所示)。