京东购物车网页(静态)搭建 |
您所在的位置：网站首页 › 网页购物车制作方法有哪些 › 京东购物车网页(静态)搭建 |
京东购物车网页(静态)搭建
|
按照报告的形式写一个项目 一、项目名称 完成京东购物车网页搭建 二、项目环境 1、软件环境：Win10+HBuilder+Chrome浏览器 2、项目思路 ： 根据需要实现的效果，自上而下，依次实现导航栏、搜索框、标题栏、商品详情展示框、结算窗口的编写。 三、项目源码 购物车搭建的HTML代码（京东购物车5.html） 京东购物车 京东首页 配送到：宿州 洋洋宝贝| 我的订单| 我的京东| 京东会员| 企业采购| 京东手机| 关注京东| 客户服务| 网站导航
全部商品
配送至
埇桥区
灵璧县
砀山县
萧县
全选
商品
单价
数量
小计
操作
【京东超市】desha春秋季儿童休闲服
颜色：灰色+粉红
￥182.5
-
+
￥182.5
删除
已到我的关注
【京东超市】desha春秋季儿童休闲服
颜色：灰色+粉红
￥182.5
-
+
￥182.5
删除
已到我的关注
【京东超市】desha春秋季儿童休闲服
颜色：灰色+粉红
￥182.5
-
+
￥182.5
删除
已到我的关注
全选
删除选中商品
移到我的关注
清除下柜商品
已经选择1件商品
总价￥12
去结算
搭建购物车页面的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，操作更方便哦 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |