8项目通关前端/美团网布局项目09：完成猜你喜欢

@效果预览

日复搬砖肝肠断，风萧萧兮路漫漫，菊花渐残夜未央，少年奈何不封装 ??

——Steve Jobsir 《悯农233》

@布局思路

• 标题栏、白底灰边的内容盒子均复用前面封装好的样式即可！
• 故曰：花开堪折直须折，能不搬砖就别搬！
• ul+li+浮动，实现横排+自动折行；
• 直排弹性盒实现单品内纵向信息排列，交叉轴align-items:start;
• 评分用的 五星进度条 在相同位置叠加两个ul（水平内置5个星星li），下灰上黄，给顶层黄色ul以75%的宽度，溢出部分不显示，即成；
• 所以五星进度条，封不封...

@HTML部分

<!-- 猜你喜欢 -->
<div class="likes">
    <!-- 标题盒子 直接复用以前封好的title-box样式 -->
    <div class="title-box">

        <!-- 用列表组织局部菜单 -->
        <ul>
            <!-- 这一组向左浮动 -->
            <li>猜你喜欢</li>
            <li>为你甄选最适合的</li>

            <!-- 【全部>】向右浮动 -->
            <li>
                <a href="#">
                    <span>全部</span>
                    <span class="iconfont icon-xiangyou1"></span>
                </a>
            </li>
        </ul>
    </div>

    <!-- 内容盒子 -->
    <div class="content-box">
        <ul class="clearfix">

            <!-- 单品内容 -->
            <li>
                <!-- 封面大图 -->
                <img src="https://p1.meituan.net/biztone/102024596_1664975588535.jpeg@214w_120h_1e_1c" alt="">

                <!-- 店名 -->
                <p class="name"> 芦月轩羊蝎子（杨闸店）</p>

                <!-- 评分 -->
                <div class="color9 rating">

                    <!-- 五星进度条 -->
                    <div class="stars">

                        <!-- 底部五星：灰色 + 定位到左上角 + 满宽 -->
                        <ul>
                            <!-- 水平5星 -->
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                        </ul>

                        <!-- 顶部五星：金色 + 定位到左上角 + 半宽 + 溢出隐藏 -->
                        <ul>
                            <!-- 水平5星 -->
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                            <li><i class="iconfont icon-ditu-xing"></i></li>
                        </ul>

                    </div>

                    <span>1914</span>
                    <span>个评价</span>
                </div>

                <p class="color9 location">管庄</p>

                <p class="price">
                    <span>￥</span>
                    <span>45.0</span>
                    <span>起</span>
                </p>

            </li>

            <!-- 一样的li还有好几吨 -->
            ...
            
        </ul>
    </div>
</div>

@SCSS部分

五星进度条

<!-- 用户评分区 -->
<div class="color9 rating">

    <!-- 五星进度条 -->
    <div class="stars">

        <!-- 底部五星：灰色 + 定位到左上角 + 满宽 -->
        <ul>
            <!-- 水平5星 -->
            <li><i class="iconfont icon-ditu-xing"></i></li>
            <li><i class="iconfont icon-ditu-xing"></i></li>
            <li><i class="iconfont icon-ditu-xing"></i></li>
            <li><i class="iconfont icon-ditu-xing"></i></li>
            <li><i class="iconfont icon-ditu-xing"></i></li>
        </ul>

        <!-- 顶部五星：金色 + 定位到左上角 + 半宽 + 溢出隐藏 -->
        <ul>
            <!-- 水平5星 -->
            <li><i class="iconfont icon-ditu-xing"></i></li>
            <li><i class="iconfont icon-ditu-xing"></i></li>
            <li><i class="iconfont icon-ditu-xing"></i></li>
            <li><i class="iconfont icon-ditu-xing"></i></li>
            <li><i class="iconfont icon-ditu-xing"></i></li>
        </ul>

    </div>

    <span>1914</span>
    <span>个评价</span>
</div>

/* 用户评分区 */
>.rating {
    padding-left: 85px;

    // 上下两层五星ul都要相对于当前盒子做绝对定位
    position: relative;

    /* 上下两层五星的容器盒子 */
    >.stars {
        width: 100px;

        >ul {
            /* 水平5星li */
            display: flex;
            flex-direction: row;

            /* 上下两层 同时定位到父盒子左上角 */
            position: absolute;
            left: 0;

            // >li {
            //     i {
            //         // 这里可以调一下星星细节
            //     }
            // }
        }

        /* 位于顶层的5星 */
        >ul:last-child {
            // 上层5星 金色！
            color: #ff9900;

            /* 半宽 + 溢出隐藏 */
            width: 30%;
            overflow: hidden;
        }

    }
}

完整样式

/* 猜你喜欢 */
.likes {

    /* box属性 */
    margin: 40px auto;
    // height: 803px;
    // background-color: green;

    /* 标题盒子 覆盖一下背景色 */
    >.title-box {
        background-color: #52b3d9;
    }

    /* 内容盒子 */
    >.content-box {

        /* box属性 */
        // height: 759px;
        box-sizing: border-box;
        background-color: white;
        // 边框下方有圆角
        border: 1px solid #e5e5e5;
        border-radius: 0 0 4px 4px;
        border-top: none;

        /* 水平左浮动li群 +  自动折行 */
        >ul {
            padding: 8px;

            >li {
                // 左浮横排 + 自动折行
                float: left;

                /* box属性 */
                width: 234px;
                height: 242px;
                box-sizing: border-box;
                border-radius: 5px;
                padding: 10px;
                cursor: pointer;

                /* 内部元素使用直排弹性盒 */
                display: flex;
                flex-direction: column;
                
                // 垂直方向（主轴）均匀分布
                justify-content: space-between;

                // 水平方向（交叉）左对齐
                align-items: start;

                /* 封面大图 */
                >img {
                    border-radius: 5px;
                }

                /* 评分区 */
                >.rating {
                    padding-left: 85px;

                    // 上下两层五星ul都要相对于当前盒子做绝对定位
                    position: relative;

                    /* 上下两层五星的容器盒子 */
                    >.stars {
                        width: 100px;

                        >ul {
                            /* 水平5星li */
                            display: flex;
                            flex-direction: row;

                            /* 上下两层 同时定位到父盒子左上角 */
                            position: absolute;
                            left: 0;

                            // >li {
                            //     i {
                            //         // 这里可以调一下大小什么的
                            //     }
                            // }
                        }

                        /* 位于顶层的5星 */
                        >ul:last-child {
                            // 上层5星 金色！
                            color: #ff9900;

                            /* 半宽 + 溢出隐藏 */
                            width: 30%;
                            overflow: hidden;
                        }

                    }
                }

                /* 价格 */
                >.price {
                    color: #ff6600;

                    >span:nth-child(2) {
                        font-size: 22px;
                        margin-left: -5px;
                    }
                }
            }

            /* 被鼠标覆盖（注意和未覆盖时的li属同级） */
            >li:hover {
                background-color: #f0f0f0;
            }
        }

    }

}

@知识链接

• 浮动与清除
• 定位/绝对定位
• Sass的使用
• 弹性盒布局

@获取源码

猛戳此处获取老师源码！ 更高处见！