8项目通关前端/美团网布局项目08：完成推荐民宿

@效果预览

用户头像需要找准自己的绝对定位！

什么档次，怎敢与封面背景争辉？

@布局思路

• 标题栏使用上节中封装好的title-box样式；
• 使用ul+li+浮动制作横排折行效果；
• 单个li内部使用直排弹性盒，p标签内部文本左对齐；
• 小球相对于大图做绝对定位，定到右下角后继续调整bottom为负数使小球突破父盒子；

@HTML部分

<!-- 民宿推荐 -->
<div class="minsu">

    <!-- 标题盒子 直接猫眼电影中的样式  -->
    <div class="title-box">

        <!-- 用列表组织局部菜单 -->
        <ul>
            <!-- 这一组向左浮动 -->
            <li>推荐民宿</li>
            <li>天津</li>
            <li>济南</li>
            <li>大连</li>
            <li>太原</li>
            <li>石家庄</li>
            <li>秦皇岛</li>
            <li>呼和浩特</li>
            <li>潍坊</li>
            <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>
                <div class="img-box">
                    <!-- 大图占满父盒子尺寸 -->
                    <img class="big" src="./imgs/minsu.jpg" alt="">

                    <!-- 小图 稍后绝对定位到父盒子右下角 -->
                    <img class="small" src="./imgs/host.jpg" alt="">
                </div>

                <!-- 这些P元素全部text-align:left -->
                <p class="summary">【THE ONE】佛罗伦萨小镇威尼都430m城际站高铁站860m奶茶清新风/环保民宿/万达影城200m巨幕投影</p>
                <p class="info">整套1居室·可住3人 | 佛罗伦萨小镇度假区</p>
                <p class="price"><span>￥</span><span>228</span></p>
            </li>

            <!-- 一样的li * 5 -->
            ...
        </ul>
    </div>

</div>

@SCSS部分

封装好的标题盒子样式

上节猫眼电影中业已完成，此处再亮个相✌️

css/common.scss

/* 通用标题盒子 */
.title-box {
    /* 尺寸 */
    height: 45px;

    /* 背景与文字颜色 */
    background-color: #fb3f62;
    color: #fff;

    // 顶部有圆角，底部无
    border-radius: 5px 5px 0 0;

    // 左右有内边距
    padding: 0 18px;

    /* 标题盒子内部的水平菜单 */
    >ul {
        height: 100%;

        >li {

            // 清一色左浮动
            float: left;

            /* 文字垂直居中 */
            height: 100%;
            line-height: 45px;

            /* 细节 */
            font-size: 14px;
            margin-right: 14px;

            /* 文字白色 */
            >a {
                color: white;
            }
        }

        /* 任何一个菜单覆盖时变手 */
        >li:hover {
            cursor: pointer;
        }

        /* 对第一个菜单项应用特殊字体 */
        >li:first-child {
            font-family: MFShanghei;
            font-size: 18px;
            margin-right: 20px;
        }

        /* 最后一个li（即“全部>”） */
        >li:last-child {

            // 向右浮动
            float: right;
            margin-right: 0;

            /* 设置图标 */
            .iconfont {
                font-size: 14px;
                margin-left: -5px;
            }
        }
    }
}

单行文本+省略号

/* 文本不折行 + 省略号 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

定位到右下角并突破底边

>.img-box {
    // 稍后小球要相对当前盒子做绝对定位
    position: relative;

    >img.small {
        /* 定位右下角 + 突破bottom */
        position: absolute;
        right: 15px;
        bottom: -25px;
    }
}

完整样式

css/index.scss

/* 民宿推荐 */
.minsu {

    /* box属性 */
    margin-top: 40px;
    margin-bottom: 40px;

    /* title-box的主体样式来自common.scss中 此处覆盖一下背景 */
    >.title-box {
        background-color: #f2bf47;
    }

    /* 主体内容 */
    >.content-box {

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

        /* 列表 */
        >ul {

            /* 民宿样品 */
            >li {
                /* box属性 */
                width: 371px;
                height: 315px;
                box-sizing: border-box;
                margin: 19px 0 0 18px;

                /* 横排+自动折行 */
                float: left;

                /* 文本属性 */
                text-align: left;

                /* 图片行 */
                >.img-box {
                    /* box */
                    width: 100%;
                    height: 209px;

                    // 稍后小球要相对当前盒子做绝对定位
                    position: relative;

                    /* 大图圆角 + 占满容器 */
                    >img.big {
                        width: 100%;
                        border-radius: 5px;
                    }

                    /* 小图弄成球 + 绝对定位到右下角 + 继续向下突破父盒子 */
                    >img.small {

                        /* box */
                        width: 50px;
                        border: 2px solid white;
                        border-radius: 50%;

                        /* 定位并突破bottom */
                        position: absolute;
                        right: 15px;
                        bottom: -25px;
                    }
                }

                /* 摘要行 */
                >p.summary {
                    /* box */
                    width: 292px;
                    margin-top: 25px;

                    /* 文本不折行 + 省略号 */
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;

                    /* text */
                    font-size: 16px;
                    color: #222;
                }

                /* 信息行 */
                >p.info {
                    font-size: 12px;
                    color: #999;
                    margin-top: 10px;
                }

                /* 价格行 */
                >p.price {
                    color: #f60;
                    margin-top: 10px;

                    >span:first-child {
                        font-size: 14px;
                    }

                    >span:last-child {
                        font-size: 22px;
                    }
                }
            }
        }

    }

}

@知识链接

• 浮动与清除
• 定位/绝对定位
• Sass的使用

@获取源码

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