水平导航栏2
摘自一个外国网站的水平导航栏
水平导航条实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#header{
float:left;
width:100%;
background:yellow;
background:#DAE0D2 url(images/bg.gif) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul{
/*---------------------------------------------------first★
margin:0;
padding:0;
list-style:none;*/
/*----------------------------------------------------second●*/
margin:0;
padding:10px 10px 0;
/*
.
【问题】:为什么将这行设为padding:10px 10px;效果一
样的,答案就在下一行
*/
float:left;
/*.
我们知道，当元素浮动时，它不再占据文档流的任何空间，
因此，父列表实际上没有内容，它就会收缩，从而隐藏列
表背景。
有两种方法可父列表可包含浮动元素：其一是加人一个进
行清理的元素（但这要加人不必要的元素），其二是对父
元素也进行浮动。所以才有上面的float:left;
*/
list-style:none;
}
#header li{
/*----------------------------------------------------first★
float:left;
margin:0;
padding:0;*/
/*----------------------------------------------------second●
float:left;
margin:0;
padding:0;
background:url(images/norm_right.gif)
no-repeat right top;*/
/*-----------------------------------------------------third◆
float:left;
margin:0;
padding:0 0 0 9px;
background:url(images/right.gif)
no-repeat right top;*/
/*-----------------------------------------------------fourth■ */
float:left;
margin:0;
padding:0 0 0 9px;
background:url(images/left.gif)
no-repeat left top;
}
#header a{
/*------------------------------------------------------first★
display:block; */
/*------------------------------------------------------second●
display:block;
background:url(images/norm_left.gif)
no-repeat left top;
padding:5px 15px */
/*------------------------------------------------------third◆
display:block;
background:url(images/left.gif) no-repeat left top;
padding:5px 15px 4px 6px; */
/*-----------------------------------------------------fourth■
display:block;
background:url(images/right.gif) no-repeat right top;
padding:5px 15px 4px 6px; */
/*-----------------------------------------------------last▲ */
loat:left;
/*.
为了能让Mac IE5能正确显示,在锚中也加入浮动
*/
display:block;
background:url(images/right.gif) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a:hover:{
color:black;
}
#header #current{
/*------------------------------------------------------second●
background-image:url(images/norm_right_on.gif);*/
/*------------------------------------------------------third◆*/
background-image:url(images/left_on.gif);
}
#header #current a{
/*------------------------------------------------------second●
background-image:url(images/norm_left_on.gif);*/
/*------------------------------------------------------third◆*/
background-image:url(images/right_on.gif);
padding-bottom:5px;
}
-->
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
稍作改进:
水平导航条_改进
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#header{
float:left;
width:100%;
background:yellow;
background:#DAE0D2 url(images/bg.gif) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul{
/*---------------------------------------------------first★
margin:0;
padding:0;
list-style:none;*/
/*----------------------------------------------------second●*/
margin:0;
padding:10px 10px 0;
/*.
【问题】:当没有使用浮动时,将这行设为padding:10px 10px;效果一
样的,答案就在下一行
*/
float:left;
/*.
我们知道，当元素浮动时，它不再占据文档流的任何空间，
因此，父列表实际上没有内容，它就会收缩，从而隐藏列
表背景。
有两种方法可父列表可包含浮动元素：其一是加人一个进
行清理的元素（但这要加人不必要的元素），其二是对父
元素也进行浮动。所以才有上面的float:left;
*/
list-style:none;
}
#header li{
margin:0 5px;
padding:0;
float:left;
}
#header a{
margin:0;
padding:0 0 0 9px;
float:left;
display:block;
background:url(images/left.gif) no-repeat left top;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a span{
margin:0;
padding:5px 15px 4px 6px;
float:left;
background:url(images/right.gif) no-repeat right top;
}
#header #current a{
background-image:url(images/left_on.gif);
}
#header #current a span{
background-image:url(images/right_on.gif);
padding-bottom:5px;
}
#header a:hover{
background-image: url(images/left_on.gif);
}
#header a:hover span{
background-image: url(images/right_on.gif);
padding-bottom:5px;
}
-->
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
★上面的实例 在FireFox中可以达到预期效果,但IE中还不行:即当鼠标放置在锚上时,下面的横线没有消隐
水平导航条实例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#header{
float:left;
width:100%;
background:yellow;
background:#DAE0D2 url(images/bg.gif) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul{
/*---------------------------------------------------first★
margin:0;
padding:0;
list-style:none;*/
/*----------------------------------------------------second●*/
margin:0;
padding:10px 10px 0;
/*
.【问题】:为什么将这行设为padding:10px 10px;效果一
样的,答案就在下一行
*/ float:left;
/*
.我们知道，当元素浮动时，它不再占据文档流的任何空间，
因此，父列表实际上没有内容，它就会收缩，从而隐藏列
表背景。
有两种方法可父列表可包含浮动元素：其一是加人一个进
行清理的元素（但这要加人不必要的元素），其二是对父
元素也进行浮动。所以才有上面的float:left;
*/list-style:none;
}
#header li{
/*----------------------------------------------------first★
float:left;
margin:0;
padding:0;*/
/*----------------------------------------------------second●
float:left;
margin:0;
padding:0;
background:url(images/norm_right.gif)
no-repeat right top;*/
/*-----------------------------------------------------third◆
float:left;
margin:0;
padding:0 0 0 9px;
background:url(images/right.gif)
no-repeat right top;*/
/*-----------------------------------------------------fourth■ */
float:left;
margin:0;
padding:0 0 0 9px;
background:url(images/left.gif)
no-repeat left top;
}
#header a{
/*------------------------------------------------------first★
display:block; */
/*------------------------------------------------------second●
display:block;
background:url(images/norm_left.gif)
no-repeat left top;
padding:5px 15px */
/*------------------------------------------------------third◆
display:block;
background:url(images/left.gif) no-repeat left top;
padding:5px 15px 4px 6px; */
/*-----------------------------------------------------fourth■
display:block;
background:url(images/right.gif) no-repeat right top;
padding:5px 15px 4px 6px; */
/*-----------------------------------------------------last▲ */
loat:left;
/*
.为了能让Mac IE5能正确显示,在锚中也加入浮动
*/ display:block;
background:url(images/right.gif) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a:hover:{
color:black;
}
#header #current{
/*------------------------------------------------------second●
background-image:url(images/norm_right_on.gif);*/
/*------------------------------------------------------third◆*/
background-image:url(images/left_on.gif);
}
#header #current a{
/*------------------------------------------------------second●
background-image:url(images/norm_left_on.gif);*/
/*------------------------------------------------------third◆*/
background-image:url(images/right_on.gif);
padding-bottom:5px;
}
-->
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
水平导航条_改进<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#header{
float:left;
width:100%;
background:yellow;
background:#DAE0D2 url(images/bg.gif) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul{
/*---------------------------------------------------first★
margin:0;
padding:0;
list-style:none;*/
/*----------------------------------------------------second●*/
margin:0;
padding:10px 10px 0;
/*.
【问题】:当没有使用浮动时,将这行设为padding:10px 10px;效果一
样的,答案就在下一行
*/
float:left;
/*.
我们知道，当元素浮动时，它不再占据文档流的任何空间，
因此，父列表实际上没有内容，它就会收缩，从而隐藏列
表背景。
有两种方法可父列表可包含浮动元素：其一是加人一个进
行清理的元素（但这要加人不必要的元素），其二是对父
元素也进行浮动。所以才有上面的float:left;
*/
list-style:none;
}
#header li{
margin:0 5px;
padding:0;
float:left;
}
#header a{
margin:0;
padding:0 0 0 9px;
float:left;
display:block;
background:url(images/left.gif) no-repeat left top;
text-decoration:none;
font-weight:bold;
color:#765;
}
#header a span{
margin:0;
padding:5px 15px 4px 6px;
float:left;
background:url(images/right.gif) no-repeat right top;
}
#header #current a{
background-image:url(images/left_on.gif);
}
#header #current a span{
background-image:url(images/right_on.gif);
padding-bottom:5px;
}
#header a:hover{
background-image: url(images/left_on.gif);
}
#header a:hover span{
background-image: url(images/right_on.gif);
padding-bottom:5px;
}
-->
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号