仿京东静态网站制作之首页推荐模块

首页推荐模块制作

主要知识点：浮动&结构伪类选择器&亲儿子选择器&页面布局

HTML结构

    <!-- 今日推荐模块 -->
    <div class="suggest">
        <div class="left">
            <img src="./images/时钟.png" alt="">
            <h5>今日推荐</h5>
        </div>
        <div class=" right">
            <div class="text">
                <h5>品质好货</h5>
                <div class="blue">满300减100</div>
                <p>满500减200</p>
            </div>
            <div class=img><img src="./upload/吸尘器.png" alt=""></div>
        </div>
        <div class="right">
            <div class="text">
                <h5>品牌尾货</h5>
                <div class="green">满300减100</div>
                <p>团购低至9.9</p>
                <div class="green2">团购</div>
            </div>
            <div class="img"><img src="./upload/毛巾.png" alt=""></div>
        </div>
        <div class=" right">
            <div class="text">
                <h5>时尚穿搭</h5>
                <div class="hong">低至3.6折</div>
                <p>暑期出游季</p>
                <div class="hong2">闪购</div>
            </div>
            <div class="img"><img src="./upload/cloth.png" alt=""></div>
        </div>
        <div class="right">
            <div class="text">
                <h5>0点上新</h5>
                <div class="darkblue">全场包邮</div>
                <p>低至1折</p>
                <div class="darkblue2">闪购</div>
            </div>
            <div class="img"><img src="./upload/watch.png" alt=""></div>
        </div>
    </div>

自己写完才发现老师直接用的切图，就当是巩固基础了

CSS代码

/* 今日推荐模块 */

.suggest {
    margin: 15px auto;
    width: 1200px;
    height: 165px;
    background-color: #ededed;
}

.suggest>div {
    float: left;
    height: 165px;
}


/* 左边第一个盒子 */

.suggest .left {
    width: 208px;
    background-color: #5c5251;
    text-align: center;
}

.suggest .left img {
    margin-top: 30px;
    margin-bottom: 10px;
}

.suggest .left h5 {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}


/* 右边的盒子 */

.suggest .right {
    width: 248px;
    border-right: 1px solid #dddddd;
}

.suggest .right .text,
.img {
    float: left;
    margin-left: 20px;
    margin-top: 23px;
}

.suggest .right h5 {
    font-size: 16px;
    margin-bottom: 10px;
}

.suggest .right .text>div {
    font-size: 14px;
    color: #fff;
}

效果展示