-
ul{ list-style:none;height:30px;border-bottom:10px solid #f60;margin-top:20px;padding-left:50px;} li{float:left;} a{text-decoration:none;display:block;width:120px;height:30x;line-height:30px;color:#333; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg);text-align:center;} .on, a:hover{color:#fff;background-position:0 -30px;}查看全部
-
垂直菜单转变成水平菜单 float:left, 文本居中 text-align:center查看全部
-
overflow:hidden的作用是让超出高度的内容隐藏掉。二级菜单的li也浮动，只不过ul的宽度有限，所以就向下排了查看全部
-
这节未做！！！记住！！！查看全部
-
1.jS(原生代码)实现：动画开始前先清除一下定时器，避免动画累加。 window.onload=function (){ var aA=document.getElementByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function (){ clearInterval(This.time); var This=this; /*把当前的this对象传进来*/ This.time=setInterval(function (){ This.style.width=This.offsetWidth+8+"px"; /*8是变宽的速度*/ if(This.offsetWidth>=160){ clearInterval(This.time); } },30); } aA[i].onmouseout=function (){ clearInterval(This.time); var This=this; This.time=setInterval(function (){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=120){ This.style.width="120px"; clearInterval(This.time); } },30); } } }; 2.jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } )) })查看全部
-
最后的margin-top：-10px，是相对于之前已经对ul li设置的margin-top：20px；意思是将已经下移20px的块向上移动10px查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
背景图片沿Y轴移动：background-position:查看全部
-
如果给nav加入width标签，则li不会随着窗口的缩小而换行显示，nav固定宽度，li就无法撑开nav，就会出现这种情况。查看全部
-
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性(返回的是静态页面padding等值)，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。 设定计时器：setInterval 清除计时器：clearInterval查看全部
-
a标签设置查看全部
-
用背景图片实现按钮样式的变化设置背景图片地址再设置图片位置的变化。 .nav li a{ background:url(); } .nav li a:hover{ background-position:水平位置 垂直位置; }查看全部
-
如果要给水平菜单增加整体背景，需要对<ul>进行宽、高的设置。 因为菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
使用line-height使文字居中，同时使用margin使得a元素在高度改变的情况下，向移动，而不是向下移动。查看全部
-
当圆角图片背景已经放在a标签中的时候，改变hover状态是时只需将background-position：0 30px即可将橙色背景的图片显示出来，实现这一定需要注意的点事：1、背景图片制作已经包含了白色背景图和橙色背景图，并且叠加到一起，所以能够实现改动下位置就能够显示橙色背景。2、注意背景图片的高度与a标签的高度，否则导致图片显示不全或者把白色背景的一些部分也显示出来了。查看全部
举报
0/150
提交
取消