-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
总结一下大家重点：1〉居中可以用text-align:center；2〉a里面的width应该不用设，因为ul已经设了宽度，不设的话，是100%继承你类宽度；3〉首页中的空格应该用“ ”代替，要多少个空格就打多少个，代码里无论打多少个空格，都只显示一个，应该打字符编码。查看全部
-
菜单<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: /* 图片定位 */查看全部
-
基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ clearInterval(oSubNav.time); oSubNav.time=setInterval(function(){ oSubNav.style.height=oSubNav.offsetHeight+16+"px"; if(oSubNav.offsetHeight>=120) clearInterval(oSubNav.time); },30) } } aLi[i].onmouseout=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ clearInterval(oSubNav.time); oSubNav.time=setInterval(function(){ oSubNav.style.height=oSubNav.offsetHeight-16+"px"; if(oSubNav.offsetHeight<=0) clearInterval(oSubNav.time); },30) } } } }查看全部
-
window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ //鼠标经过一级菜单，二级菜单动画下拉显示出来 var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight+16+"px"; if(This.offsetHeight>=120) clearInterval(This.time); },30) } } //鼠标离开菜单，二级菜单动画收缩起来。 aLi[i].onmouseout=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight-16+"px"; if(This.offsetHeight<=0) clearInterval(This.time); },30) } } } }查看全部
-
无序列表构建菜单查看全部
-
<script> window.onload=function(){ var aA=document.getElementsByTagName('a'); for(var i=0; i<aA.length; i++){ aA[i].onmouseover=function(){ var This=this; clearInterval(This.time); This.time=setInterval(function(){ This.style.width=This.offsetWidth+8+"px"; 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) } } } </script>查看全部
-
<style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none} a{color:#333;text-decoration:none} .nav li a{ display:block; /*text-indent:20px;*/ text-align:center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style>查看全部
-
<style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none;} a{color:#333;text-decoration:none} .nav li{ float:left;} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-right:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style>查看全部
-
<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>查看全部
-
<style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} ul li{float:left; margin-top:20px;margin-right:2px;} a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;border-right:1px;border-right:1px;border-radius:10px 10px 0 0;} a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px; margin-top:-10px;} </style>查看全部
-
改变导航栏选中拉伸高度，在hover里设定height，往上拉伸用margin-top负值，文字垂直居中，line-height与height数值一样。查看全部
-
margin负值可以向相反方向移动查看全部
举报
0/150
提交
取消