AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-08-25 187
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 网页编程实战一
按照报告的形式写一个项目

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

二、项目环境
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">&#xe6d3;</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，操作更方便哦

文章标签：
前端开发
时间静止不是简史
目录
相关文章
雷霆半月斩掉你的板砖
|
6月前
|
前端开发 JavaScript
简单购物车功能制作
简单购物车功能制作
雷霆半月斩掉你的板砖
53 0
赵广陆
|
前端开发
HTML+CSS仿京东购物车页面静态页面
HTML+CSS仿京东购物车页面静态页面
赵广陆
172 2
落798.
|
开发者
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
落798.
250 0
阿甘兄
|
JavaScript 前端开发
37分布式电商项目 - 网站首页（广告展示）
37分布式电商项目 - 网站首页（广告展示）
阿甘兄
39 1
阿甘兄
|
缓存 NoSQL 数据库
40分布式电商项目 - 网站首页(缓存广告数据)
40分布式电商项目 - 网站首页(缓存广告数据)
阿甘兄
54 0
落798.
|
存储 小程序 API
【 uniapp - 黑马优购 | 购物车页面(2)】如何实现收货地址区域功能、常见问题解决方案
【 uniapp - 黑马优购 | 购物车页面(2)】如何实现收货地址区域功能、常见问题解决方案
落798.
309 0
AicShark
|
前端开发
移动端静态“城市艺术展”练手页面
本次练习主要针对的是移动端页面的练习（附源码）
AicShark
119 0
移动端静态“城市艺术展”练手页面
时间静止不是简史
|
前端开发 JavaScript
某东购物车（动态）网页搭建
网页编程实战二: 利用JavaScript实现某东购物车（动态）网页搭建
时间静止不是简史
153 0
某东购物车（动态）网页搭建
游客k2gw4fr7y7zie
3、动态鲜花网页的实现
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The rose for MIAO</title></head> <body style="background-color:
游客k2gw4fr7y7zie
139 0
dasein58
|
搜索推荐 定位技术 UED
网站SEO优化404页面怎么制作？
网站SEO优化并不是一两天就能成功的，需要长时间的积累和耐心。今天分享有关404页面的建立。 用户访问网站上不存在的页面时，服务器通常应该返回404错误。如果站长没有在服务器端设置客制化的404页面，用户浏览器显示将会是一个默认错误的页面。示例：百度的404页面：http://www.baidu.com/search/error.html，很多运营比较好的网站，对于404页面的制作都会花心思，而不是把404页面弄这样。这样的错误页面给用户体验肯定不好，同样搜索引擎也会这么认为。
dasein58
160 0

热门文章

最新文章

  • 1
    helloworld
  • 2
    6.2. Apt-Get
  • 3
    Oracle 11g RAC ASM 错误之(1)
  • 4
    7-1 网络编程技术(下)-2
  • 5
    SANYUKI：净化空气，顺便美颜？
  • 6
    人工智能项目正在起飞：这对未来的工作意味着什么？
  • 7
    核心开发者宣称比特币失败 清货离场
  • 8
    重启数据库的一场闹剧
  • 9
    iconv vs mb_convert_encoding
  • 10
    poj 1247 Magnificent Meatballs
  • 1
    文档智能与检索增强生成结合的LLM知识库方案测评：优势与改进空间
    23
  • 2
    文档智能与检索增强生成结合的LLM知识库方案测评：优势与改进空间
    18
  • 3
    AICG：认识你，真好
    23
  • 4
    自建内网穿透服务器
    29
  • 5
    SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
    25
  • 6
    PHP中的异常处理与最佳实践####
    18
  • 7
    探索人工智能与大数据的融合之美####
    21
  • 8
    智能化运维：从被动响应到主动预防####
    18
  • 9
    springboot中使用knife4j访问接口文档的一系列问题
    32
  • 10
    后端开发中的微服务架构实践与挑战####
    20

    • 相关课程

    更多
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定

    • 相关电子书

    更多
  • QQ移送页面框架优化实践
  • QQ移动页面框架优化实践
  • SEO学习步骤

    • 相关实验场景

    更多
  • 通过云拨测对指定网页进行网页性能监测
  • 收银台的场景化界面实践
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
  • 搭建Magento电子商务网站
  • 小试牛刀，一键部署电商商城
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！