HTML CSS 浮动练习（仿猫眼电影）

这是自己（入门小白）手敲的一个小小的练习，也是用到了基础的html和css知识。页面不是很齐全，因为毕竟是个小练习，分享给大家一起学习。（完整源码在最下面）

效果图如下：

 

 首先咱们需要创建一个网页movie.html,css文件夹和img文件夹。

css文件夹当中需要建一个reset.css来重新定义标签样式防止浏览器样式不同。

重置代码如下:

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q:before,
q::after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

接下来我们来制作movie.html，我的做法是分为两部分来做。一个大区域main（自己命名）分三部分nav和container还有pager页数。

第一部分就是nav菜单部分

 <div class="main">
        <!--菜单-->
        <nav class="nav">
            <a href="" class="select">正在热映</a>
            <a href="#">即将上映</a>
            <a href="#">经典影片</a>
        </nav>
 </div>

创建movie.css对nav进行修饰

.main {
    line-height: 1.5;
}

.main .nav {
    height: 60px;
    background: #47464a;
    text-align: center;
    line-height: 60px;
}

.main .nav a {
    margin: 0 38px;
}

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

.main .nav a.select {
    color: #ef4238;
}

完成后的效果

然后做第二个部分container，注意两个部分都在main盒子当中。

我们先做选项区域choose-area，这可以用ul li列表来做，分为左边left和right。

<div class="container">
            <div class="choose-area">
                <div class="choose-item clearfix">
                    <div class="left ">类型:</div>
                    <div class="right">
                        <ul>
                            <li class="select"><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>
            </div>
</div>

其他的都是一样的，复制粘贴一下，只需要把名称改一下（后面有全部的源码）。

然后去movie.css去修饰这部分，先给container设置宽度（这里可以自行测量根据不一样的页面），choose-area的边框以及位置。

.main .container {
    width: 1120px;
    margin: 0 auto;
}

.main .container .choose-area {
    border: 1px solid #e5e5e5;
    margin: 40px 0;
    font-size: 14px;
    padding: 0 30px;
}

再然后设置choose-item，需要用到的是浮动，no-line的意思是第三个choose-item下边没有下划线，select是被选中的元素会变成背景颜色是橙色，hover就是鼠标悬停的时候字体变化的颜色。

.main .container .choose-area .choose-item {
    margin: 1em 0;
    border-bottom: 1px solid #e5e5e5;
}

.main .container .choose-area .choose-item.no-line {
    border: none;
}

.main .container .choose-area .choose-item .left {
    float: left;
    color: #999;
}

.main .container .choose-area .choose-item .right {
    float: left;
    width: 1000px;
}

.main .container .choose-area .choose-item .right li {
    float: left;
    margin: 0 9px;
    padding: 0 6px;
}

.main .container .choose-area .choose-item .right li:hover {
    color: #ef4238;
}

.main .container .choose-area .choose-item .right li.select {
    background: #ef4238;
    color: #fff;
    border-radius: 15px;
}

因为用浮动做网页可能会造成我们布局有一些问题，盒子会挤下去，对页面不整齐，这时候我们就要用到清除浮动了。clearfix需要加在choose-item的div上面。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

写好后的效果是（源码在最底部）

 接下来是电影movies这块，用到3个div盒子第一个是海报、图片poster，第二个是片名name，第三个是评分。这是一个电影，多个的话复制粘贴换一下图片和名字就行了。

<div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/1.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">一直一直都很喜欢你</a>
                    </div>
                    <div class="score">暂无评分</div>
                </div>

去movie.css设置样式这一部分样式。：nth-child()表示可以修改父元素中子元素的样式，我这里的作用是设置6的倍数的子元素清除margin-right元素，就能使排布页面正常占满空间，::first-letter表示第一个字母大写，这里是设置评分，字体风格是斜体italic。

.main .container .movies .movie-item {
    float: left;
    width: 160px;
    margin: 10px 32px 10px 0px;
}

.main .container .movies .movie-item .poster img {
    width: 100%;
    height: 100%;
}

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

.main .container .movies .movie-item .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    text-align: center;
}

.main .container .movies .movie-item .score {
    color: #ffb400;
    text-align: center;
    line-height: 2.5;
    font-style: italic;
}

.main .container .movies .movie-item .score::first-letter {
    font-size: 1.5em;
}

效果图

 

 最后一个部分是pager，是最简单的一部分，movie.html代码如下

<div class="pager">
                <a href="">上一页</a>
                <a href="" class="select">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="">下一页</a>
            </div>

 新建一个common.css,在这里面设置页脚。

.pager {
    margin: 2em 0;
    text-align: center;
}

.pager a {
    border: 1px solid #d8d8d8;
    padding: 5px 10px;
}

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

.pager a.select {
    background: #ef4238;
    color: #fff;
    border: none;
}

效果图

接下来是完整的页面代码

movie.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在热映-猫眼电影</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/movie.css">
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <div class="main">
        <!--菜单-->
        <nav class="nav">
            <a href="" class="select">正在热映</a>
            <a href="#">即将上映</a>
            <a href="#">经典影片</a>
        </nav>
        <div class="container">
            <div class="choose-area">
                <div class="choose-item clearfix">
                    <div class="left ">类型:</div>
                    <div class="right">
                        <ul>
                            <li class="select"><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>
                <div class="choose-item clearfix ">
                    <div class="left ">年代:</div>
                    <div class="right">
                        <ul>
                            <li class="select"><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>
                <div class="choose-item clearfix no-line">
                    <div class="left ">地区:</div>
                    <div class="right">
                        <ul>
                            <li class="select"><a href="">全部</a></li>
                            <li><a href="">2022以后</a></li>
                            <li><a href="">2022</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>
            </div>

            <div class="movies">
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/1.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">一直一直都很喜欢你</a>
                    </div>
                    <div class="score">暂无评分</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/2.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">人生大事</a>
                    </div>
                    <div class="score">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/3.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">冲出地球</a>
                    </div>
                    <div class="score">8.8</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/4.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">独行月球</a>
                    </div>
                    <div class="score">暂无评分</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/5.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">神探大战</a>
                    </div>
                    <div class="score">9.0</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/6.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">隐入尘烟</a>
                    </div>
                    <div class="score">9.2</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/7.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">一周的朋友</a>
                    </div>
                    <div class="score">8.0</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/8.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">遇见你</a>
                    </div>
                    <div class="score">暂无评分</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/9.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">外太空的莫扎特</a>
                    </div>
                    <div class="score">8.5</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/10.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">侏罗纪世界3</a>
                    </div>
                    <div class="score">8.0</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/11.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">你是我的春天</a>
                    </div>
                    <div class="score">9.1</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/12.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">我们的样子像极了爱情</a>
                    </div>
                    <div class="score">8.2</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/13.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">明日战纪</a>
                    </div>
                    <div class="score">8.0</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/14.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">开心超人之勇敢的心</a>
                    </div>
                    <div class="score">8.5</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/15.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">迷你世界之觉醒</a>
                    </div>
                    <div class="score">9.0</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/16.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">海底小纵队</a>
                    </div>
                    <div class="score">8.7</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/17.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">长津湖</a>
                    </div>
                    <div class="score">9.5</div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href=""><img src="./img/18.jpg" alt=""></a>
                    </div>
                    <div class="name">
                        <a href="">奇迹·笨小孩</a>
                    </div>
                    <div class="score">9.5</div>
                </div>

            </div>

            <div class="pager">
                <a href="">上一页</a>
                <a href="" class="select">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="">下一页</a>
            </div>
        </div>
    </div>
</body>

</html>

movie.css

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.main {
    line-height: 1.5;
}

.main .nav {
    height: 60px;
    background: #47464a;
    text-align: center;
    line-height: 60px;
}

.main .nav a {
    margin: 0 38px;
}

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

.main .nav a.select {
    color: #ef4238;
}

.main .container {
    width: 1120px;
    margin: 0 auto;
}

.main .container .choose-area {
    border: 1px solid #e5e5e5;
    margin: 40px 0;
    font-size: 14px;
    padding: 0 30px;
}

.main .container .choose-area .choose-item {
    margin: 1em 0;
    border-bottom: 1px solid #e5e5e5;
}

.main .container .choose-area .choose-item.no-line {
    border: none;
}

.main .container .choose-area .choose-item .left {
    float: left;
    color: #999;
}

.main .container .choose-area .choose-item .right {
    float: left;
    width: 1000px;
}

.main .container .choose-area .choose-item .right li {
    float: left;
    margin: 0 9px;
    padding: 0 6px;
}

.main .container .choose-area .choose-item .right li:hover {
    color: #ef4238;
}

.main .container .choose-area .choose-item .right li.select {
    background: #ef4238;
    color: #fff;
    border-radius: 15px;
}

.main .container .movies .movie-item {
    float: left;
    width: 160px;
    margin: 10px 32px 10px 0px;
}

.main .container .movies .movie-item .poster img {
    width: 100%;
    height: 100%;
}

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

.main .container .movies .movie-item .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    text-align: center;
}

.main .container .movies .movie-item .score {
    color: #ffb400;
    text-align: center;
    line-height: 2.5;
    font-style: italic;
}

.main .container .movies .movie-item .score::first-letter {
    font-size: 1.5em;
}

common.css

.pager {
    margin: 2em 0;
    text-align: center;
}

.pager a {
    border: 1px solid #d8d8d8;
    padding: 5px 10px;
}

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

.pager a.select {
    background: #ef4238;
    color: #fff;
    border: none;
}

reset.css

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q:before,
q::after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
    color: inherit;
}