TPTCMS

HTML+CSS网页设计,小米商城产品首页布局

HTMLCSS网页设计小米商城2018-10-24 10:42:08

大家好,本篇文章分享小米商城产品首页布局样式设计。

话不多说,直接看效果图:

小米商城产品首页布局

布局分析:

从上面效果图来看,我们首先需要定义一个灰色背景,产品介绍则分成五等份布局(这里可以用响应式布局),产品的第一位和第六位直接用图片标签,其他的需要定义产品标题、产品副标题、产品简介和产品价格,最后加上鼠标滑过特效。

HTML代码 :

<div class="tpt-list">
<div class="tpt-wp">
<div class="tpt-md-5">
    <div class="a b">
        <img src="1.jpg">
    </div>
</div>
<div class="tpt-md-5">
    <div class="b">
        <img src="2.jpg">
        <h3><a href="https://tpt360.com">小米电视4A 43英寸青春版</a></h3>
        <h4>全高清屏 / 人工智能语音</h4>
        <p><span>1499</span>元<del>1699</del>元</p>
    </div>
</div>
<div class="tpt-md-5">
    <div class="b">
        <img src="3.jpg">
        <h3><a href="https://tpt360.com">小米电视4C 50英寸</a></h3>
        <h4>4K HDR / 人工智能语音</h4>
        <p><span>1999</span>元<del>2199</del>元</p>
    </div>
</div>
<div class="tpt-md-5">
    <div class="b">
        <img src="4.png">
        <h3><a href="https://tpt360.com">15.6"笔记本 i5 4G MX110</a></h3>
        <h4>全面均衡的国民轻薄本</h4>
        <p><span>3999</span>元<del>4199</del>元</p>
    </div>
</div>
<div class="tpt-md-5">
    <div class="b">
        <img src="5.jpg">
        <h3><a href="https://tpt360.com">13.3"小米笔记本Air 四核i7</a></h3>
        <h4>第八代四核处理器</h4>
        <p><span>5799</span>元<del>5999</del>元</p>
    </div>
</div>
<div class="tpt-md-5">
    <div class="a b">
        <img src="6.jpg">
    </div>
</div>
<div class="tpt-md-5">
    <div class="b">
        <img src="7.png">
        <h3><a href="https://tpt360.com">米家空气净化器Pro</a></h3>
        <h4>OLED 显示屏幕 / 激光颗粒物传感器</h4>
        <p><span>1499元</span></p>
    </div>
</div>
<div class="tpt-md-5">
    <div class="b">
        <img src="8.jpg">
        <h3><a href="https://tpt360.com">米家电水壶</a></h3>
        <h4>一杯水,是一家人的安心</h4>
        <p><span>99元</span></p>
    </div>
</div>
<div class="tpt-md-5">
    <div class="b">
        <img src="9.png">
        <h3><a href="https://tpt360.com">米家LED吸顶灯</a></h3>
        <h4>用光线,还原理想生活</h4>
        <p><span>399元</span></p>
    </div>
</div>
<div class="tpt-md-5">
    <div class="b">
        <img src="10.png">
        <h3><a href="https://tpt360.com">米家飞利浦智睿台灯二代</a></h3>
        <h4>感知环境光,主动优化场景照明</h4>
        <p><span>199元</span></p>
    </div>
</div>
</div>
</div>

CSS分析:

首先我们给tpt-list定义一个背景颜色:

.tpt-list {
    background: #f5f5f5
}

第一张和第六张图片定义高度和宽度:

.tpt-list .a img{
    width:100%;
    height:296px
}

产品标题和副标题定义:

.tpt-list h3{
    margin:0 10px;
    font-size:14px
}
.tpt-list h4{
    margin:5px 10px 10px 0;
    height:18px;
    font-size:12px
}

产品简介定义:

.tpt-list p{
    margin:5px 10px 10px 0;
    font-size:14px;
    color:#b0b0b0
}

鼠标滑过特效:

.tpt-list .b:hover{
    transform:translate(0,-3px);
    box-shadow:0 15px 30px rgba(0,0,0,.1)
}

当然,布局的方式有很多种,这只是其中一个方法,也欢迎大家留言分享一下其他的布局方式,点击下面了解更多获取全部CSS代码。

CSS代码:

.tpt-wp{width:1200px;margin:0 auto}
.tpt-md-5{width:20%;float:left}
.tpt-list{background: #f5f5f5;width:100%;position:relative;padding:60px 0}
.tpt-list .b{margin:7px;cursor:pointer;text-align:center;background:#fff;height:246px;padding:30px 0 20px 0;position:relative;transition:all .3s ease-in-out}
.tpt-list .b img{width:150px;height:150px;margin:0 auto 18px}
.tpt-list .b:hover{transform:translate(0,-3px);box-shadow:0 15px 30px rgba(0,0,0,.1)}
.tpt-list .a{height:296px;padding:0}
.tpt-list .a img{width:100%;height:296px;margin:0}
.tpt-list h3{margin:0 10px;font-size:14px}
.tpt-list h4{margin:5px 10px 10px 0;height:18px;font-size:12px;color:#b0b0b0}
.tpt-list p{margin:5px 10px 10px 0;font-size:14px;color:#b0b0b0}
.tpt-list span{color:#ff6700}
.tpt-list del{margin:0 0 0 5px}