[【姜】]

【CSS 語法教學】CSS 條例式按鈕設計

原始 HTML 網頁外觀~如下圖↓

套用 CSS 語法之後的 HTML 網頁外觀~如下圖↓

範例預覽 http://www.flycan.com/flycancss/LImenu.html

範例下載 http://www.flycan.com/flycancss/LImenu.zip

[【姜】]

CSS 語法教學

.MENU{　　/*在條例項目之外用一個<DIV>區塊包起來*/

　　width: 900px;　　/*設定<DIV>區塊寬度為900px*/

　　height: 40px;　　/*設定<DIV>區塊高度為４0px*/

　　background-image: url(menu_bg.gif);　　/*設定長條狀背景圖*/

　　margin-right: auto;　　/*置中設定的語法*/

　　margin-left: auto;　　/*置中設定的語法*/

}

ul{

　　list-style-type: none;　　/*將條例項目左邊的黑點取消*/

　　margin: 0;　　/*將條例項目的外邊界設定為０；IE和FF就會一致*/

　　padding-left: 120px;　　/*將條例項目的左邊距設定為 120px*/

}

li{

　　float: left;　　/*讓條例項目呈現水平排列*/

　　font-family: Arial, Helvetica, sans-serif;　　/*設定文字的字型*/

　　font-size: 12px;　　/*設定文字的大小*/

　　font-weight: bold;　　/*設定文字為粗體*/

　　line-height: 40px;　　/*設定文字的行高*/

}

li a{

　　display: block;　　/*將超連結設定為區塊模式*/

　　width: 120px;　　/*設定超連結區塊寬度*/

　　height: 40px;　　/*設定超連結區塊高度*/

　　background-image: url(menu_up.gif);　　/*設定超連結區塊的背景圖片*/

　　text-decoration: none;　　/*將超連結的底線去除*/

　　color: #000000;　　/*設定超連結文字的顏色*/

　　text-align: center;　　/*設定超連結文字置中*/

}

li a:hover{

　　background-image: url(menu_ov.gif);　　/*設定滑鼠摸到超連結時會改變背景圖片*/

　　color: #006699;　　/*設定滑鼠摸到超連結時文字的顏色也改變*/

}

[kuang]

請問滑鼠移過去之後會出現第二層選項，用CSS要怎麼做呢？

[【姜】]

[yeasonth]

老師謝謝您的教學與分享讓我們學到更多