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

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

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

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

网页的子部分就放置在这个容器中。关于"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代码：

		

			

				

				中国大陆
				
				
				

					亲，请登录
					免费注册
				
				

					手机逛淘宝	
				
			
			

				

					我的淘宝
					
				
				

					
					
					购物车
					
					
				
				

					
					
					收藏夹
					
					
				
				

					商品分类
				
				

					|
				
				

					
						卖家中心
						
					
				
				

					
						联系客服
						
					
				
				

					
					
					网站导航
					
					
				
			
		
		

				

					
				
		
	

下面是第一部分的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多多官网截图下载的。。。）