模拟京东项目-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>
运行效果: