01、布局
<!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="/css/layout.css">
</head>
<body>
<div class="nav">
<span>内地</span>
<a href="###">爱情</a>丨
<a href="###">古装</a>丨
<a href="###">喜剧</a>丨
<a href="###">更多 ></a>
</div>
<div class="wp clearfix">
<!-- 浮动布局 -->
<!-- 左边内容 start -->
<div class="l-cont">
<img src="/images/吴莫愁薛之谦.png" alt="">
<h3>大学生来了</h3>
<p>吴莫愁现场奇迹教学吴莫愁现场奇迹教学</p>
</div>
<!-- 左边内容 end -->
<!-- 中间内容 start -->
<div class="mid-cont">
<ul class="list clearfix">
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
</ul>
</div>
<!-- 中间内容 end -->
<!-- 右边内容 start -->
<div class="r-cont">
<img src="/images/小S.png" alt="">
<h3>小S古装魅惑小S古装魅惑小S古装魅惑</h3>
<ul class="r-list">
<li>1、小S古装魅惑小S古装魅惑</li>
<li>2、小S古装魅惑小S古装魅惑</li>
<li>3、小S古装魅惑小S古装魅惑</li>
<li>4、小S古装魅惑小S古装魅惑</li>
<li>5、小S古装魅惑小S古装魅惑</li>
</ul>
</div>
<!-- 右边内容 end -->
</div>
<div class="nav">
<span>内地</span>
<a href="###">爱情</a>丨
<a href="###">古装</a>丨
<a href="###">喜剧</a>丨
<a href="###">更多 ></a>
</div>
<ul class="list mid clearfix">
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
<li>
<a href="###">
<img src="/images/wlop1.jpg" alt="">
<span>跨界歌王</span>
<em>巫启贤大唱情歌表白刘涛</em>
</a>
</li>
</ul>
</body>
</html>
css样式
* {
margin: 0;
padding: 0;
}
body {
background:#e4e4e4;
}
ul,ol,li { list-style-type: none;}
a {
text-decoration: none;
color: #333;
}
.clearfix::after {
content: '';
clear: both;
display: block;
height: 0;
overflow: hidden;
}
/* 导航分类 */
.nav {
padding: 16px 0;
margin: 0 auto;
width: 1175px;
}
.nav * {
color: #808080;
}
.nav span {
font-size: 28px;
}
.nav a {
font-size: 15px;
padding: 0 15px;
}
/* 中间内容 */
.wp {
margin: 0 auto;
width: 1175px;
/* border: 1px #f00 solid; */
}
.l-cont,.mid-cont,.r-cont {
float: left;
height: 330px;
}
.l-cont {
width: 380px;
background: #ccc;
}
.mid-cont {
margin-left: 15px;
width: 600px;
/* background: #04be02; */
}
.r-cont {
width: 180px;
background:#d3d3d3 ;
}
.l-cont img {
width: 100%;
height: 270px;
}
.l-cont h3,.l-cont p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.l-cont h3 {
padding: 0 10px;
line-height: 22px;
}
.l-cont p {
padding: 0 10px;
line-height: 22px;
}
/* 中间样式的内容 */
.list li {
float: left;
height: 160px;
width: 180px;
background: #d3d3d3;
margin: 0 20px 10px 0;
}
.list li * {
display: block;
font-style: normal;
}
.list li img {
width: 100%;
height: 102px;
}
.list li span {
line-height: 28px;
padding-left: 10px;
font-weight: bold;
}
.list li em {
line-height: 20px;
font-size: 14px;
color: #808080;
padding-left: 10px;
}
.list li span,.list li em {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 右侧列表 */
.r-cont img {
width: 100%;
height: 100px;
}
.r-cont h3 {
line-height: 28px;
width: 160px;
height: 28px;
overflow: hidden;
margin: 0 auto 10px;
}
.r-list {
margin: 0 auto;
width: 140px;
border-top: 1px #333 dotted;
}
.r-list li {
line-height: 30px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 居中 */
.mid {
margin: 0 auto;
width: 1175px;
/* border: 1px #f00 solid; */
}
.mid li {
margin-right: 19px;
}
.mid li:nth-last-child(1) {
margin-right: 0;
}
02、sprite精灵图
精灵图:又叫 sprite(雪碧图)
他是把在项目开发中所有用到的小图标拼合到一个图片上,这样
在项目加载的时候,一次行把小图标请求到客户端。减少了http请求,减轻了服务器压力,提高了服务器效率