某东购物车网页(静态)搭建-阿里云开发者社区

按照报告的形式写一个项目
一、项目名称
完成京东购物车网页搭建

二、项目环境
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，操作更方便哦

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景