CSS_实现京东购物车静态页面

主页面分配：

	
		
		
		
		
		
		
		
	
	
		
		

			

				

					
京东首页
					
配送至：北京
				
				
				

					
洋洋宝贝|
					
我的订单|
					
我的京东|
					
京东会员|
					
企业采购|
					
京东手机|
					
关注京东|
					
客户服务|
					
网站导航
				
			
		
		
		 
		
		

			

				
				
				

					
					
					
					
				
			
		
		
		
		
		

				
全部商品
				

					配送至：
					
						昌平区
						大兴区
						朝阳区
					
				
			
		
		
		
		

			

				

					
					全选
				
				
商品
				
单价
				
数量
				
小计
				
操作
			
		
	
		
		
		
		

			

				

				

				
【京东超市】desha春秋季儿童休闲服
				
颜色：灰色+粉红
				
￥182.5
				

					-
					
					+
				
				
￥182.5
				

					删除
					移到我的关注
				
			
		
		
		

			

				

				

				
【京东超市】desha春秋季儿童休闲服
				
颜色：灰色+粉红
				
￥182.5
				

					-
					
					+
				
				
￥182.5
				

					删除
					移到我的关注
				
			
		
		
		

			

				

				

				
【京东超市】desha春秋季儿童休闲服
				
颜色：灰色+粉红
				
￥182.5
				

					-
					
					+
				
				
￥182.5
				

					删除
					移到我的关注
				
			
		
		
		
		
		

			

				

					全选
				
				
删除选中商品
				
移到我的关注
				
清除下柜商品
			
			
			

				
已经选择1件商品
				
总价￥12
				

					去结算
				
			
		
		
	

分步CSS操作：

.nav{
	
	height: 30px;
	
	background-color: #f1f1f1;
	
}

.warp{
	width: 1000px;
	margin: 0px auto;
}

.nav_ul1{
	float: left;
}
.nav_ul1 li{
	float: left;
	line-height: 30px;
	margin-right: 20px;
}

.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
	color: gray;
	font-size: 13px;
}


.nav_ul2{
	float: right;
}
.nav_ul2 li{
	float: left;
	margin-left: 10px;
	line-height: 30px;
}
.nav_ul2 span{
	margin-left: 10px;
	line-height: 30px;
}

a:hover{
	color: red;
}

/*搜索框开始*/
.search{
	margin-top: 20px;
}

.search img{
	clear: both;
	float: left;
}

.search_div{
	float: right;
	margin-top: 25px;
}
.search_text{
	width: 265px;
	height: 21px;
	border: 3px solid #c91623;
	position: relative;
	left: 4px;
	top: -1px;
}
.search_button{
	width: 51px;
	height: 29px;
	background-color:#c91623;
	border: 0px;
	color: white;
}
/*搜索框结束*/

/*标题开始*/
.title{
	margin-top: 130px;
}
.title h3{
	float: left;
	font-size: 23px;
	color: #c91623;
}
.title div{
	float: right;
	color: gray;
}
/*标题结束*/

/*描述：显示菜单开始*/
.tips{
	width: 1000px;
	height: 50px;
	background-color: #f1f1f1;
	margin-top: 165px;
	border: 1px  solid  #e9e9e9;
}

.tips li{
	float: left;
	line-height: 50px;
	font-size: 13px;
	color: gray;
}
.tips li:nth-child(1){
	width: 90px;
	border-top: 3px solid #c91623;
}
.tips li:nth-child(2){
	margin-left: 80px;
	}

.tips li:nth-child(3){
	margin-left: 430px;
	}

.tips li:nth-child(4){
	margin-left: 70px;
	}

.tips li:nth-child(5){
	margin-left: 110px;
	}

.tips li:nth-child(6){
	margin-left: 50px;
	}
/*描述：显示菜单结束*/

/*描述：商品详情展示开始*/
.info{
	width: 1000px;
	height: 125px;
	background-color: #fff4e8;
	border: 1px solid gray;
	margin-top: 25px;
}
.info li{
	
	float: left;
	margin-top: 20px;
}

.info_1{
	margin-left:22px;
}

.info_2{
	margin-left:15px;
	border: 1px solid gray;
}
.info_3{
	width: 260px;
	height: 20px;
}
.info_4{
	margin-left:45px;
}
.info_5{
	margin-left:70px;
}
.info_6{
	margin-left:40px;
}
.info_6 input{
	width: 30px;
	height: 12px;
	position: relative;
	text-align: center;
	top: -2px;
	left: -5px;
}
.but{
	position: relative;
	left: -10px;
}
.info_6 button{
	 width: 30px;
	 
	 height: 18px;
}
.info_7{
	margin-left:15px;
}
.info_8{
	margin-left:15px;
}
.info a{
	font-size:12px;
	color: #33333;
}
/*描述：商品详情展示结束*/

/*描述：商品结算开始*/
.balance{
	width: 1000px;
	height: 50px;
	border: 1px solid gray;
	margin-top: 20px;
}
.balance li{
	float: left;
	line-height: 50px;
	margin-left: 22px;
}
.balance_ul2{
	float: right;
	
}
.balance_ul2 span{
	font-size: 25px;
	 
	 color: #C91623 ;
	
	font-weight: bold;
}
.balance_ul2 button{
	width: 100px;
	height: 50px;
	background-color: brown;
	border: 1px solid #c91623; 
	font-weight: bold;
	font-size: 20px;
	color: white;
}
button:hover{
	background-color:#C91623 ;
}
/*描述：商品结算结束*/

主体页面控制：

body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;}
body{text-align: center;font-size:14px;}
a{text-decoration: none;}
li{list-style: none;}

实现效果图：

由于是对CSS知识点的回顾练习，左移没有用到js等。