（1）background-repeat:no-repeat;圖片不平鋪
（2）使用<ul>和<li>便簽，代碼簡介有序、易於編排。
（3）在引入外部css文件時，<link>標簽中的rel是關聯的意思，rel="stylesheet";
（4）display:inline;實現使多個<div>像<span>標簽顯示在一行。
（5）list-style:none;列表樣式：無。 用於在一個聲明中設置列表的所有屬性的簡寫屬性。涵蓋了所有其他列表樣式屬性，僅作用於具有display值為list-item的對象（如li對象）。
（6）text-decoration:none;無值；underline定義文本下的一條線；overline定義文本上的一條線；line-through定義穿過文本下的一條線；blink定義閃爍的文本。
（7）outline:none;為不設置邊框；語法：Object.style.outline = outlineWidth outlineStyle outlineColor 設置邊框寬、樣式、顏色。
（8）target="_self" <a>標簽內設置，本頁面打開；target="_blank"新打開一個頁面
（9）定義偽類鏈接，鼠標經過更改顏色或其他a:hover{color:#abcdef;}
test.css
1 body{ 2 margin:0px; 3 background-image:url(images/body.jpg); 4 background-repeat:no-repeat; 5 width:1003px; 6 } 7 8 nav{ 9 float:left; 10 width:920px; 11 height:40px; 12 background-image:url(images/students.jpg); 13 margin:100px 0 0 0; 14 padding:0; 15 } 16 17 nav ul{ 18 float:left; 19 margin:0px; 20 padding:0 0 0 0; 21 width:920px; 22 list-style:none; 23 } 24 nav ul li{ 25 display:inline; 26 } 27 nav ul li a{ 28 float:left; 29 padding:12px 40px; 30 text-align:center; 31 font-size:14px; 32 background:url(images/user.png) center right no-repeat; 33 color:#fff; 34 font-family:Tahoma; 35 outline:none; 36 } 37 38 nav li a:hover{ 39 color:#2a5f00; 40 }
html內容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>MyHtml.html</title> 5 <link href="CSS/test.css" rel="stylesheet" type="text/css" /> 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 </head> 11 12 <body> 13 <header> 14 <nav> 15 <ul> 16 <li><a href="#" title="首頁" target="_self">首頁</a></li> 17 <li><a href="#" title="首頁" target="_self">男男女女</a></li> 18 <li><a href="#" title="首頁" target="_self">急急急</a></li> 19 <li><a href="#" title="首頁" target="_blank">呸呸呸</a></li> 20 </ul> 21 </nav> 22 </header> 23 </body> 24 </html>