-
伸缩菜单制作——改变高度 a:hover 重点：margin可以用负值，向反方向移动。 设置line-height使文字居中查看全部
-
1.无论JS 还是Jquery 动画开始时，要将其重置； 2. <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> 2.jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } ) })查看全部
-
可以用script和jQuey脚本来写动画，jQuery比script更为方便，代码简洁！注：当jquery的动画大开时要把上一个动画，清理掉，jquery的清理方法就是stop前一个动画。查看全部
-
CSS3不就可以么 ul li a { width:120px;transition: width .35s;} a:hover { width:130px;transition: width .35s; -moz-transition: width .35s; /* Firefox 4 */ -webkit-transition: width .35s; /* Safari 和 Chrome */ -o-transition: width .35s; /* Opera */ }查看全部
-
伸缩导航的制作 设置鼠标经过状态时： a:hover 高度比原来多10px margin-top:-10px; text-align:center;查看全部
-
position查看全部
-
圆角菜单-通过背景图片来实现 background-position查看全部
-
在 html 中，一般都使用 “ul\li” 来制作“菜单导航条”查看全部
-
<a>标签的设置 ul li a{display:block;} 定义的关键是将<a>标签设置为块元素 因此<li>标签里的样式就可以移到<a>标签的样式里查看全部
-
margin-top:-10px查看全部
-
伸缩导航条的制作 将圆角导航条上修改成伸缩导航条！ 去挑圆角贴图，给.on,a:hover加会原来的背景颜色。 把a标签的背景图片删掉，给.on,a:hover添加 高度，“重点”：margin可以用负值，相反方向移动。 通过改变<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 最后居中，line-height查看全部
-
background-position:x y; x,y是偏移量: 第一个值(x)是水平位置，第二个值(y)是垂直位置。其值可为正负。 实测y值为30px,或为-30px,都可以达到效果。查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
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 相等这是标准的无前缀语法。查看全部
-
CSS中：{IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。} 圆角css代码：border-radius:4px 4px 3px 3px 顺序是左上角，右上角，右下角，左下角 兼容代码：-moz-border-radius: 15px; border-radius: 15px;查看全部
举报
0/150
提交
取消