-
1.圆角菜单的制作，通过设置背景，改变外观样式。 通过a：hover，可以为菜单增加交互效果。 2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class"on" 在为它的样式添加上一个on，最后移动它的位置（y，x） 圆角菜单：border-radius; /* CSS */ background-image:url(); /* 插入图片 */ background-position: /* 图片定位 */查看全部
-
list style 是菜单前面的圆点 CSS属性none可清除查看全部
-
任务1对应代码：clearInterval 任务2对应代码：setInterval 任务3对应代码：offsetWidth查看全部
-
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); } )) })查看全部
-
设置水平菜单导航栏 在垂直菜单导航栏样式基础上修改： 1、设置li为左浮动float:left 2、将ul限制宽度去掉 3、设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉查看全部
-
1.用ul无序列列表构建菜单 2.清除默认样式 *{margin:0;padding:0;} 清除ul的样式 ul{list-style：none}，能去掉前面的默认小圆点 去掉a标签的下划线 a{text-decoration：none} 在导航栏中经常用 height: 30px;line-height: 30px;可使文字垂直居中。 3.如果用为文字前面增加像素，最好用缩进的方式来实现 {text-indent：xx px}（文本缩进,用text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ） 4.ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素，而块状元素才可以设置 宽度 高度，所以要把a设置为块级元素：ul li a{display:block;} *{ } （用于全局设置） hover格式 a:hover{}查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
善用margin负值查看全部
-
伸缩菜单——改变高度（ul设置高度，li设置margin-top，a:hover设置margin-top: -10px;）查看全部
-
水平菜单（设置 li 浮动）查看全部
-
用无序列表“ul\li”构建菜单； 定义的关键是把 a 标签设置为块元素； 块元素的宽度默认是其父元素的100%。查看全部
-
<style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style> </head> <body> <ul class="nav"> <li><a 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>查看全部
-
jquery 用animate定义动画查看全部
-
无序列表水平排列 ：将ul宽度去掉，li左浮动 垂直菜单文本：text-indent进行文本缩进 水平菜单文本：text-align:center 进行文本居中查看全部
-
将a设置为块元素 a{display:block;} text-decoration：none 去下划线 list-style:none; 去列表标志查看全部
举报
0/150
提交
取消