首页 > 设计 > 软件应用 > 正文

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

2019-10-27 18:52:48
字体:
来源:转载
供稿:网友
点评:下面的代码可以帮我们实现双背景图片导航
 
 

复制代码
代码如下:
<!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.cuoxin.com</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> 
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表