-
一般都使用 “ul\li” 来制作“菜单导航条查看全部
-
<a></a>是块最内部元素查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
text-indent：10px是指文字向中间移动10px查看全部
-
list-style:none是去掉无序列原点表前面的查看全部
-
margin用负值，向相反方向移动；查看全部
-
导航栏动态效果查看全部
-
<style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} .nav li{float:left} .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px;} .nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;} </style> </head> <body> <ul class="nav"> <li><a class="on" href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </body>查看全部
-
1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； -------> 雪碧图的应用--- background-position 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。查看全部
-
清除计时器：clearInterval 设定计时器：setInterval a标签的宽度：offsetWidth查看全部
-
JQuery实现菜单拉伸动画 $(function(){ $("a").hover{ function(){ $(this).stop().animate({"width":"160px"},200); } function(){ $(this).stop().animate({"width":"120px"},200); }} }查看全部
-
为什么不能用margin-bottom:10px;? 其实li之前已经设置过margin-top：20px，所以它的外边距就是对已经固定的父级元素扩展了20px，就是说现在它的所有改变的行为都以此为根据了，如果你把li元素高度变大20px，那么li元素会向下生长而不会说把这20px给挤没了，所以就会挣脱ul的底边界插出去。而margin-top：-10px是a标签的行为，后面你懂的...查看全部
-
ul的高度为50px;il的margin-top为20px,a的高度为30px,将il的content撑高30px使得il刚好填满ul的content部分,所以当a:hover为40px是会向下溢出10px,所以需要设置margin-top:-10px. 如果设置margin-bottom:-10px,则a和li的content+li的margin-top刚好填满ul的content;正是由于刚好填满ul的content,a上不能向上撑开,效果上还是看到多出来的10px在a的下部.查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
1.圆角菜单的制作，通过设置背景，改变外观样式。 通过a：hover，可以为菜单增加交互效果。 2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class"on" 在为它的样式添加上一个on，最后一动它的位置（y，x） CSS中：{IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。} 圆角css代码：border-radius:4px 4px 3px 3px 顺序是左上角，右上角，右下角，左下角 兼容代码：-moz-border-radius: 15px; border-radius: 15px;查看全部
举报
0/150
提交
取消