【web】模拟京东项目-demo01（广告栏、导航条）

最新推荐文章于 2020-09-21 18:41:22 发布

michael_ouyang

最新推荐文章于 2020-09-21 18:41:22 发布

阅读量1.4k

点赞数

本文链接：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>

运行效果：