29. 浮动练习

29. 浮动练习

demos 4. 浮动练习

练习猫眼电影的电影页，主体部分的布局效果。

29. 浮动练习 - 图1

下面将该页面分为4个模块来依次实现。

导航区域
菜单区域
电影区域
翻页区域

1. 导航区域

29. 浮动练习 - 图2

结构

<!-- 导航区域 -->
<nav class="nav">
    <a href="" class="active">正在热映</a>
    <a href="">即将上映</a>
    <a href="">经典影片</a>
</nav>

样式

实现步骤：

设置装饰类属性，比如：区域背景色，文字颜色，字体大小等。
布局，将元素调整到合适位置。
细节补充，选中时的样式，鼠标悬停时的样式。

/* 导航区域 */
.main .nav {
    height: 60px;
    line-height: 60px;
    font-size: 0;
    text-align: center;
    background-color: #47464a;
}

.main .nav a {
    padding: 0 40px;
    font-size: 16px;
    color: #999;
}

.main .nav a:hover {
    color: #fff;
}

.main .nav a.active {
    color: #ef4238;
    cursor: default;
    /* 默认指针，通常是箭头。 */
}

写样式的时候，使用类名来选中HTML元素，这样做的其中一个好处就是我们之后可以自由修改对应HTML元素的类名，而不用担心选择器会失效。

2. 菜单区域

29. 浮动练习 - 图3

先确定容器的位置

<ul class="menus">

</ul>

.main .menus {
    width: 1120px;
    height: 210px;
    background-color: #666;
    margin: 40px auto;
}

29. 浮动练习 - 图4

分析该区域的组成

29. 浮动练习 - 图5

3块组成区域，它们的结构不布局，和样式都是一样的，所以只要写一个区域的样式，复用即可。

每一块区域由可以细分为两个子区域，left和right。

<!-- 2. 菜单区域 -->
<div class="menus">
    <div class="menu-item clearfix">
        <div class="left">类型 :</div>
        <ul class="right clearfix">
            <li class="active"><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>
            <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>
            <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>
            <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>
    </div>
    <div class="menu-item clearfix">
        <div class="left">区域 :</div>
        <ul class="right clearfix">
            <li class="active"><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>
            <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>
            <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>
    </div>

    <div class="menu-item clearfix">
        <div class="left">年代 :</div>
        <ul class="right clearfix">
            <li class="active"><a href="">全部</a></li>
            <li><a href="">2021</a></li>
            <li><a href="">2020</a></li>
            <li><a href="">2019</a></li>
            <li><a href="">2018</a></li>
            <li><a href="">2017</a></li>
            <li><a href="">2016</a></li>
            <li><a href="">2015</a></li>
            <li><a href="">2014</a></li>
            <li><a href="">2013</a></li>
            <li><a href="">2012</a></li>
            <li><a href="">2011</a></li>
            <li><a href="">2000-2010</a></li>
            <li><a href="">90年代</a></li>
            <li><a href="">80年代</a></li>
            <li><a href="">70年代</a></li>
            <li><a href="">更早</a></li>
        </ul>
    </div>
</div>

/* 2. 菜单区域 */
.main .menus {
    box-sizing: border-box;
    width: 1120px;
    padding: 0 20px;
    border: 1px solid #e5e5e5;
    margin: 40px auto;
    line-height: 1.5;
}

.main .menus .menu-item {
    padding: 10px 0;
}

.main .menus .menu-item+.menu-item {
    border-top: 1px dotted #e5e5e5;
}

.main .menus .menu-item .left {
    float: left;
    color: #999;
}

.main .menus .menu-item .right {
    margin-left: 40px;
}

.main .menus .menu-item .right li {
    float: left;
    padding: 3px 9px;
    margin-left: 12px;
}

.main .menus .menu-item .right li:hover {
    color: #f34d41;
}

.main .menus .menu-item .right li.active {
    border-radius: 20px;
    color: #fff;
    background-color: #f34d41;
    cursor: default;
}

3. 电影区域

先写一项，然后再快速生成30项，再进行微调。

<!-- 3. 电影区域 -->
<div class="movies clearfix">
    <div class="movie-item">
        <!-- 电影海报 -->
        <div class="movie-poster">
            <a href="">
                <img src="./img/test.jpg" alt="名侦探柯南：绯色的子弹">
            </a>
        </div>
        <!-- 电影名 -->
        <div class="movie-name">
            <a href="">
                名侦探柯南：绯色的子弹
            </a>
        </div>
        <!-- 电影评分 -->
        <div class="movie-score">8.3</div>
    </div>
    <!-- div.movie-item*30>(div.movie-poster>a>img[src="./img/test.jpg"])+(div.movie-name>a>{名侦探柯南：绯色的子弹})+(div.movie-score>{8.3}) -->
    <!-- div.movie-item*30>(div.movie-poster>a>img[src="./img/test.jpg"][alt="名侦探柯南：绯色的子弹"])+(div.movie-name>a>{名侦探柯南：绯色的子弹})+(div.movie-score>{8.3}) -->
</div>

/* 3. 电影区域 */
.main .movies {
    width: 1120px;
    margin: 0 auto;
}

.main .movies .movie-item {
    float: left;
    width: 160px;
    margin-top: 30px;
    margin-right: 30px;
    text-align: center;
}

.main .movies .movie-item:nth-child(6n){
    margin-right: 0;
}

.main .movies .movie-item .movie-poster img {
    width: 160px;
    height: 220px;
}

.main .movies .movie-item .movie-name {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main .movies .movie-item .movie-score {
    margin-top: 10px;
    font-size: 22px;
    font-style: italic;
    color: #ffb400;
}

.main .movies .movie-item .movie-score::first-letter {
    font-size: 24px;
}

4. 翻页区域

翻页区域的样式，可以提取出来，放到 common.css 文件中，作为公共样式，以便后续复用。

<!-- 4. 翻页区域 -->
<div class="pager">
    <a href="">上一页</a>
    <a href="" class="active">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
    <a href="">10</a>
    <a href="">下一页</a>
</div>

.pager {
    margin-top: 30px;
    margin-bottom: 80px;
    text-align: center;
}

.pager a {
    box-sizing: border-box;
    padding: 5px 10px;
    margin: 0 4px;
    border: 1px solid #d8d8d8;
}

.pager a:hover {
    border-color: #ef4238;
}

.pager a.active {
    border-color: #ef4238;
    color: #fff;
    background-color: #ef4238;
}