-
做菜单比较合适的结构是<ul><li></li></ul>,这种结构类似于书本目录，可以多级嵌套。查看全部
-
导航条菜单制作总结 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； -------> 雪碧图的应用--- background-position 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。查看全部
-
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); } } }; 2.jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } )) })查看全部
-
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的下部.查看全部
-
1. 为元素创建四个相同的圆角 (1) 这一步可选输入 -webkit-border-radius: r 这里的 r 是圆角的半径大小表示为长度带单位。 (2) 输入 border-radius: r 这里的 r 是圆角的半径大小 使用与第(1)步中相同的值。 这是该属性的标准短形式语法。 2. 为元素创建一个圆角 (1) 这一步可选输入 -webkit-border-top-left-radius: r 这里的 r 是左上方圆角的半径大小表示为长度带单位。 (2) 输 入 border-top-left-radius: r这里的 r 使用与第 (1) 步中相同的值。这是该属性的标准长形式语法。注意这些步骤仅演示了如何创建左上方圆角 此外 还可以单独创建其他方位的圆角 步骤如下。 创建右上方圆角用 top-right 替换第 (1) 步和第 (2) 步中的 top-left 。 创建右下方圆角用 bottom-right 替换第 (1) 步和第 (2) 步中的 top-left 。 创建左下方圆角用 bottom-left 替换第 (1) 步和第 (2) 步中的 top-left 。 3. 创建椭圆形圆角 (1) 这一步可选输入 -webkit-border-radius: x / y 其中 x 是圆角在水平方向上的半径大小 y 是圆角在垂直方向上的半径大小均表示为长度带单位。 (2) 输入 border-radius: x / y 其中 x 和y 跟第 (1) 步中的值相等。 4. 使用 border-radius 创建圆形 (1) 输入 -webkit-border-radius: r 这里的 r 是元素的半径大小带长度单位。要创建圆形可以使用短形式的语法 r 的值应该等于元素高度或宽度的一半。 (2) 输入 border-radius: r 这里的 r 是元素的半径大小带长度单位跟第 (1) 步中的 r 相等这是标准的无前缀语法。 (注意 -webkit-border-top-left-radius: r ; 这是一个 厂商前缀)查看全部
-
设置水平菜单导航栏 在垂直菜单导航栏样式基础上修改： 1、设置li为左浮动 2、将ul限制宽度去掉 3、设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉查看全部
-
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;} *{ } （用于全局设置）查看全部
-
a:hover{color:#xxx;background-color:#xxx;}查看全部
-
水平菜单的制作： 在垂直菜单的基础上，<li>增加float:left;属性，<ul>不限宽度查看全部
-
$(this).stop().animate({"width":"160px"},200); 在200时间内将宽度设为160 $(this).stop()先清除上一个动画，以免受到影响 animate是jQuery自带的动画效果查看全部
-
jQ 水平伸缩菜单查看全部
-
margin-top:可以是负的值查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
this代表当前<a>标签查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
举报
0/150
提交
取消