-
伸缩菜单的制作——水平方向查看全部
-
伸缩菜单的制作——水平方向 window.onload=function(){ //定义全部加载完后实现 var aA=document.getElementsByTagName('a'); //实例化 a标签 for (var i = 0; i < aA.length; i++) { //循环 aA[i].onmouseover=function(){ //当鼠标移动到 a标签时 实现代码 clearInterval(this.time); //清除之前的计时器效果 var This=this; //实例化 This.time=setInterval(function(){ //设定计时器 This.style.width=This.offsetWidth+8+'px'; //设定每次加 8像素 if(This.offsetWidth>=260){ //定义 如果宽度达到 260像素时 怎样 This.style.width="260px"; //设置最大宽度为260PX clearInterval(This.time) //停止 } },30) }查看全部
-
伸缩菜单的制作——改变高度 <style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} ul li{float:left; margin-top:20px;} a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;} a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;margin-top:-10px;} </style> margin-top:-10px;使上边距减少10px查看全部
-
伸缩菜单的制作： .on,a:hover{background-color:#F60;color:#fff;line-height:40px;height:40px; margin-top:-10px;}margin用负值，可以向上移动。查看全部
-
圆角水平菜单的制作 <style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} .nav li{float:left} .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px;} .nav li a.on, .nav li a:hover{background-position:0 30px; color:#fff;} </style>查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
background-position是设置背景位置，第一个参数：水平位置（左右）为0是不变化;第二个参数：设置垂直方向 （上下），-30px是向下移动30px查看全部
-
水平菜单的制作 <style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none;} a{color:#333;text-decoration:none} .nav li{float:left;} .nav li a{ display:block; text-align:center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style>查看全部
-
将垂直菜单变成水平菜单只需要给li添加一个左浮动float：left,将ul宽度去掉 水平菜单 在垂直菜单导航栏样式基础上修改： 1、设置li为左浮动：float: left; 2、将ul限制宽度去掉：删去ul{width:100px;}这句话 3、li标签中设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉查看全部
-
当被设置元素为 块状元素 时用 text-align：center 就不起作用了 *{margin:0; padding:0; font-size:14px;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:green; color:yellow;}查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
当被设置元素为 块状元素 时用 text-align：center 就不起作用了！！！！查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
文本缩进：text-indent: n px; 空格用： <a>标签变成块元素：display;block; 去除列表圆点：list-style:none; 去除下划线：text-decoration:none a:hover{ background-color:#F60; color:#fff}鼠标经过的文字背景颜色和字体颜色查看全部
举报
0/150
提交
取消