html的简单应用网页结构分层

	
		

			

			
				
江苏
				
您好，请登录，免费注册
				
我的订单
				
我的京东
				
京东会员
				
企业采购
				
客户服务
				
网站导航
				
手机京东
			
		
		
		

			

				
			
			

				

				

			
			

				

					
秒杀
					
					
优惠券
					
					
PlUS会员
					
					
品牌闪购
					
					
拍卖
					
					
京东家电
					
					
京东超市
					
					
京东生鲜
					
					
京东国际
					
					
京东金融
				
			
		
		

			

				

					
家电
					
手机/运营商/数码
					
电脑/办公
					
家居/家具/家装/厨具
					
男装/女装/童装/内衣
					
美妆/个护清洁/宠物
					
女鞋/箱包/钟表/珠宝
					
男鞋/运动/户外
					
房产/汽车/汽车用品
					
母婴/玩具乐器
					
					
食品/酒类/生鲜/特产
					
艺术/礼品鲜花/农资绿植
					
医药保健/计生情趣
					
图书/文娱/教育/电子书
					
机票/酒店/旅游/生活
					
理财/众筹/白条/保险
					
安装/维修/清洗/二手
					
工业品
				
			
			

			

			

		

主页面的内容

/*****
	*作者：黑川柠檬
	*用途：首页的CSS文件,整个项目的公共样式
	*/
	.pr{position:relative;}
	.pa{position:absolute;}
	
		

common.css中的内容

/*****
	*作者：黑川柠檬
	*用途：页面的公共部分
	*/
	.topMain ul{
	       float:right;
	}
	.topMain ul li{
	       float:left;
	       padding:8px 14px 0px 14px;
	       font-size:16px;
	       color:#ffffff;
	       line-hight:39px;
	     
	}
	.topMain ul li.redcolor{
	       
	       color:#ff0000;
	       line-hight:39px;
	     
	}
	
	.logoMain{
			height:156px;
			width:205px;
			left:0;
			top:0;
	}
	.headMain{
			width:80%;
			height:39px;
			background:#ddd;
	}
	.columnMain ul{
	       float:left;
	}
	.columnMain ul li{
	       float:left;
	       padding:100px 19px 0px 19px;
	       font-size:16px;
	       color:#666;
	       line-hight:39px;
	}
	.columnMain ul p{
	       float:left;
	       
	}
	.topMain ul i{
	       float:right;
	       width:13px;
	       height:8px;
	       background:url('../image/bg_icon.png') no-repeat 0 0;
	       margin:5px 0 0 6px;
	       
	}
	
	.columnMain ul em{
	      width:1px;
	      height:14px;
	      float:left;
	      background:#666;
		  font-size:1px;
		  margin-top:102px;
		}
	
	

index.css中的内容

/*****
	*作者：黑川柠檬
	*用途：个人展示仿照京东首页页面布局
	*/
	.topMain{
			width:1316px;
			height:31px;
			margin:0  auto;
			background:#99cc66;
	}
	.headDiv{
			width:1160px;
			height:156px;
			margin:0 auto;
			padding-left:205px;
	}
	.mainDiv{
			width:1316px;
			height:540px;
			margin:0 auto;
	}		
		

layout.css中的内容

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;

reset.css中的内容bg_icon.png
logo.png ；bg_icon.png文件