|
|
@@ -40,7 +40,7 @@
|
|
|
/* css reset */
|
|
|
body,
|
|
|
ul,
|
|
|
- p {
|
|
|
+ p,h2 {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
@@ -409,6 +409,92 @@
|
|
|
height: 24px;
|
|
|
margin:18px auto 4px;
|
|
|
}
|
|
|
+ /* 广告图 css */
|
|
|
+ .banner-box{
|
|
|
+ background-color: #aaa;
|
|
|
+ margin-top: 15px;
|
|
|
+ padding-top:15px;
|
|
|
+ }
|
|
|
+ .banner-box img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ /* 文字按钮css */
|
|
|
+ .text-btn-content{
|
|
|
+ background-color: #aaa;
|
|
|
+ line-height: 58px;
|
|
|
+ }
|
|
|
+ .text-btn-content .content{
|
|
|
+ position: relative;
|
|
|
+ height: 58px;
|
|
|
+ }
|
|
|
+ .text-btn-content .content div{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top:0;
|
|
|
+ height: 58px;
|
|
|
+ }
|
|
|
+ .text-btn-content .content i{
|
|
|
+ display: inline-block;
|
|
|
+ height: 12px;
|
|
|
+ width: 12px;
|
|
|
+ background-color: #999;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 12px;
|
|
|
+ padding: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ /* 商品列表部分 */
|
|
|
+ .goods-list-content{
|
|
|
+ background-color: #aaa;
|
|
|
+ }
|
|
|
+ .goods-list-content .goods-list-left{
|
|
|
+ width: 234px;
|
|
|
+ height: 614px;
|
|
|
+ /* background-color: blue; */
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .goods-list-content .goods-list-right{
|
|
|
+ float: left;
|
|
|
+ height: 614px;
|
|
|
+ width: 992px;
|
|
|
+ /* background-color: red; */
|
|
|
+ }
|
|
|
+ .goods-list-content .goods-list-right li{
|
|
|
+ width: 234px;
|
|
|
+ height: 300px;
|
|
|
+ /* background-color: yellow; */
|
|
|
+ float: left;
|
|
|
+ margin: 0 0 14px 14px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .goods-list-content li img{
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .goods-list-content li .title{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .goods-list-content li .desc{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b0b0b0;
|
|
|
+ text-wrap: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+ .goods-list-content .price span{
|
|
|
+ color: #ff6700;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .goods-list-content .price del{
|
|
|
+ color: #b0b0b0;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -559,7 +645,7 @@
|
|
|
</div>
|
|
|
<!-- 商品展示区域 -->
|
|
|
<div class="goods-content">
|
|
|
- <div class="content">
|
|
|
+ <div class="content clearfix">
|
|
|
<div class="goods-nav">
|
|
|
<ul>
|
|
|
<li>
|
|
|
@@ -599,6 +685,51 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 商品部分 -->
|
|
|
+ <!-- 广告图 -->
|
|
|
+ <div class="banner-box">
|
|
|
+ <div class="content">
|
|
|
+ <img src="./img/big_bg.png" alt="img">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 文件按钮部分 -->
|
|
|
+ <div class="text-btn-content">
|
|
|
+ <div class="content">
|
|
|
+ <h2>手机</h2>
|
|
|
+ <div>
|
|
|
+ <span>查看更多</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 商品列表部分 -->
|
|
|
+ <div class="goods-list-content">
|
|
|
+ <div class="content clearfix">
|
|
|
+ <div class="goods-list-left">
|
|
|
+ <img src="./img/left_bg.png" alt="img" width="234">
|
|
|
+ </div>
|
|
|
+ <div class="goods-list-right">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="./img/phone.png" alt="img">
|
|
|
+ <p class="title">Xiaomi MIX Flip</p>
|
|
|
+ <p class="desc">4.01英寸多功能超大外屏|徕卡光学Summilux镜头</p>
|
|
|
+ <p class="price">
|
|
|
+ <span>5999元</span>
|
|
|
+ <del>6999元</del>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
