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

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

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

二、项目环境
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"></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
复制这段内容后打开百度网盘手机App，操作更方便哦

京东购物车网页(静态)搭建相关推荐

CSS学习笔记——搭建京东购物车网页
大家好,作为一名互联网行业的小白,写博客只是为了巩固自己学习的知识,但由于水平有限,博客中难免会有一些错误出现,有不妥之处恳请各位大佬指点一二! 博客主页:链接: https://blog.csdn. ...
HTML+CSS仿京东购物车页面静态页面
目录 1 用到的知识 1.1 无序标签的使用 1.2 浮动的使用 1.3 伪类的使用 1.4 清除原有浮动所占位置 1.5 边框背景盒子布局div文字属性等等 2 HTML代码 3 CSS代码 3.1 ...
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 ...
css京东购物车静态页面实现
css京东购物车静态页面实现 <!DOCTYPE html> <html><head><meta charset="utf-8">& ...
一个静态淘宝购物车网页练习
一个静态淘宝购物车网页练习话不多说,直接上代码! <!DOCTYPE html> <html><head><meta charset="utf-8 ...
Html、Css、javaScript 网页制作之京东购物车
一.Html: 京东购物车.html: <!DOCTYPE html> <html><head><meta charset="utf-8" ...
京东上千页面搭建基石——CMS前后端分离演讲史读后感
阅读文章:京东上千页面搭建基石--CMS前后端分离演讲史文章网址:https://mp.weixin.qq.com/s?__biz=MzIwODA4NjMwNA==&mid=26528978 ...
京东上千页面搭建基石——CMS前后端分离演进史
声明:本文来自京东张开涛的微信公众号(kaitao-1234567),授权CSDN转载,如需转载请联系作者. 作者:于林坤,2012年加入京东,网站移动研发部频道业务技术负责人,先后多次主导京东商城首 ...
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码 ...

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

京东购物车网页(静态)搭建相关推荐

最新文章

热门文章