-
text-indent:20px; 文本缩进查看全部
-
给class名为subNav的块加一个transition:height 1s;当鼠标经过一级菜单时，二级菜单在过渡效果1s内完成height从0到160px的过渡效果查看全部
-
一、垂直菜单的制作 一般都使用 “ul\li” 来制作“菜单导航条” padding-left:20px;//对改变原来的盒子的宽度。 text-indent:20px;//不会对原来盒子的宽度产生影响。 ul li a{ display:block;//将a标签设置为块元素。 } 代码： *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:120px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} 二、水平菜单的制作 和垂直菜单的结构是完全一样的，只是使用float:left;来实现将垂直菜单变成水平菜单。 代码如下： *{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-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} 三、圆角菜单的制作 通过设置背景，改变外观样式 通过a:hover，可以为菜单增加交互效果 菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
鼠标划过时增高： a.on a:hover{height:40px;margin-top:-10px;}查看全部
-
垂直菜单：将a标签设置为块元素 <ul><li><a href="#">文字</a></li></ul>信息 a{display:block;text-indent:20px;}查看全部
-
水平菜单： .nav li{float:left;} 块元素居中： 父元素{position:relative;left:50%;} 子元素{position:relative;left:-50%;}查看全部
-
圆角菜单-背景图片移动： background-position:0 -30px;查看全部
-
效果：鼠标经过时 背景高度向上增加了1px； 做法：对a:hover 设置height比原来加1px，并且设margin-top：-1px查看全部
-
二级菜单的实现查看全部
-
伸缩导航栏查看全部
-
圆角导航查看全部
-
单行的垂直居中可以试着设定line-height查看全部
-
把列表项<li>里面的<a>变成块元素，会更好。减少了对<li>标签的编写。查看全部
-
基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会） 需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block} hover格式 a:hover{}查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
举报
0/150
提交
取消