馬米思個人紀錄站

教學影片：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 這規則中，將下拉式選單叫回畫面中。