碼上歡樂
相關內容    簡體    繁體

CSS_實現京東購物車靜態頁面

本文轉載自   查看原文   2019-12-11 08:56   685 

主頁面分配：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>京東購物車</title>
		
		<link rel="stylesheet" href="css/reset.css" />
		
		<link rel="stylesheet" href="css/jd.css" />
		<link rel="stylesheet" href="icon/iconfont.css" />
	</head>
	<body>
		<!--描述：導航欄開始-->
		<div class="nav">
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href="http://www.jd.com" target="_blank"><i class="iconfont">&#xe6d3</i>京東首頁</a></li>
					<li><a href="">配送至：北京</a></li>
				</ul>
				
				<ul class="nav_ul2">
					<li><a href="">洋洋寶貝</a><span>|</span></li>
					<li><a href="">我的訂單</a><span>|</span></li>
					<li><a href="">我的京東</a><span>|</span></li>
					<li><a href="">京東會員</a><span>|</span></li>
					<li><a href="">企業采購</a><span>|</span></li>
					<li><a href="">京東手機</a><span>|</span></li>
					<li><a href="">關注京東</a><span>|</span></li>
					<li><a href="">客戶服務</a><span>|</span></li>
					<li><a href="">網站導航</a></li>
				</ul>
			</div>
		</div>
		<!--描述：導航欄開始-->
		 
		<!--描述：搜索框開始-->
		<div class="search">
			<div class="warp">
				<img src="img/logo.jpg" />
				
				<div class="search_div">
					
					<input type="text" class="search_text"/>
					<input type="button" value="搜索" class="search_button"/>
					
				</div>
			</div>
		</div>
		<!--描述：搜索框結束-->
		
		<!--描述：標題開始-->
		<div class="title warp">
				<h3>全部商品</h3>
				<div class="">
					<span>配送至：</span>
					<select>
						<option value="">昌平區</option>
						<option value="">大興區</option>
						<option value="">朝陽區</option>
					</select>
				</div>
			</div>
		<!--描述：標題結束-->
		
		<!--描述：顯示菜單開始-->
		<div class="tips warp">
			<ul>
				<li>
					<input type="checkbox" name="" id="" value="" />
					全選
				</li>
				<li>商品</li>
				<li>單價</li>
				<li>數量</li>
				<li>小計</li>
				<li>操作</li>
			</ul>
		</div>	
		<!--描述：顯示菜單結束-->
		
		<!--描述：商品詳情展示開始-->
		<div class="info warp">
			<ul>
				<li class="info_1"><input type="checkbox"value="" /></li>
				<li class="info_2"><img src="img/img1.jpg" width="80px"/></li>
				<li class="info_3" ><a href="">【京東超市】desha春秋季兒童休閑服</a></li>
				<li class="info_4"><a>顏色：灰色+粉紅</a></li>
				<li class="info_5">￥182.5</li>
				<li class="info_6">
					<button>-</button>
					<input value="1" />
					<button class="but">+</button>
				</li>
				<li class="info_7">￥182.5</li>
				<li class="info_8">
					<a href="">刪除</a>
					<a href="">移到我的關注</a>
				</li>
			</ul>
		</div>
		
		<div class="info warp">
			<ul>
				<li class="info_1"><input type="checkbox"value="" /></li>
				<li class="info_2"><img src="img/img2.jpg" width="80px"/></li>
				<li class="info_3" ><a href="">【京東超市】desha春秋季兒童休閑服</a></li>
				<li class="info_4"><a>顏色：灰色+粉紅</a></li>
				<li class="info_5">￥182.5</li>
				<li class="info_6">
					<button>-</button>
					<input value="1" />
					<button class="but">+</button>
				</li>
				<li class="info_7">￥182.5</li>
				<li class="info_8">
					<a href="">刪除</a>
					<a href="">移到我的關注</a>
				</li>
			</ul>
		</div>
		
		<div class="info warp">
			<ul>
				<li class="info_1"><input type="checkbox"value="" /></li>
				<li class="info_2"><img src="img/img3.jpg" width="80px"/></li>
				<li class="info_3" ><a href="">【京東超市】desha春秋季兒童休閑服</a></li>
				<li class="info_4"><a>顏色：灰色+粉紅</a></li>
				<li class="info_5">￥182.5</li>
				<li class="info_6">
					<button>-</button>
					<input value="1" />
					<button class="but">+</button>
				</li>
				<li class="info_7">￥182.5</li>
				<li class="info_8">
					<a href="">刪除</a>
					<a href="">移到我的關注</a>
				</li>
			</ul>
		</div>
		<!--描述：商品詳情展示結束-->
		
		<!--描述：商品結算開始-->
		<div class="balance warp">
			<ul class="balance_ul1">
				<li><input type="checkbox"/>
					全選
				</li>
				<li><a href="">刪除選中商品</a></li>
				<li><a href="">移到我的關注</a></li>
				<li><a href="">清除下櫃商品</a></li>
			</ul>
			
			<ul class="balance_ul2">
				<li>已經選擇<span>1</span>件商品</li>
				<li>總價<span>￥12</span></li>
				<li>
					<button class="butt">去結算</button>
				</li>
			</ul>
		</div>
		<!--描述：商品結算結束-->
	</body>
</html>

分步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等。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 京東購物車實現原理 京東購物車的 Java 架構實現及原理！ 靜態頁面購物車數量加減功能實現 android 仿淘寶京東購物車 ListView嵌套CheckBox 仿京東實現購物車頁面中結算的動態滾動效果 jQuery實現簡單購物車頁面 購物車的原理及Java實現(仿京東實現原理) 購物車的原理及實現.(仿京東實現原理) 購物車的實現原理 購物車的原理以及實現
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM