css+ul+li製作導航

最後更新：2018-12-04 來源：互聯網

上載者：User

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

<!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=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
<!--

.my_nav{
height:30px;
width:700px;
background-image:url(nav_bg.jpg);
background-repeat:repeat-x;
margin:0px 0px;
}
.my_nav ul{
list-style:none;
margin:0px 0px;
}
.my_nav ul li{
float:left;
margin:0px 0px;
padding:5px 7px;
background-image:url(nav_li.jpg);
background-repeat:no-repeat;
font-size:16px;
text-align:center;
background-position: right center;
}
.my_nav ul a{
color:#FFFFFF;
text-decoration:none;
}
.my_nav ul a:hover{
color:#FFCC00
}
-->
</style>
</head>

<body>
<div class="my_nav">
    <ul>
    <li class="on" ><a href="/shows/index/en">Home</a></li>
    <li  ><a href="/shows/newsletter/en">Newsletter</a></li>
    <li  ><a href="/shows/talent/en">Talent</a></li>
    <li  ><a href="/shows/celeb/en">Celebrity</a></li>
    <li  ><a href="/shows/com/en">Company</a></li>
    <li  ><a href="/shows/event/en">Event</a></li>
<li  ><a href="/shows/job/en">Job</a></li>
<li  ><a href="/shows/contact/en">Contact</a></li>
<li  ><a href="/shows/service/en">Service</a></li>
  </ul>
</div>
</body>
</html>
**********************************************************************************************

第一步、編寫橫向菜單的HTML代碼架構

請將以下代碼添加到HTML文檔的導覽列地區中。

<ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.Com</a></li><li><a href="http://www.google.com" 第二步、編寫CSS代碼1、設定公用樣式請將以下CSS代碼添加到HTML文檔的<head>...</head>標籤範圍中。

<style type="text/css">#menu { font:12px verdana, arial, sans-serif; }#menu, #menu li {list-style:none; padding:0; margin:0; }</style>

大家都知道，<ul>中的各條目<li>預設都是縱向排列的，我們需要定義CSS來讓其橫向排列起來。Tips：因為我們現在將導覽列拉出來獨立講解，所以需要設定一些公用樣式，如果您在 body 或其他地方已經重設了預設效果，以上代碼可以去掉2、讓文字橫排大家都知道，<ul>標籤下的項目<li>預設是縱向排列的，我們需要定義額外的CSS屬性讓其橫向排列。

<style type="text/css">#menu li { float:left; }</style>

3、設定連結樣式：

<style type="text/css">#menu li a {display:block; padding:8px 50px; background:#3A4953; color:#fff; text-decoration:none; border-right:1px solid #000; }</style>

我們用內邊距（即填充padding）的方式，讓每個菜單變得寬一些，如果你的菜單是中英文混排的，建議設定單個菜單的高寬，這樣可以避免中英文字元行高不一致導致的高度誤差。設定固定高度的方式：

<style type="text/css">#menu li a {display:block; width:150px; height:30px; line-height:30px; text-align:center; background:#3A4953; color:#fff; text-decoration:none; border-right:1px solid #000; }</style>

4、連結懸停效果：通過以上幾步的綜合作用，一個橫嚮導航欄的初步架構就出現了。此步主要是定義連結的懸停效果，讓導覽列更美觀。當然，如果要讓導覽列更炫麗，你可以在CSS懸停屬性上定義背景圖片。

<style type="text/css">#menu li a:hover {background:#146C9C; color:#fff; }</style>

這裡的代碼一個缺陷，最右邊會多出來一個邊框，由於 :first-child 偽類不被IE系列瀏覽器所支援，我們只能單獨寫一個樣式，將最後一個邊框去掉，同時要給 HTML 程式碼增加一個額外選擇符。

<ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com" type="text/css">#menu li a.last {border-right:0; }</style>

好了，到這裡一個簡單的橫嚮導航菜單就製作完成了，是不是很簡單？ 下面給出完整代碼：

<style type="text/css">#menu { font:12px verdana, arial, sans-serif; }#menu, #menu li {list-style:none;padding:0;margin:0;}#menu li { float:left; }#menu li a {display:block;padding:8px 50px;background:#3A4953;color:#fff;text-decoration:none;border-right:1px solid #000;}#menu li a:hover {background:#146C9C;color:#fff;text-decoration:none;border-right:1px solid #000;}#menu li a.last {border-right:0; }</style><ul id="menu"><li><a href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com">Yahoo.com</a></li><li><a href="http://www.google.com">Google</a></li></ul>

轉自:

http://blog.sina.com.cn/s/blog_611ab6c50100g5fd.html

本文章原先以中文撰寫並發佈於 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