-
导航栏的制作，主要用到ul，li，a标签，去下划线，去ul前的圆点。<br><br> 垂直导航栏：其中将a设置为块元素，此时只需要对a设置，不用对li设置css；line-height=height时实现行中文字垂直居中；text-indent可以替换padding，也可以用text-align设置；需要对ul设置宽度。<br> 水平导航栏：在垂直导航制作的基础上，去掉缩进和ul的宽，对li左浮动。 注意：文本中空格输入需要在全角格式下输入；要想让浏览器窗口缩小时导航条总是在同一行，这需要对外面的导航div设置一个固定的宽。查看全部
-
文本缩进：text-indent: n px; 空格用： <a>标签变成块元素：display;block; 去除列表圆点：list-style:none; 去除下划线：text-decoration:none查看全部
-
一般都使用 “ul\li” 来制作“菜单导航条” <a>元素加上display:block;后会变成块元素可以直接在上面定义宽高、背景等和div一样。查看全部
-
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;} *{ } （用于全局设置）查看全部
-
基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
text-indent:同样设置缩进 菜单导航条： 1、主要设置a标签的高和各种样式，而不设li查看全部
-
导航条菜单制作总结 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； -------> 雪碧图的应用--- background-position 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。查看全部
-
java伸缩菜单制作——水平方向<br> 任务1：清除计时器clearInterval，每一个动作开始和结束时必须清除上个计时器。<br> 任务2：设定计时器setInterval<br> 任务3：a标签的宽度offsetWidth. 1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。查看全部
-
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); } )) })查看全部
-
设置伸缩导航<br> <br> 字体居中的方式，最好是line-height:然后如果想要使box向上移动 可以使用margin-top:-10px;使用margin-top的负数就可以使完成相反方向的移动！ line-height:设置行距。另外margin：可以设置为负值查看全部
-
背景图片的偏移：background-position:0 -30px; 对于Y来说：-是向上移，+是向下移， 对于X来说：-是向左移，+是向右移.查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
1.圆角菜单的制作，通过设置背景，改变外观样式。<br> 通过a：hover，可以为菜单增加交互效果。<br> 2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class="on" 在为它的样式添加上一个on，最后移动它的位置（x，y）<br> <br> 圆角菜单：border-radius; /* CSS */<br> background-image:url(); /* 插入图片 */<br> background-position: /* 图片定位 */ background-position是设置背景位置，第一个参数：水平位置（左右）为0是不变化;第二个参数：设置垂直方向 （上下），-30px是向下移动30px。为什么减30px呢？因为这个按钮图片本身是120px*60px,总高度为60px;且已经在a样式里面设置为height: 30px；显示白色背景圆角。所以background-position:0 -30px;就是当你放在按钮时候高度下降30px，就有白色背景变为橙色背景效果。查看全部
-
水平导航菜单栏制作查看全部
举报
0/150
提交
取消