CSS技巧使用標(biāo)簽來創(chuàng)建導(dǎo)航菜單(滑動門教程)

2024-07-11 08:45:54

字體：大中小

供稿：網(wǎng)友

效果圖:

HTML和CSS代碼如下:

===========================
<!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="tabs.css" />
</head>
<body id="recipes">
<div id="header">
<ul>
<li class="recipes"><a href="#">Recipes</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="buy"><a href="#">Buy Online</a></li>
</ul>
</div>
<div id="content">
<h1>Recipes</h1>
<p>Lorem ipsum dolor sit amet, … </p>
</div>
</body>
</html>

body {
font: .8em/1.8em verdana, arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 0 10% 0 10%;
}

#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}

#header ul {
margin: 0;
padding: 2em 0 0 0;
list-style: none;
}

#header li {
float: left;
background-image: url("images/tab_left.gif");
background-repeat: no-repeat;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}

#header a {
float: left;
display: block;
background-image: url("images/tab_right.gif");
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #333366;
}

#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
background-image: url("images/tab_active_left.gif");
}

#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url("images/tab_active_right.gif");
background-color: transparent;
color:#FFFFFF;
}

===========================

解決方案:

在這里使用的是"滑動門技術(shù)",它是標(biāo)簽創(chuàng)建導(dǎo)航的一種技術(shù).首先編寫導(dǎo)航菜單的HTML結(jié)構(gòu).(在前面幾節(jié)已經(jīng)說過如何去創(chuàng)建HTML,如有不懂的

可以去看.)然后給每個標(biāo)簽分配一個類來描述鏈接.最后準(zhǔn)備背景圖像.

在PS中創(chuàng)建四個像這樣的圖片,兩個來表現(xiàn)鏈接的狀態(tài),別外兩個來表現(xiàn)鼠標(biāo)滑動過的狀態(tài).正如你所看到的,圖像的大小比文本要大的多,這是現(xiàn)

實(shí)隨著文本變化而變化(即文本變大,那么背景圖像還是可以看清楚的.)

這是導(dǎo)航的HTML代碼:
=========================
<div id="header">
<ul>
<li class="recipes"><a href="#">Recipes</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="buy"><a href="#">Buy Online</a></li>
</ul>
</div>

=========================

第一步:我們先來設(shè)置容器的樣式.給導(dǎo)航定義一個下邊框.
=========================
#header {
float: left;
width: 100%;
border-bottom: 1px solid #8DA5FF;
margin-bottom: 2em;
}

=========================

再給<ul>定義樣式.清除默認(rèn)的小圓點(diǎn),并設(shè)置填充.

=========================
#header ul {
margin: 0;
padding: 2em 0 0 0;
list-style: none;
}

=========================
效果如下:

大家有沒有發(fā)覺,我上面已給容器定義了浮動,那么為什么顯示不是橫向的.(PS:如何橫向?qū)Ш?

現(xiàn)在來給<li>定義樣式了.在這里利用浮動使導(dǎo)航橫向,并使<li>為塊級元素.然后加入"滑動門"的左邊圖像.

==========================
#header li {
float: left;
background-image: url("images/tab_left.gif");
background-repeat: no-repeat;
margin: 0 1px 0 0;
padding: 0 0 0 8px;
}

==========================

把右邊的圖像放到<a>標(biāo)簽里,設(shè)置如下:

=======================
#header a {
float: left;
display: block;
background-image: url("images/tab_right.gif");
background-repeat: no-repeat;
background-position: right top;
padding: 0.2em 10px 0.2em 0;
text-decoration: none;
font-weight: bold;
color: #333366;
}

=========================

效果如圖所示

做到這里只是完成了半部分,細(xì)心的童學(xué)們一定會注意到我們在上面添加的那樣"類"還沒有使用.那么接下來看下如果運(yùn)用所添加的"類"來使圖

像變換.

首先我們來給<body>添加一個ID.

====================
<body id="recipes">

====================

CSS代碼如下:
=====================
#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
background-image: url("images/tab_active_left.gif");
}

#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
background-image: url("images/tab_active_right.gif");
background-color: transparent;
color: #FFFFFF;
}

======================

這時候可能有人會問在<body>中添加一個ID有什么作用.呵呵....這位同學(xué)很細(xì)心喲.在<body>對象中添加一個ID是非常有用的,比如說,你給網(wǎng)

站劃分幾個顏色,來告訴用戶他們正在瀏覽的是哪一部分.