前言
按照猫眼电影的页面来仿照
写完之后又去看了老师写的代码来加深理解
bug还是有的，不过在我机智的修改下还是完成了
如果后期页面前后端联动起来以后可能会出现BUG，不过呢，我现在学的是前端css，所以我的任务是圆满完成了
下面是效果图：
![图片[1]-CSS 浮动练习 笔记-九七博客](https://pic.imgdb.cn/item/663f2ee70ea9cb1403e25d40.png)
练习源代码（代码可能存在一定的问题，原谅我不会英文class写的有点“自动加密”/捂脸）：
[zd-plane title=”Html代码”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动练习</title>
<link rel="stylesheet" href="law.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="reset.css">
</head>
<body>
<!-- 头部导航页 -->
<div class="adiv clearfix">
<a href="" class="chosen">正在热映</a>
<a href="">即将上映</a>
<a href="">经典影片</a>
</div>
<!-- 中间内容部分 -->
<div class="a-div clearfix">
<!-- 第一块内容 -->
<div class="b-div clearfix">
<ul class="c-div clearfix">
<div class="d-div clearfix">类型：</div>
<li class="xuanzhong"><a href="">Lorem.</a></li>
<li><a href="">Culpa.</a></li>
<li><a href="">Doloribus?</a></li>
<li><a href="">Provident?</a></li>
<li><a href="">Distinctio.</a></li>
<li><a href="">Natus!</a></li>
<li><a href="">Repudiandae.</a></li>
<li><a href="">Voluptas.</a></li>
<li><a href="">Debitis!</a></li>
<li><a href="">Facilis?</a></li>
<li><a href="">Blanditiis.</a></li>
<li><a href="">Necessitatibus.</a></li>
<li><a href="">Beatae!</a></li>
<li><a href="">Consequuntur.</a></li>
<li><a href="">Magnam?</a></li>
<li><a href="">Harum.</a></li>
<li><a href="">Velit.</a></li>
<li><a href="">Iste?</a></li>
<li><a href="">Repellat.</a></li>
<li><a href="">Quibusdam.</a></li>
</ul>
<ul class="c-div">
<div class="d-div clearfix">区域：</div>
<li class="xuanzhong"><a href="">Lorem.</a></li>
<li><a href="">Voluptates.</a></li>
<li><a href="">Aperiam!</a></li>
<li><a href="">Dolor?</a></li>
<li><a href="">Velit?</a></li>
<li><a href="">Itaque!</a></li>
<li><a href="">Magni!</a></li>
<li><a href="">Minima?</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Nostrum!</a></li>
<li><a href="">Accusamus.</a></li>
<li><a href="">Quasi.</a></li>
<li><a href="">Rerum!</a></li>
<li><a href="">Laudantium?</a></li>
<li><a href="">Quibusdam.</a></li>
<li><a href="">In?</a></li>
<li><a href="">Iusto.</a></li>
<li><a href="">Sed.</a></li>
</ul>
<ul class="c-div clearfix">
<div class="d-div clearfix">年代：</div>
<li class="xuanzhong"><ahref="">Lorem.</a></li>
<li><a href="">Officia.</a></li>
<li><a href="">Vel?</a></li>
<li><a href="">Odio.</a></li>
<li><a href="">Provident.</a></li>
<li><a href="">Ipsa.</a></li>
<li><a href="">Fugit.</a></li>
<li><a href="">Est!</a></li>
<li><a href="">Dolorum.</a></li>
<li><a href="">Accusamus?</a></li>
<li><a href="">Est.</a></li>
<li><a href="">Obcaecati.</a></li>
<li><a href="">Voluptatum.</a></li>
<li><a href="">Modi!</a></li>
<li><a href="">Reprehenderit.</a></li>
</ul>
</div>
<!-- 第二块内容 -->
<div class="dadiv clearfix">
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
<ul class="ndiv clearfix">
<li class="stext">
<img src="img/test.jpg" >
<a href="">九龙城寨之围城</a>
<p>9.3</p>
</li>
</ul>
</div>
</div>
<div class="yediv">
<a href="">上一页</a>
<a href="" class="xzye">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">下一页</a>
</div>
</body>
</html>
[/zd-plane]
[zd-plane title=”CSS代码”]
/* 1*/
.adiv{
background-color: #47464a;
height: 60px;
width: 100%;
text-align: center;
}
.adiv a{
text-decoration: none;
color: #999;
font-size: 16px;
height: 60px;
line-height: 60px;
margin: 0 40px;
}
.adiv .chosen:visited{
color: #ef4238;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 2 */
.a-div{
width: 1200px;
margin: 0 auto;
}
.b-div{
border: 1px solid #e5e5e5;
padding: 0 20px;
width: 1120px;
margin-top: 40px;
}
.c-div{
padding: 10px 0;
margin: 5px 0;
}
.d-div{
height: 24px;
line-height: 24px;
float: left;
color: #999;
font-size: 14px;
}
.c-div li{
border-radius: 14px;
padding: 3px 9px;
display: inline-block;
margin-left: 5px;
}
.xuanzhong{
background:#f34d41;
color: #FFF;
padding: 3px 9px;
border-radius: 14px;
}
/* 3 */
.dadiv{
width: 1180px;
margin: 55px 0;
text-align: center;
color: #333;
line-height: 1.5;
padding: 0 20px;
}
.ndiv{
width: 160px;
float: left;
border:1px solid #efefef;
margin-right: 30px;
margin-bottom: 25px;
}
.ndiv .stext p{
font-style: oblique;
color: #ffb400;
}
.ndiv .stext p:first-letter{
font-size: 24px;
}
.yediv{
text-align: center;
}
.yediv a{
display: inline-block;
height: 30px;
font-size: 20px;
border: 1px solid #d8d8d8;
margin: 0 5px;
line-height: 30px;
text-align: center;
padding:0 12px;
}
.yediv .xzye{
background-color: #ef4238;
border-color: #ef4238;
color: #fff;
}
[/zd-plane]
© 版权声明
THE END
![[青龙面板] 阿里云香港轻量服务器抢购脚本-九七博客](https://imgchina97.s3.bitiful.net/2024/08/13/66baca69afd84.png)
暂无评论内容