-
1、用*{}初始化代码是个好习惯。 2、用无序列表ul和li标签制作导航栏。 3、在块级元素中，当height = line-height 时达到垂直居中的效果。 4、在块级元素中，让文本居中的方法宜采用" text-indent" 标记（使用 padding 标签虽然也可以，但同时会增加盒子的长/宽度。） 5、在 ul/li/a 三层嵌套下，若大部分操作只是针对 a ，那么可以使用 a{display:block}，将a标签变成块级元素,即可将对 li的样式全部放在 a上，可少设置一层样式，起到简化样式表的效果。 6、a:hover{} 能够起到简单的特效效果。查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
需要将a标签设置为块元素，才能设高宽、hover效果。 代码：a{display:block}查看全部
-
向下拉菜单查看全部
-
ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; } ul li { float: left } ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; } a.on, a:hover { background: #F60; color: #fff; } </style> <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> </head>查看全部
-
变高导航查看全部
-
.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}查看全部
-
window.onload=function(){ var oNav=document.getElementsByTagName('ul')[0]; var aA=oNav.getElementsByTagName('a');/*查找所有的a标签元素*/ for(var i=0; i<aA.length; i++){aA[i].onmouseover=function(){/*获取a标签的鼠标事件*if(this.className!="on"){clearInterval(this.time); /*防止累加*/ var This=this; /*把当前的this 对象传进来*/ This.time=setInterval(function(){ This.style.width=This.offsetWidth+8+"px"; if(This.offsetWidth>=120)/*如果当前对象的宽度 大于 120*/ clearInterval(This.time);/*就停止当前时间*/},30) aA[i].onmouseout=function(){/*获取a标签的鼠标移除事件*/if(this.className!="on"){clearInterval(this.time); var This=this; this.time=setInterval(function(){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=80){/*如果当前对象的宽度 小于120*/ This.style.width='80px'; clearInterval(This.time); } },30)查看全部
-
改变a标签的高度height:40px，这样是向下增加的，再设置margin-top为负值，向反方向移动margin-top:-10px，但文字也向上移动了，可设置a标签line-height:40px查看全部
-
通过设置背景，改变外观样式 通过a:hover，可以为菜单增加交互效果查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
字体居中的方式，最好是line-height:然后如果想要使box向上移动 可以使用margin-top:-10px;使用margin-top的负数就可以使完成相反方向的移动！查看全部
-
a{text-align:center}文本居中，text-tendent是文本缩进查看全部
-
a{text-decoration:none;}清除下划线 a{display:block}a标签变成块级元素 a{text-indent:10px}文字缩进10px,相当于a{padding-left:10px}内左边距10px a:hover{background-color:blue;color:white}鼠标经过时，背景（块）颜色变成蓝色，字体变成白色查看全部
-
ul{list-style:none}清除原点查看全部
举报
0/150
提交
取消