HTML+CSS+JS实操京东购物车

京东购物车

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"/><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"></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/img2.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】笔记本电脑</a></li><li class="info_4"><a>颜色：银色</a> </li><li class="info_5">3699</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">￥3699</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/img3.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】洗衣液</a></li><li class="info_4"><a>重量：1斤，500ml</a> </li><li class="info_5">28</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">￥28</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>

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;
}/*结算模块结束*/

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;}

HTML+CSS+JS实操京东购物车相关推荐

基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
弹性布局案例实操(京东网页制作的草稿)
CSS3的弹性布局_星辰镜的博客-CSDN博客上面的文章弹性布局的详细介绍: Css3的页面布局之定位_星辰镜的博客-CSDN博客上面的文章是定位的介绍 Day02 了解Html+CSS的学习内容 ...
CSS学习笔记——搭建京东购物车网页
大家好,作为一名互联网行业的小白,写博客只是为了巩固自己学习的知识,但由于水平有限,博客中难免会有一些错误出现,有不妥之处恳请各位大佬指点一二! 博客主页:链接: https://blog.csdn. ...
【html+css+js】实现当当购物车1.0
css代码* {margin: 0;padding: 0;}button,input {/* "\5B8B\4F53" 就是宋体的意思这样浏览器兼容性比较好 */font-fam ...
H5+CSS3+JS/JQ 实现京东首页
京东首页代码利用html+css+js/jQuery 实现京东首页的界面及功能 https://gitee.com/zhangqiaquan/jingdong-homepage
京东购物车（html+css+js）
效果图展示 html+js部分关于购物车实现的功能 1.仿京东购物车页面效果实现 2.购物车已有商品展示 3.数量增减 4.小计 5.汇总 6.全选 7.全选并汇总 8.单个商品复选 9.单个商品复 ...
HTML+CSS+JS仿京东购物车页面动态效果
目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 2 HTML代码 3 CSS代码 3.1 预处理css 3.2 jd购物车页面的css 4 jd ...
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
文章目录前言一.登录页二.首页三.我的购物车页四.我的订单页五.确认订单页六.详情页七.整体结构和效果图总结前言仿小米商城官网项目是本人实训内容,实训老师带着做的首页和登录页,本 ...
jQuery入门实操-css操作，鼠标点击事件，页面计算器
前言本文是学习jQuery中的一些实践,是jQuery入门的实操案例.更多语法可参考w3school的jQuery参考手册 jQuery是一个快速.简洁的JavaScript框架,是继Prototy ...

HTML+CSS+JS实操京东购物车

京东购物车

HTML+CSS+JS实操京东购物车相关推荐

最新文章

热门文章