@wangzhuanyun 2017-06-30T01:42:09.000000Z 字数 3356 阅读 649

鸿卓商城——首页

作者：王转运

鸿卓国际

1.实现底部菜单

QQ截图20170629144433.png-22.2kB
写入HTML代码如下：

   .nav{
        background-color: #fff; /*设置颜色为白色  
        z-index: 100; /*可用于将在一个元素放置于另一元素之后*/
        position: fixed;/*将元素固定在某个位置上    相对于浏览器窗口进行定位*/
        width: 100%;
        bottom: 0;/*设置底部边距为0*/
        left: 0px/*设置左边边距为0*/
    }
    .nav ul {
        height: 0px;
    }
    .nav ul  li{
        list-style: none;/*去掉黑点*/
        float: left; /*元素向左浮动靠拢*/
        width: 25%;
        text-align: center; /*元素内容居中*/
        padding: 0px;/*内边距0*/
        margin: 0px/*外边距0*/
    }
  .nav ul li span{
        font-size: 12px;/*字体大小为12P*/
        line-height: 20px;/*行高*/
        display: block;/*将元素变为块级元素  */
  }
  * {
        padding: 0;
        margin: 0;
  }
 
 
<div class="nav">
        <ul>
            <li>
                <img alt="" src="img/bottom1_1.png" height="35">
                <span>首页</span>
            </li>
            <li>
                <img alt="" src="img/bottom2.png" height="35">
                <span>鸿卓分类</span>
            </li>
            <li>
                <img alt="" src="img/bottom3.png" height="35">
                <span>购物车</span>
            </li>
            <li>
                <img alt="" src="img/bottom4.png" height="35">
                <span>我的</span>
            </li>
        </ul>
    </div>

2.引入轮播图插件

引入相应的JS与CSS后写入HTML代码如下：

   <link href="css/lunbo.css" rel="stylesheet" type="text/css"/>
 
   <div class="WSCSlideWrapper">
        < div class="WSCSlide WSCSlideTransition">
            <img class="WSCSlide_img" src="img/banners.png" style="max-width: 100%;" />
            <img class="WSCSlide_img" src="img/banners.png" style="max-width: 100%;"/>
            <img class="WSCSlide_img" src="img/banners.png" style="max-width: 100%;" />
        </div>
        <div class="WSCSlideStatus">
    </div>
 
    #代码说明：
        max-width: 100%  设置图片最大宽度为100%
 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/lunbo.js"></script>
 
    #代码说明：
        以上两行JS  请放到<body>标签后

3.首页账户余额与最近购买

image_1bjp9revghq21nhhe8l1i4k1vdp1l.png-12.3kB
写入HTML代码如下：

     <div class="col-xs-10 col-xs-offset-1" style="box-shadow:0px 10px 25px -10px  #A8A8A8;padding: 10px;;background-color: #fff;margin-top:5px">
                <div class="col-xs-5 text-center" style="color:#686868">
                        <div style="width: 100%">账户余额</div>
                        <span style="color:#00B8F1"   >100元</span>
                </div>
                <div class="col-xs-2 text-center" style="color:#686868">
                        <div style=" background-color: #888;height: 40px; width: 1px;"></div>
                </div>
                <div class="col-xs-5 text-center" style="color:#686868">
                        <div style="width: 100%">最近购买</div>
                        <span style="color:#00B8F1"   >3</span>
                </div>
        </div>
 
    #代码说明：
        col-xs-*    列宽，最大值为12 xs为超小屏幕 手机 (<768px)
        col-xs-offset-*     列偏移，可以让元素向右移
        box-shadow:上 右 下 左  颜色    设置边框发光
        background-color    设置背景颜色
        text-center     元素下文本居中
        color   设置字体颜色

4.首页商品类型

image_1bjpado4vki110ud1hlm14741k522f.png-24.4kB
写入HTML代码如下：

        <div class="col-xs-12" >
            <div class="col-xs-6 text-center" style="margin-top: 10px">
                //电脑精选
                <img alt="" src="img/computer.png" style="max-width: 100%">
            </div>
            <div class="col-xs-6 text-center" style="margin-top: 10px">
                //手机精选
                <img alt="" src="img/telephone.png" style="max-width: 100%">
            </div>
            <div class="col-xs-6 text-center" style="margin-top: 10px">
                //耳机精选
                <img alt="" src="img/headset.png" style="max-width: 100%">
            </div>
            <div class="col-xs-6 text-center" style="margin-top: 10px">
                //其他配件
                <img alt="" src="img/other.png" style="max-width: 100%">
            </div>
        </div>

5.首页今日推荐

image_1bjpar9gupjl894cd7jqet9d2s.png-4.1kB
写入HTML代码如下：

       <table class="table" style="margin-bottom: 50px;">
            <tr >
                <td style="width: 22px;padding:5px 0px">
                    <img alt="" src="img/dian.png" width="20px">
                </td>
                <td style="width: 72px;padding:5px 0px">今日推荐</td>
                <td>
                    <div style=" background-color: #D5D5D5;height: 1px; width: 100%;;margin-top:10px"></div>
                </td>
            </tr>
 
        </table>
  #代码说明：
     <table>  表格（有行和列组成）
     <tr >    表格行
     <td>     表格列
    class="table"   为Bootstrap框架自带表格样式

6.商品信息展示