实现代码：
QQ音乐.css:
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
body{
background-color: #f2f2f3;
}
ul{
/*取消列表的黑点*/
list-style: none;
}
/*---------------------------*/
/*底部*/
.root{
width: 1200px;
margin: 50px auto;
/*background-color: salmon;*/
}
/*设置标题*/
.root h1{
text-align: center;
letter-spacing: 20px;
margin-bottom: 20px;
}
/*------------------------------*/
.type{
background-color: yellow;
/*overflow: hidden;*/
height: 50px;
}
.type .btn, .type-title{
float: left;
}
.btn{
background-color: lightgray;
border: 1px solid gray;
padding: 6px 10px;
}
.type-title{
background-color: palegoldenrod;
width: 1028px;
text-align: center;
padding-top: 6px;
}
.type-title a{
margin: 0 20px;
color: gray;
}
.type-title a:hover{
color: #31C27C;
}
.type-title a:first-child{
color: #31c27c;
}
/*----------------------------*/
/*内容模块*/
.content{
margin-top: 30px;
/*background-color: paleturquoise;*/
/*overflow: hidden;*/
}
/*具体的小模块*/
.box{
width: 386px;
height: 100px;
/*background-color: palevioletred;*/
font-size: 14px;
padding-bottom: 20px;
border-bottom: 1px solid gainsboro;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.box:nth-child(3n){
margin-right: 0;
}
.box img{
width: 100px;
float: left;
}
.middle{
float: left;
padding-top: 25px;
margin-left: 15px;
}
.middle p:last-child{
color: gray;
}
.time{
float: right;
height: 100px;
line-height: 100px;
margin-right: 20px;
color: gray;
}
01QQ音乐.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QQ音乐</title>
<link rel="stylesheet" type="text/css" href="css/QQ音乐.css"/>
</head>
<body>
<!--底部的标签-->
<div class="root">
<!--标题-->
<h1>新歌首发</h1>
<!--分类-->
<div class="type">
<!--左侧播放按钮-->
<div class="btn">
播放全部
</div>
<!--分类详情-->
<div class="type-title">
<a href="###">最新</a>
<a href="###">内地</a>
<a href="###">港台</a>
<a href="###">欧美</a>
<a href="###">韩国</a>
<a href="###">日本</a>
</div>
</div>
<!--内容模块-->
<ul class="content">
<li class="box">
<img src="img/QQ1.jpg"/>
<div class="middle">
<p>哈哈哈哈呵呵呵呵呵</p>
<p>呵呵呵呵呵</p>
</div>
<div class="time">04:17</div>
</li>
<li class="box">
<img src="img/QQ1.jpg"/>
<div class="middle">
<p>哈哈哈哈呵呵呵呵呵</p>
<p>呵呵呵呵呵</p>
</div>
<div class="time">04:17</div>
</li>
<li class="box">
<img src="img/QQ1.jpg"/>
<div class="middle">
<p>哈哈哈哈呵呵呵呵呵</p>
<p>呵呵呵呵呵</p>
</div>
<div class="time">04:17</div>
</li>
<li class="box">
<img src="img/QQ1.jpg"/>
<div class="middle">
<p>哈哈哈哈呵呵呵呵呵</p>
<p>呵呵呵呵呵</p>
</div>
<div class="time">04:17</div>
</li>
<li class="box">
<img src="img/QQ1.jpg"/>
<div class="middle">
<p>哈哈哈哈呵呵呵呵呵</p>
<p>呵呵呵呵呵</p>
</div>
<div class="time">04:17</div>
</li>
<li class="box">
<img src="img/QQ1.jpg"/>
<div class="middle">
<p>哈哈哈哈呵呵呵呵呵</p>
<p>呵呵呵呵呵</p>
</div>
<div class="time">04:17</div>
</li>
</ul>
</div>
</body>
</html>
网友评论