使用CSS做出一個嵌套導航.

2024-07-11 08:27:04

字體：大中小

來源：轉載

供稿：網友

在以前做網站導航時,往往依賴于圖像,表格,和javascript.而這些都嚴重的影響了網站的可訪問性和可使用性.如果在一個缺乏支持javascript的用戶,那么你的網站導航將無算正常的顯示.比如說一個用戶把瀏覽器的javascript關閉掉,或者在一個只能讀純文字的手持設備--它們將無算從你的網站讀到所有的數據.如果你的委拖人不注重這方面,那么告訴他繁雜的菜單會阻止搜索引擎的排名.(木木:像禪意花園就是一個不錯的CSS網站.)

使用CSS可以創建一個更有吸引力的導航,因為CSS沒有和文本混合在一起,所以確保了導航的可訪問性和使那些手持設備也可以讀出.在這個教程里我們將看到一個基于CSS的導航.基于CSS的網站會加快網頁加載的時間,這樣基于圖像的導航將漸漸的被淘汰掉.

導航的結構
先看效果圖:

導航的本質是讓瀏覽者更好的訪問你的網站,所以要建立有意義的語義.使CSS和語義相符合,為了以后方便維護.注意要避免現有瀏覽器的不兼容.

解決方案

下面是導航的HTML和CSS的代碼,效果如圖.

這是創建導航的HTML代碼

復制代碼

代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav1.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>

使用CSS給上面代碼添加效果

復制代碼

代碼如下:
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}

上一篇：用CSS的float和clear屬性進行三欄網頁布局

下一篇：css 鼠標經過文字變色

發表評論

共有條評論