CSS导航栏设置

导航栏设置

		<ul id="nav">
			<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>

id设置为nav，在设置导航栏时按照id选择器进行设置

---

			#nav{
				list-style-type: none;
				margin: 0;  /*外边距*/
				padding: 0;  /*内边距*/
			}

导航栏设置 list-style-type:取消导航标签前的小圆点
margin:外边距设置为0
padding:内边距设置为0

---

			a{
				display: block;
				width: 100px;
				color: brown;
				background-color: #BEBEBE;
				text-decoration: none; /*去掉下划线*/
				text-align: center;
				font-size: 24px;
				padding: 6px;
			}

超链接设置为块状，大小为100px
字体颜色设置为brown，背景色为#BEBEBE
去掉下划线，文字居中，大小为24px，内边距为6px

---

			a:hover{
				color: #BEBEBE;
				background-color: brown;
			}

鼠标移动到超链接上之后样子，字体颜色及背景颜色

---

			li{
				float: left;
			}

将导航栏改为横向