Java—网页编程与设计 -制作京东购物车页面

最新推荐文章于 2022-10-07 12:38:40 发布

脑袋不灵光的小白羊

最新推荐文章于 2022-10-07 12:38:40 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Java HTML+CSS+JS

本文链接：https://blog.youkuaiyun.com/qq_42588990/article/details/108536548

Java 同时被 2 个专栏收录

113 篇文章

订阅专栏

HTML+CSS+JS

27 篇文章

订阅专栏

一，网页分析

1，模块的划分：
去写一个网页先别着急写代码，先划分好模块构思好功能，会有事半功倍的效果！
在这里插入图片描述

2，怎么找素材
直接在网页上按Ctrl + S保存网页，可以将个整个网页的图片保存下来

二，京东购物车1.0

首先新建一个reset.css这里解释一下为什么要设置reset

语义化标签在不同浏览器上的样式设置会有一些差异，这些差异导致相同的样式表在不同的浏览器也是不同的。换言之在进行布局时，不要依赖标签样式进行编写，必须给用到的语义化标签，设置统一明确的初始样式。这个设置过程称为CSSReset（样式重置）

reset的目的不是让样式在所有浏览器下一致，而是减少默认样式可能带来的问题，reset 期望提供一套普适通用的基础样式。

reset.css

/**清除内外边距**/
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;}

jd.css

.nav{
	
	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-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_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;
	
	
	
}

.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_1{
	
	margin-left: 23px;
	
}
.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,.balance_ul1>li,.balance_ul2>li{
	
	float: left;
	
	line-height: 50px;
	
	margin-left: 14px;
	
	
}
.balance_ul2{
	
	float: right;
}

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

.balance span{
	
	
	 font-size: 25px;
	 
	 color: #C91623 ;
	
	font-weight: bold;
}

/*结算模块结束*/

jingdong01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="css/reset.css"/>


    <link rel="stylesheet" type="text/css" href="css/jd.css"/>

 

</head>
<body>

<!--导航开始-->

<div class="nav">


    <div class="warp">

        <ul class="nav_ul1">
            <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>配送到</span>

        <select>
            <option>昌平区</option>

            <option>顺义区</option>

            <option>大兴区</option>

            <option>朝阳区</option>

            <option>昌平区</option>


        </select>

    </div>

</div>

<!--标题结束-->

<!--显示菜单的开始-->
<div class="tips warp">

    <ul>
        <li>
            <input type="checkbox" />
            全选
        </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" /> </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/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/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="balance warp">

    <ul class="balance_ul1">
        <li>

            <input type="checkbox" name="" id="" value="" />
            全选
        </li>
        <li><a>删除选中商品</a></li>
        <li><a>移到我的关注</a></li>
        <li><a>清除下柜商品</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>

在这里插入图片描述

二、京东购物车2.0

引入小图标，小图标不是图片一般需要通过专业的网站来添加
在这里插入图片描述
先登录，只有登录后才可以正常使用

下载并解压到指定文件，为了避免麻烦，这里我就直接全部引入到项目中即可。

引入iconfont
在主页中添加如下标签

怎么引入正确的图标，在图标文件中打开如下页面来确定要引入的图标名称
在这里插入图片描述
引入成功

三、京东购物车3.0

引入js

//获得所有的多选框对象
var  fav=document.getElementsByName("fav");

//判断是否全选操作
function checkTest1(th){
	
	var  flag =th.checked;
	
	
	for(var i in fav){
			
		fav[i].checked=flag;
			
		}

}
//单选决定全选操作
function  checkTest2(){
	 
	  var  flag =true;
	 
	  for(var i=1;i<fav.length-1;i++){
	  	
	  	 if(!fav[i].checked){
	  	 	
	  	 	flag=false;
	  	 	
	  	 	break;
	  	 }
	  }
	  
	  //决定框是否勾选
	  fav[0].checked=flag;
	  
	  fav[fav.length-1].checked=flag;
	  
	  
	  //价格是否统计
	  
	  //商品的总价格
	  var  zong =0;
	  
	  //统计是否有勾选的对象
	  var num=0;
	  
	  //统计商品的数量
	  var spNum=0;
	  
	  for(var i=1;i<fav.length-1;i++){
	  	
	  	
	  	   if(fav[i].checked){
	  	   	
	  	   	  num++;
	  	   	  
	  	   	 //获得ul父节点
	  	   	 var par=fav[i].parentNode.parentNode;
	  	   	 //获得指定ul下面的所有的li
	  	   	 var li= par.getElementsByTagName("li");
	  	   	 
	  	   	 //单个商品的总价格
	  	   	 var z=li[6].innerText.split("￥")[1];
	  	   	 
	  	   	 //获得所有商品的总价格
	  	   	 zong+=Number(z);
	  	   	 
	  	   	 document.getElementById("zongz").innerText=zong;
	  	   	 
	  	   	 
	  	   	 //获得商品的数量
	  	   	 var z2=li[5].getElementsByTagName("input");
	  	   	 
	  	   	 var  num2=z2[0].value;
	  	   	 
	  	   	 spNum+=Number(num2);
	  	   	 
	  	   	 //获得商品数量统计的对象
	  	   	 
	  	   	 document.getElementById("snum").innerText=spNum;
	  	   	 
	  	   }
	  	
	  }
	  
	  
	  if(num==0){
	  	
	  	document.getElementById("zongz").innerText=0;
	  	
	  	document.getElementById("snum").innerText=0;
	  	
	  }
	
}

//控制数量的增加和减少
function  checkTest3(th,sig){
	
	var pre;
	
	if(sig=="1"){
	//获得下一个节点
	pre=th.nextElementSibling;	
	
	if(Number(pre.value)>0){
		
		//获得节点的value值
	pre.value=Number(pre.value)-1;
	}
	
	}else {
		
	//获得上一个节点对象
	 pre=th.previousElementSibling;
	 //获得节点的value值
	pre.value=Number(pre.value)+1;
	}
	
	//计算每一个商品总的价格
	//获得每一个商品的单价
	var val=pre.parentNode.previousElementSibling.innerHTML;
	
	//计算总的价格
	var zong =Number(val)*Number(pre.value);
	
	//把总的价格赋值给指定的对象
	
	pre.parentNode.nextElementSibling.innerHTML="￥"+zong;
	
	
	
	
}

//删除指定的节点
function  checkTest4(th){
	
	//获得父节点div
	
	var div=th.parentNode.parentNode.parentNode;
	
	div.remove();
	
	
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		
		
		<link rel="stylesheet" type="text/css" href="css/jd.css"/>
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
		
		<script type="text/javascript" src="js/jd.js" ></script>
	
		
	</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>
		  	 	  </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>配送到</span>
		  	  	
		  	  	<select>
		  	  		<option>昌平区</option>
		  	  		
		  	  		<option>顺义区</option>
		  	  		
		  	  		<option>大兴区</option>
		  	  		
		  	  		<option>朝阳区</option>
		  	  		
		  	  		<option>昌平区</option>
		  	  		
		  	  		
		  	  	</select>
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		  <div class="tips warp">
		  	
		  	 <ul>
		  	 	<li>
		  	 		<input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
		  	 		全选
		  	 	</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"   name="fav" onclick="checkTest2()"/> </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 onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  </div>
		
		 <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </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 onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		  
		   <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav"  onclick="checkTest2()"/> </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 onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		<!--商品详情展示结束-->
		
		<!--结算开始-->
		
	   <div class="balance warp">
	   	
	   	   <ul class="balance_ul1">
	   	   	<li>
	   	   		
	   	   		<input type="checkbox" name="fav" id="" value=""  onclick="checkTest1(this),checkTest2()"/>
	   	   		全选
	   	   	</li>
	   	   	<li><a>删除选中商品</a></li>
	   	   	<li><a>移到我的关注</a></li>
	   	   	<li><a>清除下柜商品</a></li>
	   	   </ul>
	   	   
	   	   <ul class="balance_ul2">
	   	   	
	   	   	 <li>已经选择<span id="snum">0</span>件商品</li>
	   	   	 <li>总价 <span id="zongz">￥0</span></li>
	   	   	 <li>
	   	   	 	<button class="butt">去结算</button>
	   	   	 	
	   	   	 </li>
	   	   	
	   	   </ul>
	   	
	   	
	   </div>
		
		
		<!--结算结束-->
	</body>
</html>

在这里插入图片描述