你看看这个行不？
模拟京东项目-demo01（广告栏、导航条）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>京东商城·多快好省</title> <style type="text/css"> ul, li, h1, h2, h3, h4, h5, h6, p, ol, p, body { margin: 0; padding:0; } /* 广告栏 */ .add { width:990px; height:70px; margin:10px auto; /* 上方留10px，并居中 */ } /* 导航条 */ .nav { width:990px; height:40px; /* 设置一个宽高给被引用的div */ background-image: url("img/nav.png"); /* 引用背景图片，自动平铺 */ margin:0 auto; } .nav ul li{ list-style: none; float: left; /* 设置li浮动 */ border:0px solid black; width:85px; height:40px; /* 设置li的宽高 */ text-align: center; line-height: 40px; /* 字体居中 */ color: white; font-family: 微软雅黑; font-size: 15px; /* 字体大小 */ font-weight: bolder; /* 字体磅值（粗细） */ } .nav ul li a{ text-decoration: none; /* 下横线取消 */ display:block; /* 鼠标变小手 */ /* 下面部分同<li> */ width:85px; height:40px; text-align: center; line-height: 40px; color: white; font-family: 微软雅黑; font-size: 15px; font-weight: bolder; } /* 当鼠标悬停到a链接上时 更新css样式 */ .nav ul li a:hover{ background-color: rgb(164, 0, 0); } #li1 { width:210px; text-align: left; } #li8 { float: right; width:141px; } </style></head><body> <!-- 广告栏 --> <div class="add"> <img src="img/add.gif"/> </div> <!-- 导航条 --> <div class="nav"> <ul> <li id="li1"> 全部商品分类</li> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">服装城</a></li> <li><a href="javascript:;">京东超市</a></li> <li><a href="javascript:;">团购</a></li> <li><a href="javascript:;">夺宝岛</a></li> <li><a href="javascript:;">闪购</a></li> <li id="li8"> <img alt="" src="img/zfyl.jpg" /> </li> </ul> </div></body></html>
参考http://blog.csdn.net/michael_ouyang。 https://blog.csdn.net/michael_ouyang/article/details/53065237追问
模拟京东项目-demo01（广告栏、导航条）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>京东商城·多快好省</title> <style type="text/css"> ul, li, h1, h2, h3, h4, h5, h6, p, ol, p, body { margin: 0; padding:0; } /* 广告栏 */ .add { width:990px; height:70px; margin:10px auto; /* 上方留10px，并居中 */ } /* 导航条 */ .nav { width:990px; height:40px; /* 设置一个宽高给被引用的div */ background-image: url("img/nav.png"); /* 引用背景图片，自动平铺 */ margin:0 auto; } .nav ul li{ list-style: none; float: left; /* 设置li浮动 */ border:0px solid black; width:85px; height:40px; /* 设置li的宽高 */ text-align: center; line-height: 40px; /* 字体居中 */ color: white; font-family: 微软雅黑; font-size: 15px; /* 字体大小 */ font-weight: bolder; /* 字体磅值（粗细） */ } .nav ul li a{ text-decoration: none; /* 下横线取消 */ display:block; /* 鼠标变小手 */ /* 下面部分同<li> */ width:85px; height:40px; text-align: center; line-height: 40px; color: white; font-family: 微软雅黑; font-size: 15px; font-weight: bolder; } /* 当鼠标悬停到a链接上时 更新css样式 */ .nav ul li a:hover{ background-color: rgb(164, 0, 0); } #li1 { width:210px; text-align: left; } #li8 { float: right; width:141px; } </style></head><body> <!-- 广告栏 --> <div class="add"> <img src="img/add.gif"/> </div> <!-- 导航条 --> <div class="nav"> <ul> <li id="li1"> 全部商品分类</li> <li><a href="javascript:;">首页</a></li> <li><a href="javascript:;">服装城</a></li> <li><a href="javascript:;">京东超市</a></li> <li><a href="javascript:;">团购</a></li> <li><a href="javascript:;">夺宝岛</a></li> <li><a href="javascript:;">闪购</a></li> <li id="li8"> <img alt="" src="img/zfyl.jpg" /> </li> </ul> </div></body></html>
参考http://blog.csdn.net/michael_ouyang。 https://blog.csdn.net/michael_ouyang/article/details/53065237追问
第二天没有回答的，我直接自己写了……送你了
温馨提示：答案为网友推荐，仅供参考
相似回答