主页 / 建站知识 /

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

建站知识 2021-07-03 08:57www.168986.cn长沙网站建设

复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　<html xmlns="http://.w3./1999/xhtml">
　　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
　　<title>狼蚁SEO.jb51.</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-: #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>
上一篇：学会Dreamweaver以后进行网页设计的方法详谈 下一篇：Dreamweaver网页怎么输入文本内容?

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by