HTML中的<UL>標籤中li橫向排列
第一步、編寫橫向選單的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" class="last">Google.Com</a></li>
</ul>
第二步、編寫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" class="last">Google.com</a></li> </ul> <style 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; /* 如果是中英文混排的文字,建議用固定寬度 width:150px; height:30px; line-height:30px; text-align:center; */ 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" class="last">Google.com</a></li> </ul>
你可以檢視我們製作的線上演示和下載本文提供的例項包。
上面的CSS樣式,我修改了一下。如下:
<style type="text/css">
#menu {
font-size: 12px;
font-weight: bolder;
}
#menu li{
list-style-image: none;
list-style-type: none;
background-color: #999999;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
float: left;
}
#menu li a{
color: #FFFFFF;
text-decoration: none;
margin: 0px;
padding-top: 8px;
display: block; /* 作為一個塊 */
padding-right: 50px; /* 設定塊的屬性 */
padding-bottom: 8px;
padding-left: 50px;
}
#menu li a:hover{
background-color: #0099CC;
}
</style>