用CSS打造一個超酷的具有立體感效果的導航

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

css|導航|立體我們詳細的解釋與說明CSS代碼，看它是如何控制這個UL LI打造CSS橫向菜單的：

* {
    font-size:12px;
    text-align:center;
}
#nav {
    width:520px;
    border-bottom:1px solid #06f;
    margin:20px auto 0 auto;
}
#nav li {
    display: inline;
    list-style-type: none;
}
#nav li a:link,#nav li a:visited {
    float:left;
    margin-right:5px;
    padding:5px 10px 5px 8px;
    text-decoration: none;
    color:#000;
    background:#ffe67d;
    border-left: 5px solid #fc0;
}
#nav li a:hover {
    color:#060;
    border-left: 5px solid #f60;
}

　　首先我們進行了整體布局聲明，聲明了文字大小及置中的對齊。需要說明的是，在ff中，我們設定margin:0 auto。即可實現容器的置中了，但在IE中，這還不夠，還需要在父容器中聲明text-align:center。這一點我們要記得，不然容易出錯。

　　聲明UL無序列表的寬度為520ox，下邊框一象素的實現，顏色為#06f。我們設定了nav這個UL，距離頂部為20px、距離底部為零，左右的距離為auto。這就實現了nav在水平方向內是置中的，垂直方面上距離瀏覽器視窗20px。

　　聲明LI清單項目為內聯（行內）顯示，列表預設標記為無。

　　我們重點需要理解#nav li a:link,#nav li a:visited的定義，設定連結的樣式。

　　向左浮動，並且右邊距為5px。這是設定連結元素從左向右排行，並且元素之間的右部間隔5px。

　　設定填充，頂5px、右10px、下5px、左8px。這一設定可以使我們的連結文字處於合適的位置。

　　取消連結文字的底線，並設定連結文字的顏色為#000。連結元素的背景色為#ffe67d。

　　左邊框五象素的實線，顏色為#fc0。這一句話形成了我們的小豎條。

　　我們通過下面#nav li a:hover形成滑鼠啟用的樣式。

　　連結文字的顏色變為#060。左邊框五象素的實線，顏色為#f60。

　　這樣我們會動的小豎條菜單就製作完成了。看最終的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.webjx.com</title><style type="text/css">* {font-size:12px;text-align:center;}#nav {width:520px;border-bottom:1px solid #06f;margin:20px auto 0 auto;}#nav li {display: inline;list-style-type: none;}#nav li a:link,#nav li a:visited {float:left;margin-right:5px;padding:5px 10px 5px 8px;text-decoration: none;color:#000;background:#ffe67d;border-left: 5px solid #fc0;}#nav li a:hover {color:#060;border-left: 5px solid #f60;}</style></head><body><ul id="nav"> <li><a href="http://www.webjx.com/">網站建設教程</a></li> <li><a href="http://www.webjx.com/">網頁製作執行個體</a></li> <li><a href="http://www.webjx.com/">動畫製作教程</a></li> <li><a href="http://www.webjx.com/">網頁特效執行個體</a></li> <li><a href="http://www.webjx.com/">網頁編程技術</a></li></ul></body></html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More