京东购物车网页(静态)搭建 |
您所在的位置:网站首页 › hbuilder导航条代码 › 京东购物车网页(静态)搭建 |
按照报告的形式写一个项目 一、项目名称 完成京东购物车网页搭建 二、项目环境 1、软件环境:Win10+HBuilder+Chrome浏览器 2、项目思路 : 根据需要实现的效果,自上而下,依次实现导航栏、搜索框、标题栏、商品详情展示框、结算窗口的编写。 三、项目源码 购物车搭建的HTML代码(京东购物车5.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,操作更方便哦 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |