8项目通关前端/美团网布局项目07：完成猫眼电影

@效果预览

在那个年代，弹性盒、网格布局都还在混沌中孕育...

盒模型、浮动、定位

孤独地统治着世界...

---

@布局思路

• 标题盒子，ul+li水平浮动，更多向右浮动；
• 内容盒子，ul+li水平浮动不折行（给与ul足够宽度并隐藏溢出部分）；
• 在电影条目盒子中，使用绝对定位将细节盒子置于父盒子的四角；
• 余众都是卡拉蜜；

---

@HTML部分

标题盒子

<!-- 猫眼电影 -->
<div class="movie">

    <!-- 标题盒子 -->
    <div class="title-box">

        <!-- 用列表组织局部菜单 -->
        <ul>
            <!-- 这一组向左浮动 -->
            <li>猫眼电影</li>
            <li>正在热映</li>
            <li>即将上映</li>

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

    <!-- 横排轮播图盒子 -->
    ...

</div>

横排轮播图

<!-- 猫眼电影 -->
<div class="movie">

    <!-- 标题盒子 -->
    ...

    <!-- 横排轮播图盒子 -->
    <div class="content-box">

        <!-- 用列表组织多个电影盒子 -->
        <ul class="clearfix">

            <!-- 一个电影盒子 背景图为电影海报 -->
            <li>
                <!-- 利用绝对定位放置到当前父盒子的左上角 -->
                <div class="abs-lt clearfix">
                    <span class="tag">IMAX</span>
                    <span class="tag">3D</span>
                </div>

                <!-- 绝对定位到父盒子左下角 -->
                <div class="abs-lb">
                    <div>
                        <span class="small"><b>观众评</b></span>
                        <span class="score"><b>9.4</b></span>
                    </div>
                    <span>保你平安</span>
                </div>

                <!-- 绝对定位到父盒子右下角 -->
                <div class="abs-rb">
                    <span>购票</span>
                </div>
            </li>

            <!-- 重复放置多个盒子 -->
            ...

        </ul>
    </div>
</div>

@SCSS部分

预设字体

css/reset.css

/* 定义字体名称+字体文件（美术提前准备好） */
@font-face {
    font-family: MFShangHei;
    src: url('../files/MFShangHei-Regular.woff')
}

封装标题盒子样式

↑↑↑ 标题盒子的样式改改背景色就可以复用到狠多地方，无情封装提取之！😈😈

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;
            }
        }
    }
}

四角定位类预设

css/common.scss

/* 绝对定位到父盒子左上 */
.abs-lt {
    position: absolute;
    left: 0;
    top: 0;
}

/* 绝对定位到父盒子左下 */
.abs-lb {
    position: absolute;
    left: 0;
    bottom: 0;
}

/* 绝对定位到父盒子右上 */
.abs-rt {
    position: absolute;
    right: 0;
    top: 0;
}

/* 绝对定位到父盒子右下 */
.abs-rb {
    position: absolute;
    right: 0;
    bottom: 0;
}

电影细节

.movie {

    /* 根据设计效果图锁定尺寸 */
    width: 1190px;
    height: 354px;
    box-sizing: border-box;

    /* 上下margin */
    margin: 30px auto;
    margin-top: 20px;

    /* 不允许显示内容区的水平滚动条 */
    >.content-box::-webkit-scrollbar {
        width: 0 !important
    }

    >.content-box {
        // height: 310px;
        background-color: white;

        /* 边框下方有圆角 */
        border: 1px solid #e5e5e5;
        border-radius: 0 0 4px 4px;
        border-top: none;

        padding: 12px 15px;

        // 溢出部分隐藏（海报还有第二页）
        overflow: hidden;

        >ul {
            // 根据多页电影海报计算而来 此处先暴力写死
            width: 2000px;

            >li {

                /* 设计效果图尺寸 */
                width: 215px;
                height: 300px;

                // 左浮 水平排列
                float: left;

                // 圆角
                border-radius: 5px;
                margin-right: 19px;

                // 稍后子元素要相对于当前盒子做四角定位
                position: relative;

                // border: 1px solid black;
                color: white;

                // 海报设置为当前盒子背景
                background: url("../imgs/huilangting.jpg") no-repeat 0 0;

                // 背景恰好覆盖住盒子
                background-size: cover;

                // >img {
                //     width: 100%;
                // }

                /* IMAX 3D标签 */
                .tag {
                    background-color: #17a6ff;
                    padding: 5px;
                    float: left;
                    font-family: MFShangHei;
                    font-size: 10px;
                }

                /* 微调一下四角的边距 */
                .abs-lt {
                    top: 10px;
                    left: -6px;
                }

                /* 微调四角边距 + 一些细节 */
                .abs-lb {
                    left: 10px;
                    bottom: 10px;

                    font-size: 16px;
                    .small {
                        font-size: 12px;
                    }

                    .score {
                        color: #fd7a24;
                    }
                }

                /* 微调四角边距 + 一些细节 */
                .abs-rb {
                    right: 10px;
                    bottom: 10px;

                    >span {
                        font-size: 14px;
                        background-color: #ff4949;
                        color: white;
                        padding: 2px 12px 3px;
                        border-radius: 15px;
                    }
                }
            }

            /* 电影被覆盖时变手 */
            >li:hover {
                cursor: pointer;
            }
        }
    }
}

@知识链接

• 浮动与清除
• 定位/绝对定位

@获取源码

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