创建类似淘宝的静态网页（一）创建导航栏+广告图片部分

一开始，先献上最后的结果图，如下：

创建类似淘宝的静态网页需要用到Html+Css两门前端语言。直接建立工程文件夹，文件夹里面包含页面文件taobao.html和样式文件taobao.css，以及需要用到的图片文件夹img，如下：

用到的开发工具是sublime
大致思路很清晰：设计网页一般是从上往下设计，这里讨论如何创建网页的第一部分，即该网页的导航栏+广告图片部分。第一部分又可以分为三个部分，就是导航栏的左右部分和广告部分。整个网页放置在class="wrapper"的div容器中，关于"wrapper"的html代码如下：<div class="wrapper"></div> 网页的子部分就放置在这个容器中。关于"wrapper"以及整个页面的css代码如下：

*{
	margin:0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}
html,body{
	width: 100%;
	height: 100%;
	background-color:#f4f4f4; 
	color:#3c3c3c;
	/*横向滚动条消失*/
	overflow-x: hidden;
}
.wrapper{
	width: 100%;
	height: 100%;
}

下面就是第一部分的html代码：

<div class="top-nav-wrap">
		<div class="top-nav">
			<ul class="top-nav-l">
				<li class="top-nav-menu china">
				<span class="c-span">中国大陆</span>
				<span class="bg-pic xsj-pic"></span>
				</li>
				<li class="top-nav-menu login-sign">
					<a href="#" class="login">亲，请登录</a>
					<a href="#" class="sign">免费注册</a>
				</li>
				<li class="top-nav-menu">
					<a href="#">手机逛淘宝	</a>
				</li>
			</ul>
			<ul class="top-nav-r">
				<li class="top-nav-menu my-taobao">
					<a href="#">我的淘宝</a>
					<span class="bg-pic xsj-pic"></span>
				</li>
				<li class="top-nav-menu shop-car">
					<a href="#">
					<span class="bg-pic shopCar-pic"></span>
					<span>购物车</span>
					</a>
					<span class="bg-pic xsj-pic"></span>
				</li>
				<li class="top-nav-menu like">
					<a href="#">
					<span class="bg-pic like-pic"></span>
					<span>收藏夹</span>
					</a>
					<span class="bg-pic xsj-pic"></span>
				</li>
				<li class="top-nav-menu goods">
					<a href="#">商品分类</a>
				</li>
				<li class="top-nav-menu cut-off">
					<span>|</span>
				</li>
				<li class="top-nav-menu seller">
					<a href="#">
						<span class="c-span">卖家中心</span>
						<span class="bg-pic xsj-pic"></span>
					</a>
				</li>
				<li class="top-nav-menu cutsomer">
					<a href="#">
						<span class="c-span">联系客服</span>
						<span class="bg-pic xsj-pic"></span>
					</a>
				</li>
				<li class="top-nav-menu web-nav">
					<a href="#">
					<span class="bg-pic web-nav-pic"></span>
					<span>网站导航</span>
					</a>
					<span class="bg-pic xsj-pic"></span>
				</li>
			</ul>
		</div>
		<div class="ad-wrap">
				<div class="ad">
					<img class="img" src="./img/pdd.jpg" alt="广告">
				</div>
		</div>
	</div>

下面是第一部分的css代码：

.wrapper .top-nav-wrap{
	width: 100%;
	height: 314px;
	/*background-color: red;*/
	/*border: 1px solid #000;*/
}
.wrapper .top-nav-wrap .top-nav{
	width: 1190px;
	height: 35px;
	/*border: 1px solid black;*/
	/*元素居中*/
	margin:0 auto;
}
.wrapper .top-nav-wrap .top-nav .top-nav-l{
	/*元素向左浮动*/
	float: left;  
}
.wrapper .top-nav-wrap .top-nav .top-nav-r{
	float: right;
}
.wrapper .top-nav-wrap .top-nav ul li{
	float: left;
	margin-right: 7px;
}
.wrapper .top-nav-wrap .top-nav a{
	color: #6c6c6c;
	font-size: 12px;
	/*元素行高等于父级行高，从而竖直居中*/
	line-height: 35px;  
	padding:0 6px; 
}
.wrapper .top-nav-wrap .top-nav a:hover{
	color: #f40;
}
.wrapper .top-nav-wrap .top-nav .china{
	color: #3c3c3c;
	line-height: 35px;
	font-size: 13px;
}
.wrapper .top-nav-wrap .top-nav .bg-pic{
	display: inline-block;
	width: 6px;
	height: 6px;
	/*background-image: url('./img/xsj.png');*/
	background-size: 100% 100%;
	vertical-align: middle;
}
.wrapper .top-nav-wrap .top-nav a.login{
	color: #f40;
}
.wrapper .top-nav-wrap .top-nav c.span{
	padding: 0 6px;
}
.wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
	background-image: url('./img/xsj.png');
	background-size: 100% 100%;
	vertical-align: middle;
}
.wrapper .top-nav-wrap .top-nav .bg-pic.shopCar-pic{
	background-image: url('./img/gwc.png');*/
	background-size: 100% 100%;
	width: 12px;
	height: 12px;
}
.wrapper .top-nav-wrap .top-nav .bg-pic.like-pic{
	background-image: url('./img/scj.png');
	width: 12px;
	height: 12px;
}
.wrapper .top-nav-wrap .top-nav .bg-pic.web-nav-pic{
	background-image: url('./img/wz.png');
	width: 12px;
	height: 12px;
}
.wrapper .top-nav-wrap .top-nav .cut-off span{
	line-height: 35px;
	color: #ddd;
}
.wrapper .top-nav-wrap .ad-wrap{
	background: #f40;
	height: 279px;
	width: 100%;
}
.wrapper .top-nav-wrap .ad-wrap .ad{	
	width: 1190px;
	margin: 0 auto;
	height: 279px;
}
.wrapper .top-nav-wrap .ad-wrap .ad img{
	/*width:expression(this.width > 1190px?1190px: true);
	height: expression(this.height>70px?70px:true)*/
	/*transform: scaleX(0.62);
	transform: scaleY(0.15);*/
	width: 100%
}

用到的图片素材（自己去淘宝和p多多官网截图下载的。。。）