-
还未看查看全部
-
伸缩菜单——改变长度 设置高度，外边距，行高查看全部
-
给第一个a标签设置class样式，表示默认状态下选中查看全部
-
圆角菜单的制作： 通过设置背景，改变外观样式，通过a:hover,可以为菜单增加交互效果 背景移动：background-position（属性）：水平方向，垂直方向 background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。 提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。 body { background-image:url('bgimage.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } 可能的值 值 描述 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 值。查看全部
-
text-indent wenbensuojin查看全部
-
ul{list-style:none;}查看全部
-
利用float横向排列查看全部
-
用无序列表构建菜单查看全部
-
导航菜单 <a>标签设置成{display:block;} 水平菜单 li标签设置float:left; margin-top:-10px; 反方向移动 全角空格可保留 background-position:Ｘ Ｙ查看全部
-
a:hover 鼠标滑到后有效果查看全部
-
window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ //鼠标经过一级菜单，二级菜单动画下拉显示出来 var subNav=this.getElementsByTagName("ul")[0]; subNav.className=''; } //鼠标离开菜单，二级菜单动画收缩起来。 aLi[i].onmouseout=function(){ var subNav=this.getElementsByTagName("ul")[0]; subNav.className="subNav"; } } }查看全部
-
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); } )) })查看全部
-
margin-top:-10px margin设置负数反方向移动 背景图片的偏移：background-position:0 -30px; 对于Y来说：-是向上移，+是向下移， 对于X来说：-是向左移，+是向右移查看全部
-
line-height和height组合到一块儿，还有一种效果，就是如果把它们的值设置的一样了，文字就会在垂直方向居中查看全部
-
背景图片的偏移：background-position:0 -30px; 对于Y来说：-是向上移，+是向下移， 对于X来说：-是向左移，+是向右移查看全部
举报
0/150
提交
取消