-
margin-top:-10px;查看全部
-
li里面设置向左浮动float：left; ul里面的宽度width删除; 设置文本对齐text-align：center，要把文本缩进text-indent先删除。查看全部
-
display:block;把a标签定义成行内块。 text-indent:20px;文字缩进20px。查看全部
-
background-position：x y; 第一个值(x)是水平位置，第二个值(y)是垂直位置。其值可为正负。 圆角css代码：border-radius:4px 4px 3px 3px 顺序是左上角，右上角，右下角，左下角查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
js实现水平变宽的导航栏 <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查看全部
-
<!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> *{margin:0;padding:0;font-size:14px;}/*初始*/ ul{list-style:none;width:100px;}/*去除无序列表前面的点*/ /*样式设置基本都在li上，最里面是a元素，可以增加hover的交互效果，所以对a元素设置样式*/ a{ text-decoration:none;/*去除下划线*/ display:block; height: 30px; line-height: 30px;/*注意行高！！！！！*/ width: 100px; background-color:#eee; margin-bottom: 1px; text-indent:10px;/*文本缩进，margin会使整个宽度增加，所以使用此属性，将文本向内缩进，整体宽度依然是100px*/ } a:hover{ background-color:#f60; color:#fff;/*文字颜色，变白*/ } </style> </head> <body> <ul> <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>查看全部
-
伸缩菜单的制作：在鼠标经过、选中菜单项等状态时，改变该项的高度（变高）。 导航栏原来a高度是30px，当鼠标经过时，高度纵向上高出10px，并且字体保持居中，方法： a:hover{height:40px; margin-top:-10px;line-height:40px;} 让标签纵向向上移动10px margin-top:-10px 文字垂直居中：height和line-height相等查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
1.贴图法改变圆角背景： background-position:x y;x,y是偏移量。 橙色背景图片沿y轴向上移动30px（水平方向不动） 最终效果如图所示：.nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;} 2.圆角css代码： border-radius:4px 4px 3px 3px 顺序是左上角，右上角，右下角，左下角 兼容代码：-moz-border-radius: 15px; border-radius: 15px;查看全部
-
垂直菜单改为水平菜单 ul宽度设定取消 li {float:left} 文本对齐方式 text-align:center查看全部
-
a标签滑动变换背景颜色及字体： a:hover{background-color:#??????;color:#???} 转化为块级元素：display:block; 采用文本缩进而不适用padding：text-indent:20px;查看全部
-
1、用无序列表构建菜单； 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧：margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。查看全部
-
使用js做出动画效果 <script> window.onload=function(){//在Dom加载完后执行此函数 var A = document.getElementsByTagName("a"); for(i in A){//循环 A[i].onmouseover=function(){ clearInterval(this.time); var This = this; This.time=setInterval(function(){//方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 This.style.width=This.offsetWidth+8+'px'; if(This.offsetWidth>=160){ clearInterval(This.time); } },30) } A[i].onmouseout=function(){ clearInterval(this.time); var This = this; This.time=setInterval(function(){//方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 This.style.width=This.offsetWidth-8+'px'; if(This.offsetWidth<=100){ clearInterval(This.time); } },30) } } } </script> 使用jquery做出动画效果查看全部
-
伸缩菜单的制作-在之前的样式中修改： .on,a:hover{ background-color:#f60; color:#fff;/*文字颜色，变白*/ height:40px;/*增加高度*/ margin-top:-10px;/*里用margin负值将整体向上占据10个像素*/ line-height:40px; font-size:20px; }查看全部
举报
0/150
提交
取消