-
1.用ul无序列列表构建菜单 2.清除默认样式 *{margin:0;padding:0;} 清除ul的样式 ul{list-style：none}，能去掉前面的默认小圆点 去掉a标签的下划线 a{text-decoration：none} 在导航栏中经常用 height: 30px;line-height: 30px;可使文字垂直居中。 3.如果用为文字前面增加像素，最好用缩进的方式来实现 {text-indent：xx px}（文本缩进,用text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ） 4.ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素，而块状元素才可以设置 宽度 高度，所以要把a设置为块级元素：ul li a{display:block;} *{ } （用于全局设置）查看全部
-
第二个ul相当于为了下拉列表样式，不起主要作用，所以取得[0]第一个ul查看全部
-
伸缩菜单的制作——水平方向查看全部
-
伸缩菜单的制作——改变高度查看全部
-
window.onload=function(){ var aA = document.getElementsByIagName('a'); /*查找所有的a标签元素*/ for(var i=0; i<aA.length; i++){ aA[i].onmouseover = function(){ /*获取a标签的鼠标事件*/ clearInterval(This.time); /*防止累加*/ var This = this; /*把当前的this 对象传进来*/ This.time = setInterval(function(){ This.style.width = This.offsetWidth + 8 + "px"; if(This.offsetWidth >= 160){ /*如果当前对象的宽度 大于 160*/ clearInterval(This.time); /*就停止当前时间*/ } },30) } aA[i].onmouseout = function(){ /*获取a标签的鼠标移除事件*/ clearInterval(This.time); /*防止累加*/ var This = this; /*把当前的this 对象传进来*/ This.time = setInterval(function(){ This.style.width = This.offsetWidth - 8 + "px"; if(This.offsetWidth <= 120){ /*如果当前对象的宽度 大于 160*/ This.style.width = "120px"; clearInterval(This.time); /*就停止当前时间*/ } },30) } }查看全部
-
1.圆角菜单的制作，通过设置背景，改变外观样式。 通过a：hover，可以为菜单增加交互效果。 2.横向菜单与圆角菜单的区别是：为ul增加一个高度， 装饰线 border-bottom、内填充margin-padding,为a标签添加圆角背景图片，宽度与背景图片的宽度一致、有一个默认的选中状态，所以要为a标签加上一个class"on" 在为它的样式添加上一个on，最后在交互效果时移动动它的位置（x，y） 例：background-position: 0 -30px;(指将图片水平方向不变,向上移30px;) 简单地说，就是以图片的左上角顶点为原点，往下和右都为正，反之为负查看全部
-
垂直菜单的制作<br> 1.用ul无序列列表构建菜单<br> 2.清除默认样式 *{margin:0;padding:0;font-size:12px;} *{ }（用于全局设置随便设字体大小）<br> 清除ul的样式 ul{list-style：none}，能去掉前面的默认小圆点<br> 去掉a标签的下划线 a{text-decoration：none} 在导航栏中经常用<br> height: 30px;line-height: 30px;可使文字垂直居中。<br> 3.如果想要文本左右移动对齐用文本缩进方法好点。<br> {text-indent：xx px}（文本缩进,用text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ）<br> 4.因为a标签是最内部的元素，所以对a标签定义最关键。ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素，而块状元素才可以设置 宽度 高度，所以要把a设置为块级元素：ul li a{display:block;}查看全部
-
001查看全部
-
jquery动画，先stop以前的动画，然后再animate查看全部
-
text-indent查看全部
-
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} .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;border: 1px solid #f65;} .nav li a.on, .nav li a:hover{ background-color: #f60; color:#fff; height:40px; margin-top: -10px;line-height:40px;} </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>查看全部
-
background-position: 0-30px;查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
background-position:0(是水平方向移动) 30px（是垂直方向移动，负数是向下）查看全部
举报
0/150
提交
取消