導航條（NAV）設計（1）
文字：
首頁 服務公告 分行特色 關於分行
在“分行特色”下邊還有子選單：
學生時代 職場生涯 品質家庭 養老保障
導航條設計一般是採用列表做容器，但列表是塊元素，於是用浮動(fliat)方式。很多時候導航條中的選單還有子選單，子選單的顯示用滑鼠移動到主選單時彈出。這時用列表巢狀的思路如下面：
- 首頁
- 服務公告
- 分行特色
- 學生時代
- 職場生涯
- 品質家庭
- 養老保障
- 關於分行
開啟DW軟體，配置站點：
站點名稱：第七週練習（7week)；站點根目錄（本地站點）：E盤或自己的U盤，在本地站點下面建立圖片資料夾img ,樣式表文件夾CSS，指令碼資料夾JS。馬上建立一個網頁檔案並以約定名稱儲存（月10日14班J2/j3姓名**）
頁面內容建立
在頁面中建立一個DIV容器，在容器中建立一個巢狀列表，並建立空的超連結，如下圖：
頁面效果：
程式碼：
為了格式整齊：在首頁兩個字之間插入空格符，為了提示分行特色有子選單，插入一個特殊符號。（通過插入選單-HTML-特殊字元 新增）
開始樣式設定
先生成CSS檔案或者之後再生成。
(1)萬用字元選擇器*，內外邊距為0（給頁面所有物件的內外邊距初始化為0畫素，消除它們的內外邊距預設值 ）
(2)給最外層容器設定寬度1000PX，背景色為#CCC，並自動居中。
(3)給主選單設定樣式：
寬120PX，高40PX，文字（水平及垂直居中），左浮動（float left)，列表樣式為無）
(4)把子選單隱藏：#top-nav ul li ul { display: none;}
(5)把超連結的預設格式取消：下劃線無，字的著色為黑。
有個細節：浮動塌陷。
(6)滑鼠移動到所有超連結時動態效果：背景藍色，字型淺灰色，20PX。
這裡使用了動態偽類選擇器hover：
#top-nav ul li a:hover {
color: #ccc;
background-color: #036;
font-size: 20px;
}
動態偽類包含兩種：
（1）在連結中常看到的錨點偽類
（2）為使用者行為偽類
（3）錨點偽類設定遵循【愛恨原則LoVe/HAte】，即link->visited->hover->active
(7)當滑鼠移動到第三個選單“分行特色”時子選單的自動開啟（仍然使用動態偽類選擇器：
#top-nav ul li:hover ul {
display: block;
}
(8)給列表項加一個右邊框
(9)把最後那個右邊框去掉，使用結構偽類選擇器
#top-nav ul li:first-child {
border-left-style: none;
}
結構偽類選擇器，是針對HTML層次“結構”的偽類選擇器。例如我們想要某一個父元素下面的第n個子元素
(10)動態效果：
#top-nav ul li a:hover {
color: #ccc;
background-color: #036;
font-size: 20px;
transition:all 1s ease-in ;
}
HTML程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第七週導航條</title>
<style type="text/css">
</style>
<link href="1012.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:#0C6">
<div id="top-nav">
<ul>
<li> <a href="#">首頁</a></li>
<li ><a href="#">服務公告</a> </li>
<li ><a href="#" id="b-nav">分行特色»</a>
<ul >
<li ><a href="#">學生時代</a></li>
<li ><a href="#">職場生涯</a></li>
<li ><a href="#">品質家庭</a></li>
<li ><a href="#">養老保障</a></li>
</ul>
</li>
<li ><a href="#">關於分行 </a> </li>
</ul>
</div>
</body>
</html>
CSS程式碼：
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
#top-nav {
margin: auto;
width: 1000px;
background-color: #999;
height: 40px;
}
#top-nav ul li {
line-height: 40px;
text-align: center;
float: left;
height: 40px;
width: 120px;
list-style-type: none;
border-left-width: 2px;
border-left-style: dashed;
border-left-color: #0CC;
}
#top-nav ul li a {
color: blue;
text-decoration: none;
}
#top-nav ul li ul {
display: none;
}
#top-nav ul li a:hover {
color: #ccc;
background-color: #036;
font-size: 20px;
transition:all 0.5s ease-in ;
}
#top-nav ul li:hover ul {
display: block;
}
#top-nav ul li:first-child {
border-left-style: none;
}
#top-nav ul li ul li {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/* CSS Document */
課後作業