【前端学习之HTML&CSS】-- 视觉格式化模型之二 浮动 – 练习
本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程
前言
html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
在CSS的学习过程中，最重要的内容，主要包含属性值的计算过程、层叠继承、盒模型以及视觉格式化模型，本节博客继续之前学习的内容，主要负责视觉格式化模型中关于浮动的相关内容。
设计稿/原有样式
代码编辑
<!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/routine.css">
<link rel="stylesheet" href="./css/common.css">
</head>
<body>
<!-- 主区域 -->
<div class="main">
<!-- 导航栏 -->
<nav class="nav">
<!-- 可以使用div-ul-li，也可以使用HTML5中的nav -->
<a href="" class="selected">正在热映</a>
<a href="">即将上映</a>
<a href="">经典影片</a>
</nav>
<!-- 搜索栏、展示栏 -->
<div class="container">
<div class="choose-area">
<div class="choose-item clearfix">
<div class="left-ci">类型: </div>
<div class="right-ci">
<ul>
<li class="selected"><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>
<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-ci">区域: </div>
<div class="right-ci">
<ul>
<li class="selected"><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-ci">年代: </div>
<div class="right-ci">
<ul>
<li class="selected"><a href="">全部</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 clearfix">
<div class="movie-item">
<div class="poster">
<a href="https://www.maoyan.com/films/1254435">
<img src="https://p0.pipi.cn/mmdb/d2dad5925377e1300bcf3ed5dc51996a76f34.jpg?imageView2/1/w/218/h/300" alt="">
</a>
</div>
<div class="name">
<a href="https://www.maoyan.com/films/1254435">蜘蛛侠: 英雄无归</a>
</div>
<div class="score">7.9</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1309268">
<img src="https://p0.pipi.cn/mmdb/25bfd69a923f2a06d6b12dac78277e7ffdba2.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1309268">可不可以你也刚好喜欢我</a></div>
<div class="score">7.4</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://p0.pipi.cn/mmdb/25bfd69ad7c3385bf180779c8ca665bf97ce5.jpg?imageView2/1/w/218/h/300"><img src="https://p0.pipi.cn/mmdb/25bfd69ad7c3385bf180779c8ca665bf97ce5.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://p0.pipi.cn/mmdb/25bfd69ad7c3385bf180779c8ca665bf97ce5.jpg?imageView2/1/w/218/h/300">神秘海域</a></div>
<div class="score">9.0</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1300821"><img src="https://p0.pipi.cn/mmdb/25bfd6bec7e7e1030cb12da89b6f158d2d3ce.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1300821">花束般的恋爱</a></div>
<div class="score">9.0</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1377313"><img src="https://p0.pipi.cn/mmdb/d2dad5927a387addd2b53536fa8b20bd7d6d4.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1377313">青春变形记</a></div>
<div class="score">暂无评分</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1446115"><img src="https://p0.pipi.cn/mmdb/25bfd6be9abc7e8d3311e5bd9b6d287be0f28.png?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1446115">长津湖之水门桥</a></div>
<div class="score">9.6</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1405863"><img src="https://p0.pipi.cn/mmdb/25bfd68decdb12b53592351a40d2bc6da3453.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1405863">熊出没·重返地球</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1383307"><img src="https://p0.pipi.cn/mmdb/25bfd68de7adddddd2395b4c04f4737cd31fc.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1383307">奇迹·笨小孩</a></div>
<div class="score">9.5</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/345276"><img src="https://p0.pipi.cn/mmdb/25bfd68d2c99232c95c9fdf1751d0a06d6ff3.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/345276">十年一品温如言</a></div>
<div class="score">6.5</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1389048"><img src="https://p0.pipi.cn/mmdb/25bfd68d030ddd395bbe2ab4b3a40c81f0f19.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1389048">四海</a></div>
<div class="score">8.6</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1330292"><img src="https://p0.pipi.cn/mmdb/d2dad5927a3be15bf111e5d9575dcc7f58f2e.jpg?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1330292">大鱼海棠2</a></div>
<div class="score">暂无评分</div>
</div>
<div class="movie-item">
<div class="poster"><a href="https://www.maoyan.com/films/1445469"><img src="https://p0.pipi.cn/mmdb/25bfd6be339338e5bcddd27c26c671a1e1972.png?imageView2/1/w/218/h/300" alt=""></a></div>
<div class="name"><a href="https://www.maoyan.com/films/1445469">喜羊羊与灰太狼之筐出未来</a></div>
<div class="score">9.3</div>
</div>
</div>
<!-- pager -->
<div class="pager">
<a href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="" class="selected">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>
</div>
</div>
</body>
</html>
/* routine */
body{
color: #333;
}
.clearfix::after{
/* 解决高度坍塌 */
/* 那里高度坍塌，给他的父元素加上此属性 */
content: "";
display: block;
clear: both;
}
.main{
/* 没有很特别的地方，设置一些基本要求，如行高、文字大小等 */
line-height: 1.5;
}.main .nav{
height: 60px;
background-color: #47464a;
color: #999;
text-align: center;
line-height: 60px;
}
.main .nav a{
margin: 0 38px;
}
.main .nav a:hover{
color: #fff;
}
.main .nav a.selected{
/* 此处不能去掉a元素，如果去掉，当鼠标悬停时会变成白色 */
color: #ef4238;
}
.main .container{
width: 1120px;
/* 居中 */
margin: 0 auto;
}
.main .container .choose-area{
border: 1px solid #e5e5e5;
/* padding: 0 20px; */
margin: 40px 0;
font-size: 14px;
line-height: 30px;
padding: 0 30px;
}
.main .container .choose-area .choose-item{
margin: 1em 0;
border-bottom: 1px dotted #e5e5e5;
}
.main .container .choose-area .choose-item.no-line{
border: none;
}
.main .container .choose-area .choose-item .left-ci{
/* 给.main .container .choose-area .choose-item赋予clear */
float: left;
/* width: 60px;
text-align: right; */
color: #999;
}
.main .container .choose-area .choose-item .right-ci{
float: left;
/* 由于没有设置宽度，所以右边的框被文字撑满，到了下面 */
width: 1010px;
}
.main .container .choose-area .choose-item .right-ci li{
float: left;
margin: 0 9px;
padding: 0 6px;
}
.main .container .choose-area .choose-item .right-ci li:hover{
color: #ef4238;
}
.main .container .choose-area .choose-item .right-ci li.selected{
background-color: #ef4238;
color: #fff;
/* CSS3的圆角边框 */
border-radius: 14px;
}
.main .container .movies .movie-item{
/* 给movies赋予clear */
float: left;
width: 160px;
margin: 10px 32px 10px 0;
}
/* 伪类选择器，选中前面的第N个元素的样式 */
.main .container .movies .movie-item:nth-child(6n){
/* 这里选中的是第6、12、18等元素 */
margin-right: 0;
}
.main .container .movies .movie-item .poster a img{
width: 160px;
height: 220px;
}
.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{
text-align: center;
color: #ffb400;
line-height: 2.5;
font-style: italic;
}
/* 元素选择器，首字母大写 */
/* 这里的main、container、movies、score均为其他的选择器 */
.main .container .movies .movie-item .score::first-letter{
font-size: 1.5em;
}
/* common */
/* 通用样式 */
.main .container .pager{
margin: 2em 0;
text-align: center;
}
.main .container .pager a{
border: 1px solid #d8d8d8;
padding: 5px 10px;
margin: 0 3px;
}
.main .container .pager a:hover{
border-color: #ef4238;
}
.main .container .pager a.selected{
background-color: #ef4238;
color: #fff;
border: none;
}
实际效果展示
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
