浮动练习-内地剧静态页面
实现代码：
css模块：*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
/*-------------------------------*/
/*底部的标签*/
.root{
width: 1200px;
/*background-color: palegoldenrod;*/
margin: 0 auto;
}
/*-------------*/
/*标题*/
.title{
/*background-color: palegreen;*/
padding:20px 0;
color: gray;
}
.title span:first-child{
font-size: 30px;
font-weight: bold;
}
.title span{
margin-right: 13px;
}
.title span:nth-child(8){
margin-right: 0;
}
/*-------------------------------------*/
.content{
/*background-color: red;*/
overflow: hidden;
}
/*内容左侧*/
.left{
background-color: lightgray;
width: 370px;
float: left;
margin-right: 10px;
padding-bottom: 4px;
}
.left img{
width: 370px;
}
p{
padding: 5px 0 0 10px;
font-size: 15px;
}
p+p{
color: gray;
padding-bottom: 5px;
font-size: 14px;
}
/*----------------*/
/*中间模块*/
.center{
width: 585px;
/*background-color: papayawhip;*/
float: left;
}
.box{
width: 180px;
background-color: lightgray;
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
.box img{
width:180px;
}
/*------------------------*/
.right{
width: 235px;
background-color: lightgray;
float: left;
padding-bottom: 6px;
}
.right img{
width: 235px;
}
.right li{
padding: 5px;
font-size: 14px;
}
.right li:first-of-type{
border-bottom: 1px dotted gray;
font-size: 17px;
margin: 0 5px;
padding-bottom: 10px;
}
/*-------------*/
.footer .center{
overflow: hidden;
width: 1200px;
/*background-color: saddlebrown;*/
}
.footer .center .box{
margin-right: 24px;
}
.footer .center .box:last-child{
margin-right: 0;
}
html模块：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/作业.css"/>
</head>
<body>
<!--底部的div-->
<div class="root">
<!--div 上面的模块-->
<div class="header">
<!--标题模块-->
<div class="title">
<span>内地剧</span>
<span>爱情</span>
<span>|</span>
<span>古装</span>
<span>|</span>
<span>喜剧</span>
<span>|</span>
<span>更多</span>
<span>></span>
</div>
<!--内容-->
<div class="content">
<!--左边-->
<div class="left">
<img src="img/img1.jpg" alt="" />
<p>大学生来了</p>
<p>吴莫愁现场气息教学 气哭薛之谦</p>
</div>
<!--中间-->
<ul class="center">
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
</ul>
<!--右边-->
<ul class="right">
<img src="img/img3.jpg" alt="" />
<li>小S上演复古装魅惑歌舞</li>
<li>1.撒贝宁兔牙表情装可爱</li>
<li>2.Boom唱功震惊评审团</li>
<li>3.黄子韬出演至尊宝</li>
<li>4.Selina应采儿开撕男神</li>
<li>5.跑男十大精彩瞬间盘点</li>
</ul>
</div>
</div>
<!--下面的模块-->
<div class="footer">
<!--标题模块-->
<div class="title">
<span>内地剧</span>
<span>爱情</span>
<span>|</span>
<span>古装</span>
<span>|</span>
<span>喜剧</span>
<span>|</span>
<span>更多</span>
<span>></span>
</div>
<!--内容-->
<ul class="center">
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
<li class="box">
<img src="img/img2.jpg" alt="" />
<p>跨界歌王</p>
<p>巫启贤大唱情歌表白刘涛</p>
</li>
</ul>
</div>
</div>
</body>
</html>
