使用js jquery去搭建完成京东购物车

最新推荐文章于 2022-04-27 15:37:38 发布

这个ID没什么特点

最新推荐文章于 2022-04-27 15:37:38 发布

阅读量1.5k

点赞数 2

文章标签： js html css

本文链接：https://blog.csdn.net/qq_43545801/article/details/113006737

版权

该博客详细介绍了如何使用HTML和CSS构建京东购物车的静态页面，然后通过JavaScript和jQuery来添加动态效果。首先，用html和css完成了基础页面布局，接着引入并编写js文件实现动态功能。最后，通过添加jQuery代码到页面中，进一步完善了购物车的动态交互体验。

摘要由CSDN通过智能技术生成

使用html css完成基本页面

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="css/jd.css"/>
	<!--添加矢量图标的css-->
	<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
	
	<body>
		<!--导航开始-->
		<div class="nav">
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe8ff;</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>
		  	 		<!--onelick--单击事件       checkTest1(this)的this相当于整个input框本身-->
		  	 		<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"

最低0.47元/天解锁文章

这个ID没什么特点

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
使用js jquery去搭建完成京东购物车

使用js jquery去搭建完成京东购物车使用html css完成基本页面使用js完成动态效果使用jquery完成动态效果使用html css完成基本页面html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" type="text/css" hre
复制链接

扫一扫