*通用选择器来去除HTML中所有标签的默认内填充与外边距它就不会影响到我们的排版布局了;默认在CSS代码的第一步：都是清除HTML标签的默认的内填充与外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* body{
background: url(./images/bg.jpg) no-repeat;
} */
.nav{
width: 720px;
margin: 0 auto;
}
.nav ul{
list-style: none;
}
.nav ul li{
float: left;/*把每一个li标签进行向左浮动1i标签它本来是块状元素将其浮动就可以让每一个1i排列成一行*/
width: 120px;
text-align: center;
background-image: url(images/nav_bg.png);
height: 40px;
line-height: 40px;
}
a{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">网站栏目1</a>
</li>
<li>
<a href="#">网站栏目2</a>
</li>
<li>
<a href="#">网站栏目3</a>
</li>
<li>
<a href="#">网站栏目4</a>
</li>
<li>
<a href="#">网站栏目5</a>
</li>
<li>
<a href="#">网站栏目6</a>
</li>
</ul>
</div>
</body>
</html>
转载请注明：大灰牛博客 » 浮动案例之网站导航栏