-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
ul的宽度去掉，把li的float设为left、就能得到水平菜单 text-align可让文本水平居中对齐 去掉ul前面的圆点 ul{list-style:none;} a标签去掉下划线：a{text-decoration:none;} 纵向垂直菜单：用无序列表构建导航菜单<ul><li><a href="#"></a></li></ul> <a>标签的设置，设置成块级元素 水平菜单跟垂直菜单一样，只需要设置li的属性float：left查看全部
-
JS实现查看全部
-
margin属性查看全部
-
水平菜单查看全部
-
用无序列表构建菜单查看全部
-
1.用无序列表构建菜单 2.垂直菜单转变为水平菜单：对其CSS样式进行重新的设置：float:left 3.在制作圆角菜单时，背景图片是贴在<a>标签上的 4.在制作改变高度的伸缩菜单时用什么技巧实现高度向上延伸：margin-top用负值 5.用JS制作水平伸缩菜单时,“this”代表当前的<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> 清除计时器：clearInterval 设定计时器：setInterval a标签的宽度：offsetWidth查看全部
-
jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } ) })查看全部
-
采用js实现导航栏 1.jS(原生代码)实现：动画开始前先清除一下定时器，避免动画累加。 window.onload=function (){ var aA=document.getElementByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function (){ clearInterval(This.time); var This=this; /*把当前的this对象传进来*/ This.time=setInterval(function (){ This.style.width=This.offsetWidth+8+"px"; /*8是变宽的速度*/ 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); } } }; $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); }, function(){ $(this).stop().animate({"width":"120px"}.200); } ) })查看全部
-
导航栏原来a高度是30px，当鼠标经过时，高度纵向上高出10px，并且字体保持居中，方法： a:hover{height:40px;margin-top:-10px;line-height:40px;} 让标签纵向向上移动10px margin-top:-10px查看全部
-
<!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>查看全部
-
<style> *{margin:0;padding:0;font-size:14px;} ul{list-style:none;height:50px;padding-left:30px;border-bottom:5px solid #F60} li{float:left;margin-top:20px} a{ text-decoration:none; display:block; height:30px; line-height:30px; width:120px; background-color:#ccc; margin-bottom:1px; text-align:center; } .on,a:hover{color:#fff;background-color:#F60;height:40px;line-height:40px;margin-top:-10px} </style>查看全部
-
伸缩菜单的制作-改变高度原理: 在鼠标经过、选中菜单项等状态时，改变该项的高度（变高）。 通过改变<a>标签的margin值，实现菜单项【向上增高】，同时让文字垂直居中。 a{height:30px;} a:hover{height:40px;margin-top:-10px;line-height:40px;}/*重点*/ 提示： margin可以用负值，向相反方向移动。 改变a标签的高度height:40px，这样是向下增加的，再设置margin为负值，向反方向移动margin-top:10px，但文字也向上移动国，可设置a标签line-height:40px查看全部
-
background-position：x y; 第一个值(x)是水平位置，第二个值(y)是垂直位置。其值可为正负。 圆角css代码：border-radius:4px 4px 3px 3px 顺序是左上角，右上角，右下角，左下角 兼容代码：-moz-border-radius: 15px; border-radius: 15px; background-position: x% y% 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。查看全部
举报
0/150
提交
取消