Dreamweaver教程

Dreamweaver中实现双背景图片导航菜单的代码

网络佚名2012-06-07Dreamweaver教程10202

下面的代码可以帮我们实现双背景图片导航

复制代码

代码如下:

<!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> www.jb51.net</title>
　　</head>
　　<style type=text/css>
　　#nav ul {
　　font-size: 11px;
　　margin: 0px auto 100px;
　　padding:0;
　　font-family: arial, verdana, sans-serif;
　　white-space: nowrap;
　　list-style-type: none
　　}
　　#nav li {
　　float: left;
　　margin:0;
　　padding:0;
　　}
　　#nav a {
　　float: left;
　　margin: 0px 2px 0px 0px;
　　padding:0 0 0 2px;
　　color: #fff;
　　background: url(../js/jsneedpic/i200741210911.gif) #040 no-repeat left bottom;
　　letter-spacing: 1px;
　　text-decoration: none
　　}
　　#nav a strong {
　　display: block;
　　background: url(../js/jsneedpic/j200741210920.gif) no-repeat right bottom;
　　float: left;
　　padding:5px 16px 5px 12px;/*---右边底部图片位置决定重要因素--*/
　　}
　　#nav a:hover {
　　cursor: pointer;
　　background-color: #080
　　}
　　#nav #current a {
　　background-color: #080
　　}
　　#nav {
　　border-top: #040 8px solid;
　　background: #fff;
　　padding:1px 0 0 0;
　　}
　　</style>
　　<body>
　　<div id="nav">
　　<ul>
　　<li><a href="#"><strong>home</strong></a> _fcksavedurl=""#"><strong>home</strong></a>" </li>
　　<li><a href="#"><strong>privacypolicy</strong></a> </li>
　　<li id="current"><a href="#"><strong>contact us</strong></a> </li>
　　<li><a href="#"><strong>products</strong></a> </li>
　　<li><a href="#"><strong>site map</strong></a> </li>
　　</ul>
　　</div>
　　</body>
　　</html>

很赞哦！()