html

<!-- 机酒自由行 -->
    <section class="jjzyx">
        <div class="center-wrap">
            <div class="hd clearfix">
                <h2>机酒自由行</h2>
                <em>挑选全球机票、酒店、邮轮等旅行产品</em>
                <nav>
                    <ul>
                        <li><a href="">近期好货</a></li>
                        <li><a href="">新品汇聚</a></li>
                        <li><a href="">定制游</a></li>
                        <li><a href="">国内推荐</a></li>
                        <li><a href="">优惠机票</a></li>
                        <li><a href="">热门海岛</a></li>
                        <li><a href="">热卖签证</a></li>
                    </ul>
                </nav>
            </div>
            <div class="bd">
                <ul>
                    <li class="big-grid"></li>
                    <li class="pro-grid"></li>
                    <li class="pro-grid"></li>
                    <li class="pro-grid"></li>
                    <li class="pro-grid"></li>
                    <li class="pro-grid"></li>
                    <li class="more-grid"></li>
                </ul>
            </div>
        </div>
    </section>

css

/* 机酒自由行 */
.jjzyx {
    padding: 40px 0;
    background: #FFFFFF;
}

.jjzyx .hd h2 {
    width: 180px;
    height: 54px;
    font-size: 36px;
    color: #000000;
    line-height: 54px;
    float: left;
    margin-right: 12px;
}

.jjzyx .hd em {
    width: 204px;
    height: 18px;
    font-size: 12px;
    color: #000000;
    line-height: 18px;
    float: left;
    position: relative;
    top: 27px;
}

.jjzyx .hd nav ul li {
    float: right;
    width: 56px;
    height: 22px;
    padding-bottom: 2px;
    border-bottom: 4px solid #FFFFFF;
    margin: 13px 0 13px 16px;
    font-size: 14px;
    text-align: center;
    line-height: 22px;
}

.jjzyx .hd nav ul li a {
    color: rgba(0, 0, 0, 0.85);
}

.jjzyx .hd nav ul li:hover {
    border-color: #20BD9A;
}

.jjzyx .hd nav ul li:hover a {
    color: #20BD9A;
}

/* 机酒自由行图文混排 */
.jjzyx .bd ul li {
    float: left;
    margin-right: 32px;
    margin-top: 32px;
}

.jjzyx .bd ul li:nth-child(3) {
    margin-right: 0;
}

.jjzyx .bd ul li:nth-child(7) {
    margin-right: 0;
}

.jjzyx .bd ul li.big-grid {
    width: 560px;
    height: 270px;
    background-color: blue;
}

.jjzyx .bd ul li.pro-grid {
    width: 264px;
    height: 270px;
    background-color: green;
}

.jjzyx .bd ul li.more-grid {
    width: 264px;
    height: 270px;
    background-color: red;
}

相关截图：