无序列表UL制作菜单的样例
来源:http://www.7dit.com 作者:7dit 发布日期:2008-09-21 02:22:12 点击量:500
<!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>navi demo</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.top{
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px dotted #CCCCCC;
height: 150px;
}
ul.nav li{
float: left;
margin-left: 0px;
list-style-type: none;
}
ul.nav li a{
background-image: url(nav_main_bg.jpg);
width: 70px;
height:25px;
display: block;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background-position: left 0px;
background-repeat: no-repeat;
padding-top: 10px;
}
ul.nav{
margin-left: 150px;
margin-top: 50px;
}
ul.nav li a:hover{
background-image: url(nav_main_bg.jpg);
width: 70px;
height:25px;
display: block;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background-position: left -35px;
background-repeat: no-repeat;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="top">
<ul class="nav">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link4</a></li>
<li><a href="#">link5</a></li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>navi demo</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.top{
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px dotted #CCCCCC;
height: 150px;
}
ul.nav li{
float: left;
margin-left: 0px;
list-style-type: none;
}
ul.nav li a{
background-image: url(nav_main_bg.jpg);
width: 70px;
height:25px;
display: block;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background-position: left 0px;
background-repeat: no-repeat;
padding-top: 10px;
}
ul.nav{
margin-left: 150px;
margin-top: 50px;
}
ul.nav li a:hover{
background-image: url(nav_main_bg.jpg);
width: 70px;
height:25px;
display: block;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background-position: left -35px;
background-repeat: no-repeat;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="top">
<ul class="nav">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link4</a></li>
<li><a href="#">link5</a></li>
</ul>
</div>
</body>
</html>
相关图片

Copyright © 2005 奇点中文网--7dit.com
闽ICP备05001292号
闽ICP备05001292号
