-
在这一届要学会圆角水平菜单的制作，特别是圆角水平菜单的背景图片，要用到一个方法就是：background-position:多少多少px。比如：background-position:0 30px。代表水平不用动，垂直移动30px查看全部
-
onmouseover鼠标移过onmouseout鼠标离开setIntervel不停地调用函数clearInterval取消setInterval函数的运行this提取这个函数的值offsetWidth , 元素内可见区域的宽度 + 元素边框宽度（ ； clientWidth , 元素内可见区域的宽度 ； scrollWidth , 元素的全文宽度 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); } )) })查看全部
-
背景图片移动background-position:水平 竖直； 用图片制作圆角菜单是在原来CSS3不流行的时候，为了IE系列，不得不用图片。现在CSS3普及了，同时基本上不考虑IE8以下的样式了，所以大多都用CSS3的border-radius实现了。 所有浏览器都支持 background-position 属性。 注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 可能的值 值 描述 top left top center top right center left center center center right bottom left bottom center bottom right 如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 x% y% 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 xpos ypos 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。查看全部
-
垂直菜单改为水平菜单：ul-width去掉,li进行float:left；a标签的文本缩进改为文本居中text-indent change to text-align查看全部
-
基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
学过JAVASCRIPT应该不难吧，学完后面的课程再做查看全部
-
交互查看全部
-
首行缩进ind...查看全部
-
清楚列表小圆点查看全部
-
link-height 行高查看全部
-
结构与表现分离查看全部
-
通过设置背景，改变外观样式；通过设置a:hover来增加交互效果查看全部
-
垂直菜单改为水平菜单：ul-width去掉,li进行float:left；a标签的文本缩进改为文本居中text-indent change to text-align查看全部
-
设置标签动画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>查看全部
-
background-position:0 -30px 设置背景图片位置，参数值为X，Y查看全部
举报
0/150
提交
取消