-
关键是把a标签定义为块级元素元素查看全部
-
<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> <body> <ul> <li><a class="on" 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> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <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;} a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;} a.on, a:hover{ color:#fff;background-color:#f60;height:40px; line-height:40px;margin-top:-10px;} </style> </head> <body> <ul> <li><a class="on" 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> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <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> </head> <body> <ul class="nav"> <li><a class="on" 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> </html>查看全部
-
将垂直菜单进行float：left就能变成水平菜单查看全部
-
margin-top:负值可以向上延伸（小技巧） 加入line-height:数值可以更加美观查看全部
-
通过在hover{...}中编写代码 通过background-position：x，y（对左右或者上下位置进行修改）查看全部
-
制作导航条，通常使用，有无列表，ul/il 一开始对列表进行list-style：none清除格式 将超链接标签进行块状化，display:block 如果鼠标经过有效果利用代码 text-indent文字缩进有利用减少代码和其他影响查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
margin可以用负值查看全部
-
伸缩菜单栏：margin可以用负值，向相反方向移动查看全部
-
background-position的用法： 对谁设置就是谁的背景图移动，正为右上，负为左下，上下、左右各自循环，例如：background-position：0 10px；表示左右不动，想下移动10px，而移下来的那10px会接在最上面，所以要合理的设置盒子的宽高，负责会把移走的部分显示出来。查看全部
-
在水平菜单的基础上制作圆角菜单： ①首先对ul定义高度，下划线； ②对li，让它向下移与下划线挨着； ③li的宽和背景图同宽度，高是背景的一半，因为背景有两部分组成，一半是默认的颜色，一半是hover的鼠标悬浮颜色； ④给a加入背景，此时的背景显示的默认的颜色； ⑤给a:hover加入background-position：0 -30px；这是对悬浮时的样式设置，让背景图向上移30px，此时是鼠标悬浮时的颜色。查看全部
-
水平方向伸缩菜单：查看全部
-
伸缩效果的菜单：改变高度，在hover样式中，向上增加margin-top:负像素，文字居中设置line-hright:在原基础上增加相同的像素。查看全部
举报
0/150
提交
取消