web前端编程实战实例：制作静态京东首页

	
	


	

		
	
		收藏京东你好欢迎来到京东！[登录]
		[免费注册]   |   我的订单
		  |   手机京东   |   客户服务   |  
		网站导航 
		
	



	

		

			
			
		
		

		

		
热门搜索：   
		校园之星   
		礼品卡   沙发   九阳   洗衣机国庆惠   汽车用品   LG   G2   考研大纲


		
我的京东  


		
去购物车结算  
		

	


	

		
全部商品分类
		
首页
		
服装城
		
京东超市
		
团购
		
拍卖
		
在线游戏
		

	



	

		

			

				
图书、音像、数字商品 > 
				
家用电器 >
				
手机、数码 >
				
电脑、办公>
			
		

		

		
1
		
2
		
3
		
4
		
5
		
6

		


		

			
京东快报
			
更多快报>

			


			

				
"月光行动"之黄金周
				
图书音像全场100减20
				
天津东亚运动会影响配送
				
汽车用品国庆不打烊
			

			

				
雙十季   10月大牌狂飙
				
电视家影十一大满减
				
国庆期间京东正常配送！
				
家装季亿元东券免费领
			

			

				
充值
				
旅行
				
彩票
				
游戏
			

			

				

					

						手机号： 
					
					
支持移动、联通、电信
					

					面值：
						 
						
							100
							150
							200
							250
							300
						
						
						98.60-99.60
					
					
					

					
					两元博千万，双色球6+1
					
				
			
		

		

			

				
			
			

				
			
			

				
			
			

				<
			
			

				>
			
		
	

	


		

			
疯狂抢购
			
猜您喜欢
			
热卖商品
			
热评商品
			
新品上架

			
京东首发
		

		

			

				
				
京东自营211，简约百搭！防水帆布单肩斜挎包，三
				
京东价： ¥3399.00
			

			

				
				
京东自营211，简约百搭！防水帆布单肩斜挎包，三
				
京东价： ¥3399.00
			

			

				
				
京东自营211，简约百搭！防水帆布单肩斜挎包，三
				
京东价： ¥3399.00
			

			

				
				
京东自营211，简约百搭！防水帆布单肩斜挎包，三
				
京东价： ¥3399.00
			

			

				
				
京东自营211，简约百搭！防水帆布单肩斜挎包，三
				
京东价： ¥3399.00
			
		

		

			

					

						
					
					

						首发   德赛便携式移动DVD

						灵动的外观！灵巧的身体！全区解码，支持RMVB网络格式，17英寸大壳！
						
					

			

			

				首发   
				康佳42寸安卓4D电视

				最新一代网络智能电视康佳52AD系列，极致超窄边框设计，配置Android4.0操作系统，不闪式3D技术，全通道2D转4D，内置wifi。
				

					
				
			
		
	

	

		

			
限时抢购
		

		

			

				今日限购
				更多团购>
			
		

		

			

				

					剩余00小时45分15秒
				
				

					
					
京东自营211，简约百搭！防水帆布单肩斜挎包，三
					
京东价： ¥3399.00
								
			

			

				

					剩余00小时45分15秒
				
				

					
					
京东自营211，简约百搭！防水帆布单肩斜挎包，三
					
京东价： ¥3399.00
								
			

			

				

					剩余00小时45分15秒
				
				

					
					
京东自营211，简约百搭！防水帆布单肩斜挎包，三
					
京东价： ¥3399.00
								
			

			

				

					剩余00小时45分15秒
				
				

					
					
京东自营211，简约百搭！防水帆布单肩斜挎包，三
					
京东价： ¥3399.00
								
			

			

				

					剩余00小时45分15秒
				
				

					
					
京东自营211，简约百搭！防水帆布单肩斜挎包，三
					
京东价： ¥3399.00
								
			
		

		

			

				
			

			

				
			
		
	

	

		

			

				
			
			

				

					
购物指南
					
购物流程
					
会员介绍
					
团购机票
					
常见问题
					
大家电
					
联系客服
				
			
		

		

			

				
			
			

				

					
配送方式
					
购物流程
					
团购机票
					
常见问题
					
大家电
					
联系客服
				
			
		

		

			

				
			
			

				

					
支付方式
					
购物流程
					
会员介绍
					
团购机票
					
常见问题
					
大家电
				
			
		

		

			

				
			
			

				

					
售后服务
					
购物流程
					
会员介绍
					
团购机票
					
联系客服
				
			
		

		

			

				
			
			

				

					
特色服务
					
购物流程
					
会员介绍
					
团购机票
					
大家电
					
联系客服
				
			
		

		

			

				
			
			

				
京东自营覆盖区县
				
京东已向全国1232个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。
			
			

				查看详情
			
		
	

	

		

			

			关于我们   |  
			关于我们   |  
			关于我们   |  
			关于我们   |  
			关于我们   |  
			关于我们   |  
			关于我们   |  
			关于我们   |  
			关于我们   |  
			关于我们 
			
		

		

			
北京市公安分局备案编号110105014669   |   京ICP证070359号   |   互联网药品信息服务资格证编号（京）-非经营性-2011-0034   |   新出发京零 字第大120007号
			

				音像制品经营许可证苏宿批005号   |   出版物经营许可证编号新出发（苏）批字第N-012号   |   互联网出版许可证编号新出网证（京）字150号
			
			

				网络文化经营许可证京网文[2011]0168-061号 Copyright @ 2004-2013
				京东JD.com版权所有
			
			

				京东旗下网站:360TOP   迷你挑   English Site
			
		

		

			
			
			
			
		
	

 

*{
	margin: 0;
	padding: 0;
	border: 0;
}


a{
	color: black;
	text-decoration: none;
}

a:hover{
	color: red;
}

.img_bigger:hover{
	transform: scale(1.05,1.05);
	box-shadow: 0 0 10px #0000ff;
	cursor: pointer;
	z-index: 500;
}/*图片划过放大加阴影*/

.hr_hover:hover{
	color: red;
	border-bottom: 1.5px solid red;
}/*下划线改色*/

.nav1{
	height: 19px;/*没按比例放大缩小*/
	font-family: "Microsoft YaHei";
	font-size: 15px;
	background-color: #F8F8F8;
	border: 3px #696969; 
	padding: 8px;
	padding-left: 170px;
	padding-right: 152px;
	/*text-indent: 5em;/*缩进*/
	overflow: hidden;/*超出盒子会被隐藏*/
	white-space:nowrap;
	text-decoration: none;
	box-shadow: 0.5px 0.5px 0.5px #F8F8F8;
}

.nav1 a{
	color: black;
}

.nav1 a:hover{
	color: red;
	text-decoration: underline;
}


.margin_top_3px{
	margin-top: 3px;/*两个盒子间的间距*/
}

#nav_text1{
	float:right;/*全部元素右对齐*/
	text-decoration: none;
}

.div1{
	margin-right: 152px;
	margin-left: 170px;
	font-size: 15px;
	height: 70px;
	font-family: "微软雅黑";
	position: relative;/*父盒子要设置为相对定位，子盒子才能绝对定位*/
}

.div1_pic{
	width: 320px;
	height: 60px;
}

.div1_input01{
	position: absolute;
	left: -90px;
	top: 3px;
}

#input1{
	position: absolute;
	top: 2px;
	left: 420px;
	width: 550px;
	height: 30px;
	border:5px solid red;
	padding-left: 8px;
	font-size: 15px;
}

.clear{
	clear: both;
}

.div1_p1{
	position: absolute;/*绝对定位，前提父窗口已经是相对定位*/
	top: 50px;
	left: 330px;
	font-size: 12px;
}

#div1_p1_span1{
	color: red;
}

#div1_p1_span2{
	color: #A0A0A0;
}

.div1_01{
	position: absolute;
	top: 30px;
	left: 1010px;
	padding: 2px;
	padding-left: 5px;
	text-align: center;  
	box-shadow: 0.5px -0.5px 0.5px #F8F8F8;
	border: 1px solid #e3e4e5;
	background-color: #fff;
}

.div1_02{
	position: absolute;
	top: 30px;
	left: 1130px;
	padding: 2px;
	padding-left: 5px;
	text-align: center; 
	box-shadow: 0.5px -0.5px 0.5px #F8F8F8;
	border: 1px solid #e3e4e5;
	background-color: #fff;
}

.div2{
	margin-right: 152px;
	margin-left: 170px;
	margin-top: 14px;
	height: 39px;
	background-color: red;
	padding:13px;
	font-size: 20px;
	text-align: center;
}

.div2_01 a{
	margin: 5px;
	margin-top: 0px;
	margin-right: 20px; 
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
	color: white;
	float: left;
}

.div2_01 a:hover{
	background-color: #A00000;
}

.div2_02 a{
	margin-left: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 25px;
	padding-right: 25px; 
	color: white;
	float: left;
}/*div2_02类下的a*/

.div2_02 a:hover{
	background-color: #A00000;
}

.div3{
	text-align: center;
	height: 416px;
	margin-right: 170px;
	margin-left: 170px;
	position: relative;/*父盒子要设置为相对定位，子盒子才能绝对定位*/
}

.div3_01{
	width: 257px;
	height: 397px;
	border:2px solid red;
	border-top: 0px;
}

.div3_01_ul{
	padding: 8px;
	padding-left: 55px;
	line-height: 25pt;
	text-align: left;
	list-style-type: square;
}


#d3ul_li{
	color:#909090; 
}

.div3_02{
	position: absolute;
	top:10px;
	left: 272px;
}

.div3_1_6{
	background-color: #989898;
	height: 21px;
	width: 21px;
	border-radius: 50%;/*化成圆*/
	opacity: 0.7;/*透明度*/
	z-index: 600;
}

.div3_03{
	position: absolute;
	top: 220px;
	left: 760px;
}

.div3_04{
	position: absolute;
	top: 220px;
	left: 790px;
}

.div3_05{
	position: absolute;
	top: 220px;
	left: 820px;
}

.div3_06{
	position: absolute;
	top: 220px;
	left: 850px;
}

.div3_07{
	position: absolute;
	top: 220px;
	left: 880px;
}

.div3_08{
	position: absolute;
	top: 220px;
	left: 910px;
}

.div3_09{
	position: absolute;
	top: 10px;
	left: 950px;
}

.div3_10{
	position: absolute;
	top: 90px;
	left: 950px;
	width: 310px;
	height: 307px;
	border:1px solid #e3e4e5;
}

.div3_10_01{
	position: absolute;
	top:0px;
	left: 3px;
	width: 70px;
}

.div3_10_02{
	position: absolute;
	top: 0px;
	right: 5px;
}

.div3_10_02 a{
	color: blue;
}

.div3_10_02 a:hover{
	color: red;
}

.div3_10_03{
	position: absolute;
	top:25px;
}

.div3_10_03 hr{
	border: 1.5px solid #A8A8A8;
	width: 310px;
}

.div3_10_04{
	position: absolute;
	top: 30px;
	left: 2px;
	height: 82px;
	width: 133px;
	padding:10px;
	text-align: left;
	font-size: 13px;
	line-height: 13pt;
	border-bottom:1px solid #e3e4e5;
}

.div3_10_05{
	position: absolute;
	top: 30px;
	left: 155px;
	height: 82px;
	width: 133px;
	padding:10px;
	text-align: left;
	font-size: 13px;
	line-height: 13pt;
	border-bottom:1px solid #e3e4e5;
}

.div3_10_06{
	width: 310px;
	height: 40px;
	position: absolute;
	top:133px;
}

.div3_10_06_1{
	height: 24px;
	width: 35px;
	padding-top:8px;
	padding-bottom: 8px;
	padding-left: 21px;
	padding-right: 21px;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 0px;
	top: 0px;
}

.div3_10_06_2{
	height: 24px;
	width: 35px;
	padding-top:8px;
	padding-bottom: 8px;
	padding-left: 21px;
	padding-right: 21px;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 77px;
	top: 0px;
}

.div3_10_06_3{
	height: 24px;
	width: 35px;
	padding-top:8px;
	padding-bottom: 8px;
	padding-left: 21px;
	padding-right: 21px;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 154px;
	top: 0px;
}

.div3_10_06_4{
	height: 24px;
	width: 35px;
	padding-top:8px;
	padding-bottom: 8px;
	padding-left: 21px;
	padding-right: 21px;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 231px;
	top: 0px;
}

.div3_10_07{
	position: absolute;
	top: 177px;
	width: 310px;
	height: 135px;
	line-height: 23pt;
	text-align: left;
}

.div3_10_07p1{
	padding-left: 20px;
}

.div3_10_07p2{
	font-size: 13px;
	padding-left: 90px;
}

.div3_10_07p3{
	padding-left: 20px;
}

.div3_10_07p4{
	padding-left: 90px;
}

.div3_10_07se{
	padding-left: 18px;
}

.d3_10_07_sep{
	font-size: 10px;
}

.div3_10_07in{
	width: 100px;
	height: 20px;
	border:1px solid #e3e4e5;
}

#d3_10_07_btn{
	width: 71px;
	height: 23px;
	border-radius: 10%;
	background-color: red;
	color: white;
}

#d3_10_07_btn:hover{
	background-color: #A00000;
}

.d3_10_07_btnp{
	color: blue;
	font-size: 9px;
}

.d3_10_07_btnp a:hover{
	color: red;
}

.div3_11{
	position: absolute;
	top:250px;
	left: 272px;
	width: 670px;
	height: 149px;
}

.div3_11_01{
	position: absolute;
	left: 37px;
	height: 149px;
	width: 202px;
}

.div3_11_02{
	position: absolute; 
	left: 229px;
}

.div3_11_03{
	position: absolute; 
	left:431px;
}

.d3_11_lr a{
	color: #888888;
}

.d3_11_lr:hover{
	background-color: #E0E0E0;
	opacity: 0.7;/*透明*/
}

.div3_11_04{
	height: 149px;
	width: 38px;
	position: absolute;
	left: 0px;
	font-size: 40px;
	line-height: 140px;
	border-radius: 10%;
}

.div3_11_05{
	height: 149px;
	width: 38px;
	position: absolute;
	right: 0px;
	font-size: 40px;
	line-height: 140px;
	border-radius: 10%;
}

.div4{
	height: 272px;
	margin-right: 152px;
	margin-left: 170px;
	position: relative;
}

.div4_01{
	height: 40px;
}

.div4_01_1{
	height: 24px;
	width: 188px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 0px;
	top: 0px;
}

.div4_01_2{
	height: 24px;
	width: 189px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 188px;
	top: 0px;
}

.div4_01_3{
	height: 24px;
	width: 189px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 377px;
	top: 0px;
}

.div4_01_4{
	height: 24px;
	width: 189px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 566px;
	top: 0px;
}

.div4_01_5{
	height: 24px;
	width: 189px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 755px;
	top: 0px;
}

.div4_01_6{
	height: 24px;
	width: 309px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: left;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	right: 0px;
	top: 0px;
}

.div4_02{
	width: 944px;
	height: 231px;
	border-bottom:1px solid #e3e4e5;
}

.div4_02 a:hover{
	color: black;
}

#payying{
	font-size: 15px;
	color: red;
}

.div4_02_1{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	font-size: 10px;
}

.div4_02_2{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 127px;
	font-size: 10px;
	position: absolute;
	top: 40px;
	left: 188px;
}

.div4_02_3{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 127px;
	font-size: 10px;
	position: absolute;
	top: 40px;
	left: 377px;
}

.div4_02_4{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 127px;
	font-size: 10px;
	position: absolute;
	top: 40px;
	left: 566px;
}

.div4_02_5{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 127px;
	font-size: 10px;
	position: absolute;
	top: 40px;
	left: 755px;
}

.div4_03{
	width: 312px;
	height: 231px;
	position: absolute;
	top: 40px;
	right: 0px;
	border:1px solid #e3e4e5;
	border-top: 0px;
}

.div4_03_{
	height: 120px;
	border-bottom: 1px dashed #e3e4e5;
}

.div4_03_1{
	position: absolute;
	top: 5px;
	left: 5px;
	width: 100px;
	height: 100px;
}

.div4_03_2{
	position: absolute;
	top: 5px;
	left: 110px;
	font-size: 15px;
}

.div4_03_2p{
	color: #909090;
	font-size:10px; 
}

.div4_03_2p:hover{
	color: red;
}

.div4_03_3{
	width: 200px;
	font-size: 15px;
}

.div4_03_3p{
	color: #909090;
	font-size:10px; 
}

.div4_03_3p:hover{
	color: red;
}

.div4_03_4{
	position: absolute;
	right: 5px;
	top:125px;
	width: 100px;
	height: 100px;
}

.div5{
	height: 306px;
	margin-right: 152px;
	margin-left: 170px;
	position: relative;
}

.div5_01{
	height: 40px;
}

.div5_01_1{
	height: 24px;
	width: 944px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: left;
	border-bottom: 1.5px solid #A8A8A8;
}

.div5_02{
	height: 40px;
}

.div5_01_2{
	height: 24px;
	width: 309px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: left;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	right: 0px;
	top: 0px;
}

.div5_01_2p{
	color: blue;
	margin-left: 150px;
}

.div5_03{
	width: 944px;
	height: 262px;
	border-bottom:1px solid #e3e4e5;
	position: absolute;
	top: 42px;
}

.div5_03_1{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: relative;
}

.d5_3_1p1{
	color: #909090;
	font-size:12px; 
	position: absolute;
	top: 5px;
	left: 15px;
}

.d5_3_1p1 span{
	font-size: 25px;
}

.d5_3_1pic1{
	position: absolute;
	top: 40px;
	left: 30px;
}

.div5_03_2{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: absolute;
	top: -232px;
	left: 188px;
	position: relative;
}

.div5_03_3{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: absolute;
	top: -464px;
	left: 377px;
	position: relative;
}

.div5_03_4{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: absolute;
	top: -696px;
	left: 566px;
	position: relative;
}

.div5_03_5{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: absolute;
	top: -928px;
	left: 755px;
	position: relative;
}

.div5_04{
	width: 312px;
	height: 262px;
	position: absolute;
	top: 40px;
	right: 0px;
	border:1px solid #e3e4e5;
	border-top: 0px;
}

.div5_04_pic1{
	position: absolute;
	top: 5px;
	right: 10px;
}

.div5_04_pic2{
	position: absolute;
	top: 165px;
	right: 0px;
}

.div6{
	margin-top: 5px;
	border-top: 1px solid #e3e4e5;
	border-bottom: 1px solid #e3e4e5;
	height: 190px;
	margin-right: 152px;
	margin-left: 170px;
	position: relative;
}

.div6_01{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: relative;
}

.div6_02{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: absolute;
	top: 0px;
	left: 188px;
}

.div6_03{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: absolute;
	top: 0px;
	left: 377px;
}

.div6_04{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: absolute;
	top: 0px;
	left: 566px;
}

.div6_05{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: absolute;
	top: 0px;
	left: 755px;
}

.div6_01_ul ul{
	list-style-type: none;
	position: relative;
	left: 45px;
	top: -45px;
}

.div6_06{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 202px;
	height: 169px;
}

.div6_06p{
	position: relative;
	top: -169px;
	font-size: 13px;
	line-height:15pt; 
}

.div6_06a{
	position: relative;
	top: -120px;
	left: 149px;
	font-size: 13px;
}

.div7{
	margin-top: 5px;
	height: 190px;
	margin-right: 152px;
	margin-left: 170px;
	position: relative;
}

.div7_01{
	height: 32px;
	text-align: center;
	padding-top: 10px;
	font-size: 13px;
}

.div7_02{
	text-align: center;
	height: 75px;
	font-size: 13px;
}

.div7_03{
	height: 64px;
	text-align: center;
}

具体程序及素材：链接：https://pan.baidu.com/s/1BN0MG8FkAb0ekzjhHCP8BQ 密码：i9g6