-
伸縮菜單的制作——改變高度： <ul> <li><a class="on" href="#">首 頁(yè)</a></li> <li><a href="#">關(guān)于我們</a></li> ... ... </ul> ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} li{float:left;margin-top:20px; } a{display:block;text-decoration:none; height:30px;text-align:center; line-height:30px; width:120px; background:url(images/btnBg.png); margin-bottom:1px;} .on, a:hover{ background-position:0 -30px; color:#fff;height:40px;line-height:40px;margin-top:-10px;}查看全部
-
菜單<li>浮動(dòng)后，<li>脫離文檔流，導(dǎo)致<ul>將失去高度和寬度；如果需要對(duì)<ul>進(jìn)行整體背景設(shè)置，首先要給<ul>定義寬、高。查看全部
-
圓角菜單的制作： 通過(guò)設(shè)置背景，改變外觀(guān)樣式。 通過(guò)a:hover，可以為菜單增加交互效果。 例子： <ul> <li><a class="on" href="#">首 頁(yè)</a></li> <li><a href="#">關(guān)于我們</a></li> ... ... </ul> ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} li{float:left;margin-top:20px; } a{display:block;text-decoration:none; height:30px;text-align:center; line-height:30px; width:120px; background:url(images/btnBg.png); margin-bottom:1px;} .on, a:hover{ background-position:0 -30px; color:#fff;}查看全部
-
水平菜單的制作： <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">首頁(yè)2</a></li> ... ... </ul> 例子： ul{list-style:none;} li{float:left;} a{display:block;text-decoration:none;width:100px;height:30px;line-height:30px;text-indent:10px;} a:hover{ background-color:#F60; color:#fff}查看全部
-
垂直菜單的制作： 用無(wú)序列表構(gòu)建菜單 <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">首頁(yè)2</a></li> ... ... </ul> <a>標(biāo)簽的設(shè)置 ul li a{display:block;} 定義的關(guān)鍵是將<a>標(biāo)簽設(shè)置為塊元素 text-indent:10px;是首行文本的縮進(jìn)10像素的意思 例子： ul{list-style:none;width:100px;} a{display:block;text-decoration:none;width:100px;height:30px;line-height:30px;text-indent:10px;} a:hover{ background-color:#F60; color:#fff}查看全部
-
text-indent:10px; <文本縮進(jìn)。不會(huì)影響盒子的寬度> padding-left:10px; <文字左移動(dòng)，但是盒子寬度跟著增加>查看全部
-
設(shè)置高度后會(huì)向下增加高度，而不是向上， 可以用margin設(shè)置負(fù)值，這樣就會(huì)向上增加高度查看全部
-
jq辦法查看全部
-
有動(dòng)畫(huà)效果的jquery查看全部
-
jquery的解決辦法查看全部
-
<a> 標(biāo)簽中加display:block; 變成塊元素 就可直接加 a:hover樣式、寬度等；查看全部
-
羅宏查看全部
-
按鈕的背景貼<a>標(biāo)簽上查看全部
-
總結(jié)： 1、使用無(wú)序列表元素 <ul><li> 2、使用float:left，可以使導(dǎo)航欄由縱向變成橫向 3、在<a>元素應(yīng)用圓角背景，類(lèi)似是三層嵌套（滑動(dòng)門(mén)） 4、使用margin-top的負(fù)值達(dá)到元素變高的效果查看全部
-
$(function(){ $('a').hover( function(){ $(this).stop().animate({"width:160px"},200); } function(){ $(this).stop().animate({"width:120px"},200); } ) })查看全部
舉報(bào)
0/150
提交
取消