CSS导航栏合理布局中当今网页页面的实际完成d

2021-03-09 23:55 jianzhan

拷贝编码
编码以下:

<!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>当今网页页面--例如说如今的网页页面是主页,那末在导航栏栏上主页的颜色等和别的栏目有一定的不一样,用以给访问者1个显著的标示。


下面来讲下实际的做法,菜单的基础完成和1般的CSS菜单没多大差别,侧重说下怎样 完成当今页。


设菜单有5个栏目:home、about、products、services、contact,各自给每一个栏目1个ID,m1-m5</p>
<p>随后各自给每一个网页页面的bady标识1个单独的ID,当今是哪一个网页页面,那个网页页面的BODY的ID便是哪一个,比如给主页的ID是home,其余的类推。


这样做法的益处是每一个网页页面的菜单全是1样的,便捷改动,动态性页包括也非常容易。</p></p>
</body>
</html>