<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
/* 版心 */
.w {
width: 1200px;
margin: 0 auto;
}
/* 装三个大盒子的背景 */
.recommend_bg {
height: 532px;
background: url(img/bg.jpg);
/* 不让h3和背景一起下来 */
overflow: hidden;
}
/* 装三个大盒子的盒子，已经调用了版心.w */
.recommend {
height: 532px;
/* 把h3撑下来 */
margin-top: 50px;
text-align: center;
}
/* 设置第一个盒子h3 */
.recommend h3 {
font-size: 30px;
text-align: center;
color: #333333;
background-color: red;
}
/* 设置中间第二个盒子 */
.recommmend_list {
height: 80px;
line-height: 80px;
background-color: yellow;
}
/* 把ul放到中间 */
.recommmend_list ul {
margin-left: 310px;
}
/* 让中间的每一个li向左浮动 */
.recommmend_list li {
float: left;
}
/* 设置li里面链接a的字体 */
.recommmend_list li a {
/* padding是挤开li之间的距离 */
padding: 0 25px;
font-size: 16px;
color: #343434;
}
/* 让鼠标经过li时，链接a颜色变成绿色 */
.recommmend_list li a:hover {
color: #31c27d;
}
/* 让导航里第一个“为你推荐”变成绿色 */
.recommmend_list .current a {
color: #31c27d;
}
/* 这是第三个盒子，设置装图片文字的盒子 */
.type_pic {
height: 330px;
overflow: hidden;
background-color: blue;
}
/* 让盒子完整的放下5个装图片文字的li盒子，这个要是不懂就问我 */
.recommend .type_pic ul{
width: 1220px;
}
/* 设置装图片和下面文字的li盒子的宽高 */
.recommend .type_pic ul li {
float: left;
width: 224px;
height: 300px;
/* 让li盒子间有距离 */
margin-right: 20px;
background-color: pink;
}
/* 设置图片下面链接a的字体 */
.type_pic li a {
font-size: 14px;
color: #010101;
}
/* 设置li里面装文字的p的文字 */
.type_pic li p {
font-size: 14PX;
color: #9a9a9a;
}
</style>
</head>
<body>
<div class="recommend_bg">
<!-- 装三个盒子的大盒子 -->
<div class="recommend w">
<!-- 第一个盒子用h3装 -->
<h3>歌单推荐</h3>
<!-- 第二个盒子用无序列表ul嵌套li，li里面装链接a -->
<div class="recommmend_list">
<ul>
<!-- 这里面的current是让当前文字显示绿色 -->
<li class="current"><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>
<!-- 这是第三个盒子是用ul嵌套li，li里面装了一个图片，一个a链接，和一个文字p -->
<div class="type_pic">
<ul>
<li>
<!-- 插入图片 -->
<img src="img/01.png" alt="">
<!-- a链接 -->
<a href="#">我们来谈一场，不分手的恋爱</a>
<!-- 文字用p标签 -->
<p>播放量:7.3万</p>
</li>
<li>
<img src="img/02.png" alt="">
<a href="#">我们来谈一场，不分手的恋爱</a>
<p>播放量:7.3万</p>
</li>
<li>
<img src="img/03.png" alt="">
<a href="#">我们来谈一场，不分手的恋爱</a>
<p>播放量:7.3万</p>
</li>
<li>
<img src="img/04.png" alt="">
<a href="#">我们来谈一场，不分手的恋爱</a>
<p>播放量:7.3万</p>
</li>
<li>
<img src="img/05.png" alt="">
<a href="#">我们来谈一场，不分手的恋爱</a>
<p>播放量:7.3万</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
|
收藏
淘帖
踩
