我們先說一下偽類選擇器的寫法：
寫法：選擇器名稱：偽類狀態{}4
常見偽類狀態：
未訪問：link
鼠標移上去：hover
激活選定：active
已訪問：visited
獲得焦點的時候觸發：focus
現在我們要用的是hover事件，也就是鼠標指上發生的事情。
例：
a:hover{
color:red
}<!--指上去a標簽里的文字變紅-->
還有要用到的是浮動屬性，
例：
<div>
float:left;
</div> <!--使此div塊向左浮動-->
可以使一個塊級元素向左/向右浮動。原本塊級元素占一整行，浮動之后可以使空余位置釋放出來
以我學校的官網首頁導航欄為例，來看一看怎樣做一個導航欄：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>煙台大學</title> <link rel="icon" href="img/ytu.png"/> <style type="text/css"> *{ padding: 0px; margin: 0px; font-family: "微軟雅黑"; } .div { width: 1013px; background-color: ; height:107px ; margin: 0 auto; } .div1{ float: left; width: 317px; height: 107px; background-image: url("img/logo.jpg"); } .div2{ float: right; width: 696px; height: 107px; background-color:#032F54; } .div3{ height: 72px; width: 701px; } li{ list-style: none; background-color: #8C1616; float: left; width: 87px; height: 35px; font-size: 16px; line-height: 35px; color: white; text-align: center; }
.li1{ background-color:#032F54; visibility: hidden; }
li:hover{ background-color: #032F54; cursor: pointer; } li:hover .li1{ visibility: visible; } .c{ background-color:#032F54; font-size: 13px; text-align: center; } .c:hover{ background-color: #8C1616; } a{ text-decoration: none; color: white; } </style> </head> <body> <div class="div"> <div class="div1"> </div> <div class="div2"> <div class="div3"> </div> <ul style="color: #8C1616;"> <li><a href="biaoge.html">煙大新聞</a></li> <li> <a href="biaoge.html">學校概況</a> <ul class="li1"> <li class="c">學校簡介</li> <li class="c">現任領導</li> <li class="c">校園風景</li> </ul> </li> <li>學院設置</li> <li> 人才培養 <ul class="li1"> <li class="c">本科生教育</li> <li class="c">留學生教育</li> <li class="c">研究生教育</li> </ul> </li> <li> 科學研究 <ul class="li1"> <li class="c">服務地方網</li> <li class="c">煙大學報</li> <li class="c">研究生處</li> </ul> </li> <li>學生工作</li> <li>招生就業</li> <li>公共服務</li> </ul> </div> </div> </body> </html>
效果圖如下：
OK!做好嘍