-
伸缩菜单的制作——改变高度： <ul> <li><a class="on" href="#">首 页</a></li> <li><a href="#">关于我们</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>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
圆角菜单的制作： 通过设置背景，改变外观样式。 通过a:hover，可以为菜单增加交互效果。 例子： <ul> <li><a class="on" href="#">首 页</a></li> <li><a href="#">关于我们</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="#">首页</a></li> <li><a href="#">首页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}查看全部
-
垂直菜单的制作： 用无序列表构建菜单 <ul> <li><a href="#">首页</a></li> <li><a href="#">首页2</a></li> ... ... </ul> <a>标签的设置 ul li a{display:block;} 定义的关键是将<a>标签设置为块元素 text-indent:10px;是首行文本的缩进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; <文本缩进。不会影响盒子的宽度> padding-left:10px; <文字左移动，但是盒子宽度跟着增加>查看全部
-
设置高度后会向下增加高度，而不是向上， 可以用margin设置负值，这样就会向上增加高度查看全部
-
jq办法查看全部
-
有动画效果的jquery查看全部
-
jquery的解决办法查看全部
-
<a> 标签中加display:block; 变成块元素 就可直接加 a:hover样式、宽度等；查看全部
-
罗宏查看全部
-
按钮的背景贴<a>标签上查看全部
-
总结： 1、使用无序列表元素 <ul><li> 2、使用float:left，可以使导航栏由纵向变成横向 3、在<a>元素应用圆角背景，类似是三层嵌套（滑动门） 4、使用margin-top的负值达到元素变高的效果查看全部
-
$(function(){ $('a').hover( function(){ $(this).stop().animate({"width:160px"},200); } function(){ $(this).stop().animate({"width:120px"},200); } ) })查看全部
举报
0/150
提交
取消