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;
			}

將導航欄改爲橫向