-
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>查看全部
-
CSS实现宽度变化过度，也有过度时间 <style type="text/css"> * { margin: 0; padding: 0; font-size: 14px; } 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;transition: width 1s; } a.on, a:hover { background: #F60; color: #fff;width:160px; } </style>查看全部
-
将 a 标签设置为块元素，才能设置宽，高，背景。 a｛display:block;｝查看全部
-
伸缩菜单——高度向上增加： 在设置高度height增加的基础上，还要设置margin-top:- px（提示：margin可以用负值，向相反方向移动！） 由于高度增加，需要文字垂直居中：设置高度与行高相同的值来实现。查看全部
-
background-position:Xpx Ypx; 背景图片原点（左上角顶点）位置，从（0，0），变为（X,Y），然后与元素原点（左上角顶点）位置对应.查看全部
-
要想实现a:hover的功能，可将li标签中的设置内容放在a标签中，但必须将a设置成块元素（即display:block;）.查看全部
-
text-indent：文字缩进查看全部
-
<a>标签设置块元素查看全部
-
伸缩菜单可用margin-top为负值来实现；查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
text-indent文本缩进，并且不会影响本身的宽度或者父元素的宽度查看全部
-
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 ; 这是一个 厂商前缀)查看全部
-
水平导航菜单的制作 li加浮动 ul去掉width值 文字居中 text-align：center查看全部
-
设置水平菜单导航栏 在垂直菜单导航栏样式基础上修改： 1、设置li为左浮动 2、将ul限制宽度去掉 3、设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉查看全部
举报
0/150
提交
取消