-
li a:hover{ background-color:#F60; color:green} text-indent:20px; display:block;查看全部
-
水平方向伸缩菜单： JavaScript： 1、window.onload //DOM执行完以后在执行其下代码 2、document.getElementsByTagName('a'); //获取所有的a标签 3、object(a).length //说的是a标签的个数 4、onmouseover、onmouseout //鼠标移入移出 5、clearInterval(this.time); //实行动画前要先清除之前的动画 避免动画累加 6、setInterval(function(){},30); //每30毫秒 实行一下此函数 7、This.offsetWidth+8+"px"; //当前的宽度+变宽的速度 jQuery： 1、首先要引入jQuery再写script标签及jq代码 <script type="tt/js" src="....min.js"></script><script> jq代码 </script> 2、$('a').hover() //选择所有a标签 jq封装的hover方法 3、hover方法自带移入移出方法 function(){},function(){} 4、$(this).stop().animate({"width":"160px"},200); //实行当前动画前先停掉上一个动画；自带移入移出动画animate 宽度发生变化 延迟200毫秒查看全部
-
<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) no-repeat; margin-left:1px;} .nav li a.on, .nav li a:hover{background-position:0px -30px; color:#fff;} </style> <ul class="nav"> <li><a class="on" href="#">首 页</a><> <li><a href="#">新闻快讯</a><> <li><a href="#">产品展示</a><> <li><a href="#">售后服务</a><> <li><a href="#">联系我们</a><> </ul> 在a标签中设置宽高，背景图(不重复)； 为了给第一个li默认，所以给定义on类设置； 设置鼠标滑过的效果，a：hover，调整背景图位置（background-position：左右 上下）； 用border-radius设置同样的圆角效果如图；查看全部
-
<!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;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a{ display:inline-block; text-indent:10px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style> </head> <body> <ul class="nav"> <li><a 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>查看全部
-
block：独占一行；大小可以设置；不设置就和父级一致； inline：共占一行；大小不可设置与内容一致； inline-block：共占一行；大小可设置；查看全部
-
此处未完成查看全部
-
待回顾查看全部
-
以后回顾查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度，如果需要对<ul>进行背景设置，首先要给<ul>定义宽，高。查看全部
-
文本缩进：text-indent;查看全部
-
margin负值，向相反方向移动查看全部
-
a { color: #333; text-decoration: none } 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)查看全部
-
全角的空格,全角的空格不会被忽略查看全部
-
居中对齐：text-align:center;查看全部
-
文本缩进：text-indent; a：hover{背景颜色；字体颜色}查看全部
举报
0/150
提交
取消