-
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;} *{ } （用于全局设置）查看全部
-
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>查看全部
-
1.圆角菜单的制作，通过设置背景，改变外观样式。 通过a：hover，可以为菜单增加交互效果。 2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class"on" 在为它的样式添加上一个on，最后一动它的位置（y，x）查看全部
-
给a标签margin-top:-10px查看全部
-
1.伸缩导航条的制作 将圆角导航条上修改成伸缩导航条！ 去挑圆角贴图，给.on,a:hover加会原来的背景颜色。 把a标签的背景图片删掉，给.on,a:hover添加 高度，“重点”：margin可以用负值，相反方向移动。 最后居中，line-height查看全部
-
background-position:0 -30px查看全部
-
选C，因为菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
1.圆角菜单的制作，通过设置背景，改变外观样式。 通过a：hover，可以为菜单增加交互效果。 2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class"on" 在为它的样式添加上一个on，最后一动它的位置（y，x）查看全部
-
给li标签加上li{float：left}从而实现横向导航条！查看全部
-
1.从重向的导航条→横向的导航条，给li标签加上左浮动li{float:left},在把ul上的宽去掉！ 2.然后让它居中对齐 a{text-align：center} 3.删除文本缩进！查看全部
-
任务1：把a标签定义成行内块：display:block; 任务2：文字缩进20px：text-indent:20px;查看全部
-
1.用无序列列表构建菜单 <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <ul> ...... 2.在设置样式时，别忘清除默认样式和清除ul的样式ul{list-style：none}，去掉a标签的下划线的代码是a{text-decoration：none} 3.如果用为文字前面增加像素，最好用缩进的方式来实现，{text-indent：xx px} 4.因为<a>标签是最里面的元素可以将a标签设置为块级元素，把li上的代码移到a标签上去，代码：{display：block}，然后在为a添加样式！a：hover{……}查看全部
-
1、用无序列表构建菜单； 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧：margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。查看全部
-
圆角css代码：border-radius:4px 4px 3px 3px 顺序是左上角，右上角，右下角，左下角 兼容代码：-moz-border-radius: 15px; border-radius: 15px; 圆角菜单：border-radius; /* CSS */ background-image:url(); /* 插入图片 */ background-position: /* 图片定位 */ <style> *{margin:0;padding:0;font-size:14px;} ul { list-style: none; border-bottom: 5px solid #F60; padding-left: 30px; height: 50px; overflow: auto; } li{float:left;margin-top:20px;} a { text-decoration: none; display: block; height: 30px; line-height: 30px; width: 120px; background-color: #ccc; text-align: center; margin-bottom: 1px; border-radius: 5px 5px 0 0; } .on,a:hover{color:#fff;background-position:0 -30px;background:#F60;} </style> <ul> <li><a href="#" class="on">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> 通过a:hover,可以为菜单增加交互效果。查看全部
-
很清晰查看全部
举报
0/150
提交
取消