京东购物车网页(静态)搭建

时间:2022-07-22
本文章向大家介绍京东购物车网页(静态)搭建，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

按照报告的形式写一个项目

一、项目名称 完成京东购物车网页搭建

二、项目环境 1、软件环境：Win10+HBuilder+Chrome浏览器 2、项目思路 ： 根据需要实现的效果，自上而下，依次实现导航栏、搜索框、标题栏、商品详情展示框、结算窗口的编写。

三、项目源码 购物车搭建的HTML代码（京东购物车5.html）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>京东购物车</title>
		
		<link rel="stylesheet" type="text/css" href="css/jd.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
	</head>
	<body>
		<!--导航开始-->
		<div class="nav">
			
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe6d3;</i></a></li>
					<li><a href="">京东首页</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_but"/>
					
				</div>
			</div>
		</div>
		<!--搜索框结束-->
		
		<!--标题开始	-->
		<div class="title warp">
			<h3>全部商品</h3>
			
			<div >
				<span id="">配送至</span>
				<select >
					<option >埇桥区</option>
					<option >灵璧县</option>
					<option >砀山县</option>
					<option >萧县</option>
				</select>
			</div>
		</div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始 -->
		<!--warp令内容居中显示-->
		<div class="tips warp">
			<ui>
				<li><input type="checkbox">全选</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ui>
		</div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		 <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  </div>
		  
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img2.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  </div>
		  
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" /> </li>
		  	  	<li class="info_2"> <img src="img/img3.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">￥182.5</li>
		  	  	<li class="info_6">
		  	  		<button>-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a>删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  </div>
		<!--商品详情展示结束-->
		
		<!--结算窗口开始-->
			<div class="balance warp">
				<ul class="balance_ul1">
				<li><input type="checkbox">全选</li>
				<li>删除选中商品</li>
				<li>移到我的关注</li>
				<li>清除下柜商品</li>
			</ul>
			
			<ul class="balance_ul2">
				<li>已经选择<span>1</span>件商品</li>
				<li>总价<span>￥12</span></li>
				<li class="butt">去结算</li>
			</ul>
			</div>
		<!--结算窗口结束-->
	</body>
</html>

搭建购物车页面的CSS代码（jd.css）

/*导航栏开始*/
.nav{
	width:1920px ;
	height:30px;
	background-color: #f1f1f1;
}
.warp{
	width: 1000px;
	margin: 0px auto;
}
.nav_ul1,.nav_ul2 li{
	float: left;
}
.nav_ul1 li{
	float: left;
	line-height: 30px;
	margin-right: 20px;
}

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

.nav_ul2{
	float: right;
}

.nav_ul2 li,.nav_ul2 span{
	line-height: 30px;
	margin-left: 15px;
	
}
.nav a:hover{	
	color: red;
}
/*导航栏结束*/


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

.search img{
	/*清除之前冲突样式  重点*/
	clear: both;
	float: left;
}

.search_div{
	float: right;
	margin-top: 20px;
}

.search_text{
	width: 265px;
	height: 21px;
	border: 3px solid #C91623;
	
	position: relative;
	left: 4px;
	top: -1px;
}	

.search_but{
	width: 51px;
	height: 29px;
	background-color: #C91623;
	border: 0px;
	color: #FFFFFF;
}

/*搜索框结束*/

/*标题开始*/
.title{
	margin-top: 130px;
}

.title h3{
	float: left;
	font-size: 23px;
	color: #C91623;
}

.title div{
	float: right;
	font-size: 14px;
	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: 12px;
	color: gray;
}
/*border-top：加上边框加*/
.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: 30px;
	 /*上边框，对原来边框的约定进行覆盖*/
 	 border-top: 3px solid  gray;
}

.info li{
	  float:  left;	
	  margin-top: 20px;
}

.info a{
	font-size: 12px;
	color: #333333;
}

.info_2{
	margin-left: 15px;
	border: 1px  solid gray;
}

.info_3{ 
	  width: 270px; 
	  height: 20px;
}

.info_4{
	 margin-left: 45px;
	
}

.info_5{
	margin-left: 70px;
	
}

.info_6{
	 margin-left: 40px;
}

.info_6 input{	
	width: 30px;
	height: 12px;
	text-align: center;
	
	position: relative;
	top: -2px;
	left: -5px;
	
}

.info_6 button{	
	 width: 30px; 
	 height: 18px;
}

.bot{
	 position: relative;
	left: -10px;
}

.info_7{
	
	 margin-left: 40px;
}
/*商品详情展示结束*/

/*结算窗口开始*/
.balance{
	width: 1000px;
	height: 50px;
	
	border: 1px solid gray;
	margin-top: 30px;
}

.balance_ul1 li,.balance_ul2 li{
	float: left;
	line-height: 50px;
	margin-left: 14px;
}

.balance_ul2{
	float: right;

}

.butt{

	width: 110px;
	height: 50px;
	background-color: #C91623;
	
	border: 0px;
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
}

.balance_ul2 span{
	font-size:20px ;
	font-weight: bold;
	color: #C91623;
}
/*结算窗口结束*/

运行结果

四、bug以及心得体会

1、bug：自己写的时候，结算按钮无论如何都对不上去。原因是混淆了margin-top属性与line-height属性。我使用的是margin-top：15px；导致整个快内容下移，改为line-height：50px；即可使文字居中于外边框。

2、心得与体会

​ ​静态网页的编写用到了HTML和CSS，HTML利用超文本标记设置网页显示的内容，CSS利用选择器对相关内容进行像素级处理、编辑、布局。我们只有熟练的将二者相结合，才能写出出色的静态网页。

​ ​在学习CSS中，需要掌握很多技巧：包括如何提取画面颜色、如何找到小图标的图片以及使用、如何查看网页源代码、如何对布局进行像素级别的微调等等。通过对京东购物车静态网页的实现，将所学知识与现实相结合，令吾对学习充满兴趣，受益匪浅！

五、项目源码及压缩包 链接：https://pan.baidu.com/s/1XWXBJxAnvjsUnsajCV3MfQ 提取码：8c5a

随机文章
本站知识点必读
最近更新