鸿卓商城——个人中心

作者：王转运

鸿卓国际

引入CSS:

<link href="css/bottom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

1.用户信息

写入HTML代码如下：

<div class="col-xs-12 "  style="background-color: #F0415E;padding: 10px;box-shadow: 0 9px 25px -8px rgba(0, 0, 0, 0.38)">
 
 
                <div class="col-xs-12 text-center" style="padding:0px">
                    <img alt="" src="img/timg.jpg" style="width:100px;height:100px;border-radius: 100%;">
                </div>
 
                <div class="col-xs-12 text-center" >
 
                    <div style="width: 100%;font-size: 12px; color: #fff;line-height: 50px;">
                    余额:
                    <span style="font-size: 20px">￥300</span>
                    </div>
 
                </div>
 
 
     </div>
 
 

2.导航栏

写入HTML代码如下：

 
 
<div  class="col-xs-12 "  style="margin-top:10px;background-color: #fff;padding: 15px;border-bottom: 1px #ccc solid;box-shadow: 0 9px 25px -8px rgba(0, 0, 0, 0.38)">
        <span class="glyphicon glyphicon-list-alt" style="margin-right: 10px"></span>我的订单
        <span class="glyphicon glyphicon-chevron-right" style="float: right;"></span>
</div>
     #代码说明：
      glyphicon glyphicon-list-alt  bootstrap字体图标样式 订单的图标
      glyphicon glyphicon-chevron-right  bootstrap字体图标样式 右箭头
      glyphicon glyphicon-home  bootstrap字体图标样式 收货地址图标
      glyphicon glyphicon-cog   bootstrap字体图标样式 退出系统图标