CSS導航布局中當前頁面的具體實現demo示例

2024-07-11 08:28:41

字體：大中小

來源：轉載

供稿：網友

復制代碼

代碼如下:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代碼,菜單導航,JS廣告代碼,JS特效代碼" />
<meta name="description" content="此代碼內容為CSS導航布局中當前頁面的做法，屬于站長常用代碼，更多菜單導航代碼請訪問錯新站長站JS代碼頻道。" />
<title>CSS導航布局中當前頁面的做法</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
*{
margin: 0;
padding: 0;
list-style: none;
}
#nav{
padding: 10px 10px 0;
font-size: 11px;
font-weight: bold;
}
#nav li{
float: left;
margin-right: 1px;
}
#nav li a{
padding: 4px 10px 2px 14px;
text-decoration: none;
background: #DDD url(images/navbg.gif) no-repeat;
color: #666;
display: block;
float: left;
}
#nav li a:hover{
color: #CCC;
background-color: #FFDEAD;
}
#navbar{
background:#DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}
#home #nav li#m1 a,
#about #nav li#m2 a,
#products #nav li#m3 a,
#services #nav li#m4 a,
#contact #nav li#m5 a
{
color: #FFF;
background: #DC4E1B url(images/navbg.gif) no-repeat;
}
//當前位置的CSS樣式
p{
margin: 10px;
}
</style>
</head>
<body id="About">
<ul id="nav">
<li id="m1"><a href="#">Home</a></li>
<li id="m2"><a href="#">About</a></li>
<li id="m3"><a href="#">Products</a></li>
<li id="m4"><a href="#">Services</a></li>
<li id="m5"><a href="#">Contact</a></li>
</ul>
<div id="navbar"></div>
<p>當前位置：About</p>
<p><p>當前頁面--比如說現在的頁面是首頁，那么在導航欄上首頁的色彩等和其他欄目有所不同，用以給瀏覽者一個明顯的指示。

下面來說下具體的做法，菜單的基本實現和一般的CSS菜單沒多大區別，著重說下如何實現當前頁。

設菜單有5個欄目：home、about、products、services、contact，分別給每個欄目一個ID，m1-m5</p>
<p>然后分別給每個頁面的bady標簽一個獨立的ID，當前是哪個頁面，那個頁面的BODY的ID就是哪個，例如給首頁的ID是home，其余的類推。

這樣做法的好處是每個頁面的菜單都是一樣的，方便修改，動態頁包含也容易。</p></p>
</body>
</html>

上一篇：常用的新聞列表代碼(ul/li布局方式)

下一篇：IE6下圖片下方有空間距的多種解決方法

發表評論

共有條評論