教學影片：Effective Navigation Development
重點語法整理：
置中範例：設定寬度，運用margin使其置中。
!!設置像素寬度，寬度即使縮小視窗也不會改變，
設置百分比寬度，寬度會隨著視窗大小作寬度的比例縮放。
.body-content {
margin: 0 auto;
width: 960px;
}
.body-content {
margin: 0 auto;
width: 70%;
}
雙class命名運用範例：在html的class以空白間隔開，可以設定雙class命名，方便用於css建立顏色規則
!!需用space空白鍵隔開
HTML
<ul class="subnav purple">
CSS/********** TEXT COLORS **********/
.purple{color: #b58afc;}
下拉式選單重點CSS範例
nav ul.main-nav > li{
float: left;
border-left: 1px solid #939393;
border-right: 1px solid #000000;
width: 158px;
height: 57px;
position: relative;
}
nav ul.main-nav > li > a{
padding: 8px 6px;
position: absolute;
top: 0px;
left: 0px;
width: 148px;
height: 41px;
}
nav ul.main-nav li ul.subnav{
position: absolute;
left: -9999px;
top: 57px;
background-color: #575757;
padding: 5px 10px;
width: 185px;
border-top: 1px solid #353535;
}
nav ul.main-nav > li:hover ul.subnav{
/*control the subnav move into stage*/
left: 0;
}
!!!!main-nav在父系設定relative是為了包覆裡面的子元素li>a的absolute讓連結範圍能完整呈現
!!!!在subnav裡面設定abosolute甚至將leftL-9999px;是為了讓下拉式選單隱藏在畫面中，此作法不會讓畫面出現卷軸
然後在nav ul.main-nav > li:hover ul.subnav 這規則中，將下拉式選單叫回畫面中。
事件記錄 (3)