网站头部导航

为了实现上面这个效果，完整版代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ width: 960px; height: 50px; border: 1px solid red; margin: 100px auto; } .nav ul{ /*去掉小圆点*/ list-style: none; } .nav ul li{ float: left; width: 120px; height: 50px; /*让内容水平居中*/ text-align: center; /*让行高等于nav的高度，就可以保证内容垂直居中*/ line-height: 50px; } .nav ul li a{ display: block; width: 120px; height: 50px; } /*两个伪类的属性，可以用逗号隔开*/ .nav ul li a:link , .nav ul li a:visited{ text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> </ul> </div> </body> </html>

1.div默认宽度全屏，高度自适应（根据里面内容的高度），如果定义了div高度，里面内容的高度大于这个高度，就会出现超出边界的情况
比如上例中，如果把li的float属性去掉，会出现超出边界的情况

2.float属性的元素，肯定不会超过包含块的内边距（保持在包含块padding留白以内）（不仅是左右，上下也一样）,上例中，不把li的float属性去掉，把li的高度无论设置成多少，都不会绘制到nav之外

3.list-style: none;属性去掉li的默认原点

4.display: block;换成display: inline-block;效果一样，让a标签可以设置宽高，默认内联元素无法设置宽高

5.text-decoration：none去除下划线

猜你喜欢