鸿卓商城——鸿卓分类

作者：王转运

鸿卓国际

1.商品类别列表

写入HTML代码如下：

    引入CSS：
    < link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
 
 
    <div  style="margin-bottom: 80px">
     <a href="" class="list-group-item">
        XXXX
        <span class="glyphicon glyphicon-chevron-right" style="float: right;"></span>
     </a>
    </div>        
 
    #代码说明：
        list-group-item  bootstrap自带列表样式
        glyphicon glyphicon-chevron-right bootstrap     字体图标 右箭头  网上可查
        float: right  元素靠右
 
 

2.商品列表头部

写入HTML代码如下：

        <nav class="navbar navbar-default navbar-fixed-top">
         <div class="container-fluid">
            <div class="navbar-header" style="text-align: center;">
              <a class="navbar-brand" >
                <span class="glyphicon glyphicon-chevron-left" ></span>
              </a>
             <span class="navbar-brand" >
                电脑精选
              </span>
            </div>
          </div>
         </nav>
 
 
 
    #代码说明：
        都是bootstrap自带样式
        可全部复制粘贴  不用学  太复杂 要学bootstrap很多内容

3.商品列表

写入HTML代码如下：

    <div style="width: 100%;margin-top: 50px">
        <div class="col-xs-12 "  style="background-color: #fff;padding: 10px;box-shadow: 0 9px 25px -8px rgba(0, 0, 0, 0.38);margin-top:5px">
 
            <div class="col-xs-4 text-center" style="padding:0px">
                <img alt="" src="img/商品图片" style="max-width: 100%">
            </div>
 
            <div class="col-xs-8 " >
                <div style="width: 100%;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"> 
                商品名称
                </div>
                <div style="width: 100%;font-size: 12px; color: #888;line-height: 20px;height: 10%">
                商品描述
                </div>
 
                <div style="width: 100%;text-align: right;">
                    <span style="color:#00B8F1;font-size: 16px;line-height:30px;margin-right:5px">
                    ￥300
                    </span>
                </div>
            </div>
        </div>
 
</div>
 
    #代码说明：
        overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
        内容溢出显示省略号