-
用js实现标签动态伸缩查看全部
-
js&jquery制作伸缩导航栏查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
文本缩进：text-indent查看全部
-
ul的高度为50px;il的margin-top为20px,a的高度为30px,将il的content撑高30px使得il刚好填满ul的content部分,所以当a:hover为40px是会向下溢出10px,所以需要设置margin-top:-10px. 如果设置margin-bottom:-10px,则a和li的content+li的margin-top刚好填满ul的content;正是由于刚好填满ul的content,a上不能向上撑开,效果上还是看到多出来的10px在a的下部.查看全部
-
如果将很多设置放在il标签中,il标签没有:hover功能,当设置a标签的:hover功能时,两个效果(颜色)将重叠而产生无法预料的效果,所以最好将设置放在a标签中.查看全部
-
a:hover{}表示鼠标移上出现变化查看全部
-
height:30px; line-height:30px;表示使得文字垂直居中查看全部
-
text-indent:20px; 表示缩进查看全部
-
display:block; 写在a标签下使得a标签变成“块”查看全部
-
text-indent 文本缩进查看全部
-
<!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>查看全部
-
jQuery中的hover的使用方法： hover中有两个方法，第一个是获得焦点的方法，第二个为失去焦点的方法查看全部
-
text-indent缩进 text-indent:10px;查看全部
-
使用js实现菜单的动效： 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) } } }查看全部
举报
0/150
提交
取消