-
导航条菜单制作总结 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； -------> 雪碧图的应用--- background-position 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。查看全部
-
window.onload=function(){//定义全部加载完后实现 var aA=document.getElementsByTagName('a'); for(var i=0; i<aA.length; i++){ aA[i].onmouseover=function(){//当鼠标移动到 a标签时 实现代码 var This=this; clearInterval(This.time);//清除之前的计时器效果 This.time=setInterval(function(){ //设定计时器 This.style.width=This.offsetWidth+8+"px";//设定每次加 8像素 if(This.offsetWidth>=160) clearInterval(This.time); },30) } aA[i].onmouseout=function(){//当鼠标移出 a标签时 实现代码 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) } } } JQuery： $(function(){ $("a").hover( function(){ $(this).stop().animate({"width":"160px"},200);//开始动画之前，先把上一个动画清理掉 }, function(){ $(this).stop().animate({"width":"120px"},200); } ); });查看全部
-
使用JQuery实现菜单的水平伸缩（注意使用stop来清除上一个动画的效果）查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
1.圆角菜单的制作，通过设置背景，改变外观样式。 通过a：hover，可以为菜单增加交互效果。 2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class="on" 在为它的样式添加上一个on，最后移动它的位置（x，y） 圆角菜单：border-radius; /* CSS */ background-image:url(); /* 插入图片 */ background-position: /* 图片定位 */ border-radius:15px 15px 0 0;{左上 右上 坐下 右下}查看全部
-
一般都使用 “ul\li” 来制作“菜单导航条”查看全部
-
清除样式：*{margin：0；padding：0 } 去除ul的圆点：ul{line-style:none} //设置a为块级元素:display:block 才能设置宽度、高度、hover效果 去除a的下划线：a{text-decoration:none} a:hover{设置颜色属性} 设置文本缩进但不影响总体宽度：text-indent查看全部
-
background-position:0 -30px;背景图片的位移 x y查看全部
-
如果要给水平菜单增加整体背景，需要对（）进行哪些CSS设置 菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
text-decoration:none清除下划线；list-style:none;清除前面的点查看全部
-
导航菜单的制作 6-2编程挑战查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
改变a标签的高度height:40px，这样是向下增加的，设置margin-top为负值，向反方向移动margin-top:-10px，但文字也向上移动，可设置a标签line-height:40px查看全部
-
圆角菜单：<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(images/btnBg.png); margin-left:1px;} .nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;} </style>查看全部
-
清除样式：*{margin：0；padding：0 } 去除ul的圆点：ul{line-style:none} //设置a为块级元素:display:block 才能设置宽度、高度、hover效果 去除a的下划线：a{text-decoration:none} a:hover{设置颜色属性} 设置文本缩进但不影响总体宽度：text-indent查看全部
举报
0/150
提交
取消