19.[前端开发]Day19-王者荣项目耀实战(二)
01_(掌握)王者荣耀-main-banner展示实现
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main {
height: 100px;
}
.news-section {
display: flex;
height: 342px;
}
.news-section .banner {
width: 605px;
background-color: #000;
}
.news-section .banner .image-list {
display: flex;
width: 604px;
overflow: hidden;
}
.news-section .banner .image-list .item {
flex-shrink: 0;
width: 100%;
}
.news-section .banner .image-list .item a {
display: block;
}
.news-section .banner .image-list .item a img {
width: 100%;
}
.news-section .banner .title-list {
display: flex;
height: 44px;
line-height: 44px;
}
.news-section .banner .title-list .item {
flex: 1;
text-align: center;
}
.news-section .banner .title-list .item a {
display: block;
font-size: 14px;
color: #b1b2be;
}
.news-section .banner .title-list .item.active a,
.news-section .banner .title-list .item a:hover {
color: #f3c258;
background-color: rgba(255,255,255,.15);
}
.news-section .news {
flex: 1;
background-color: purple;
}
.news-section .download {
width: 236px;
background-color: skyblue;
}
.news-section .download a {
display: block;
background: url(./img/main_sprite.png) no-repeat;
}
.news-section .download a.download-btn {
height: 128px;
background-position: 0 -219px;
}
.news-section .download a.guard-btn {
height: 106px;
background-position: 0 -350px;
}
.news-section .download a.experience-btn {
height: 108px;
background-position: 0 -461px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section">
<div class="banner">
<ul class="image-list">
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
</ul>
<ul class="title-list">
<li class="item active">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">启示之音抢先听</a>
</li>
<li class="item">
<a href="#">谁成为版本之子</a>
</li>
<li class="item">
<a href="#">观赛体验升级</a>
</li>
<li class="item">
<a href="#">季后赛开战</a>
</li>
</ul>
</div>
<div class="news">
</div>
<div class="download">
<a class="download-btn" href="#"></a>
<a class="guard-btn" href="#"></a>
<a class="experience-btn" href="#"></a>
</div>
</div>
<div class="content-section"></div>
<div class="match-section"></div>
</div>
</body>
</html>逐步细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main{
height: 100px;
}
.news-section{
display: flex;
height: 342px;
}
.news-section .banner{
width: 605px;
background-color: rgb(11, 11, 11);
}
.news-section .banner .image-list{
width: 604px;
display: flex;
overflow: hidden;
}
.news-section .banner .image-list .item{
flex-shrink: 0;
width: 100%;
}
.news-section .banner .image-list .item a{
display: block;
}
.news-section .banner .image-list .item a img{
width: 100%;
}
.news-section .banner .title-list{
display: flex;
height: 44px;
line-height: 44px;
}
.news-section .banner .title-list .item{
flex: 1;
text-align: center;
}
.news-section .banner .title-list .item a{
display: block;
font-size: 14px;
color: #b1b2be;
}
.news-section .banner .title-list .item a:hover{
color: #f3c258;
background-color: rgba(255,255,255,.15);
}
.news-section .news{
flex: 1;
background-color: purple;
}
.news-section .download{
width: 236px;
background-color: skyblue;
}
.news-section .download a{
display: block;
background:url(./img/main_sprite.png) no-repeat;
}
.news-section .download a.download-btn{
height: 128px;
background-position: 0 -219px;
}
.news-section .download a.guard-btn{
height: 106px;
background-position: 0 -350px;
}
.news-section .download a.experience-btn{
height: 108px;
background-position: 0 -461px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section">
<div class="banner">
<ul class="image-list">
<li class="item">
<a href="#">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="#">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
</ul>
<ul class="title-list">
<li class="item">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">桑启的旅途故事</a>
</li>
</ul>
</div>
<div class="news"></div>
<div class="download">
<a class="download-btn" href="#"></a>
<a class="guard-btn" href="#"></a>
<a class="experience-btn" href="#"></a>
</div>
</div>
<div class="content-section"></div>
<div class="match-section"></div>
</div>
</body>
</html>
02_(掌握)王者荣耀-main-news结构搭建和背景
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main {
height: 100px;
}
.news-section {
display: flex;
height: 342px;
background: url(./img/news_bg.png) no-repeat;
}
.news-section .banner {
width: 605px;
}
.news-section .banner .image-list {
display: flex;
width: 604px;
overflow: hidden;
}
.news-section .banner .image-list .item {
flex-shrink: 0;
width: 100%;
}
.news-section .banner .image-list .item a {
display: block;
}
.news-section .banner .image-list .item a img {
width: 100%;
}
.news-section .banner .title-list {
display: flex;
height: 44px;
line-height: 44px;
}
.news-section .banner .title-list .item {
flex: 1;
text-align: center;
}
.news-section .banner .title-list .item a {
display: block;
color: #b1b2be;
}
.news-section .banner .title-list .item.active a,
.news-section .banner .title-list .item a:hover {
color: #f3c258;
background-color: rgba(255,255,255,.15);
}
.news-section .news {
flex: 1;
overflow: hidden;
padding: 0 17px;
}
.news-section .news .title-list {
display: flex;
height: 48px;
border-bottom: 1px solid #000;
}
.news-section .news .title-list .item {
width: 52px;
}
.news-section .news .title-list .item a {
display: block;
height: 48px;
box-sizing: border-box;
line-height: 48px;
color: #b8b9c5;
text-align: center;
transition: border-bottom 200ms ease-in;
}
.news-section .news .title-list .item.active a,
.news-section .news .title-list .item:not(.more) a:hover {
color: #f3c258;
border-bottom: 3px solid #f3c258;
}
/* .news-section .news .title-list .item.more a:hover {
color: #b8b9c5;
border-bottom-color: transparent;
} */
.news-section .news .notice {
height: 36px;
line-height: 36px;
margin-top: 18px;
padding: 0 15px;
background: #414046;
}
.news-section .news .notice > a {
display: block;
/* padding-right: 50px; */
font-size: 18px;
color: #f3c258;
/* white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; */
}
.news-section .news .news-list {
margin-top: 12px;
}
.news-section .news .news-list .item {
display: flex;
align-items: center;
margin-bottom: 11px;
}
.news-section .news .news-list .item .desc {
flex: 1;
color: #b8b9c5;
white-space: nowrap;
}
.news-section .news .news-list .item .date {
padding: 0 8px;
color: #999;
font-size: 12px;
}
.news-section .download {
width: 236px;
background-color: skyblue;
}
.news-section .download a {
display: block;
background: url(./img/main_sprite.png) no-repeat;
}
.news-section .download a.download-btn {
height: 128px;
background-position: 0 -219px;
}
.news-section .download a.guard-btn {
height: 106px;
background-position: 0 -350px;
}
.news-section .download a.experience-btn {
height: 108px;
background-position: 0 -461px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section">
<div class="banner">
<ul class="image-list">
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
</ul>
<ul class="title-list">
<li class="item active">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">启示之音抢先听</a>
</li>
<li class="item">
<a href="#">谁成为版本之子</a>
</li>
<li class="item">
<a href="#">观赛体验升级</a>
</li>
<li class="item">
<a href="#">季后赛开战</a>
</li>
</ul>
</div>
<div class="news">
<ul class="title-list">
<li class="item active">
<a href="">热门</a>
</li>
<li class="item">
<a href="">新闻</a>
</li>
<li class="item">
<a href="">公告</a>
</li>
<li class="item">
<a href="">活动</a>
</li>
<li class="item">
<a href="">赛事</a>
</li>
<li class="item more">
<a href="">...</a>
</li>
</ul>
<p class="notice">
<a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
</p>
<ul class="news-list">
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_hot">热门</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_hot">热门</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_notice">公告</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
<!-- <i class="news_type news_type_hot">热门</i> -->
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_news" href="#">
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_notice">公告</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
</ul>
</div>
<div class="download">
<a class="download-btn" href="#"></a>
<a class="guard-btn" href="#"></a>
<a class="experience-btn" href="#"></a>
</div>
</div>
<div class="content-section"></div>
<div class="match-section"></div>
</div>
</body>
</html>具体细节
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main {
height: 100px;
}
.news-section {
display: flex;
height: 342px;
background: url(./img/news_bg.png) no-repeat;
}
.news-section .banner {
width: 605px;
}
.news-section .banner .image-list {
display: flex;
width: 604px;
overflow: hidden;
}
.news-section .banner .image-list .item {
flex-shrink: 0;
width: 100%;
}
.news-section .banner .image-list .item a {
display: block;
}
.news-section .banner .image-list .item a img {
width: 100%;
}
.news-section .banner .title-list {
display: flex;
height: 44px;
line-height: 44px;
}
.news-section .banner .title-list .item {
flex: 1;
text-align: center;
}
.news-section .banner .title-list .item a {
display: block;
color: #b1b2be;
}
.news-section .banner .title-list .item.active a,
.news-section .banner .title-list .item a:hover {
color: #f3c258;
background-color: rgba(255,255,255,.15);
}
.news-section .news {
flex: 1;
overflow: hidden;
padding: 0 17px;
}
.news-section .download {
width: 236px;
background-color: skyblue;
}
.news-section .download a {
display: block;
background: url(./img/main_sprite.png) no-repeat;
}
.news-section .download a.download-btn {
height: 128px;
background-position: 0 -219px;
}
.news-section .download a.guard-btn {
height: 106px;
background-position: 0 -350px;
}
.news-section .download a.experience-btn {
height: 108px;
background-position: 0 -461px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section">
<div class="banner">
<ul class="image-list">
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
</ul>
<ul class="title-list">
<li class="item active">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">启示之音抢先听</a>
</li>
<li class="item">
<a href="#">谁成为版本之子</a>
</li>
<li class="item">
<a href="#">观赛体验升级</a>
</li>
<li class="item">
<a href="#">季后赛开战</a>
</li>
</ul>
</div>
<div class="news">
111
<ul class="title-list">
</ul>
<p class="notice">
<a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
</p>
<ul class="news-list">
</ul>
</div>
<div class="download">
<a class="download-btn" href="#"></a>
<a class="guard-btn" href="#"></a>
<a class="experience-btn" href="#"></a>
</div>
</div>
<div class="content-section"></div>
<div class="match-section"></div>
</div>
</body>
</html>
03_(掌握)王者荣耀-main-news-titles展示
04_(掌握)王者荣耀-main-titles-border
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main {
height: 100px;
}
.news-section {
display: flex;
height: 342px;
background: url(./img/news_bg.png) no-repeat;
}
.news-section .banner {
width: 605px;
}
.news-section .banner .image-list {
display: flex;
width: 604px;
overflow: hidden;
}
.news-section .banner .image-list .item {
flex-shrink: 0;
width: 100%;
}
.news-section .banner .image-list .item a {
display: block;
}
.news-section .banner .image-list .item a img {
width: 100%;
}
.news-section .banner .title-list {
display: flex;
height: 44px;
line-height: 44px;
}
.news-section .banner .title-list .item {
flex: 1;
text-align: center;
}
.news-section .banner .title-list .item a {
display: block;
color: #b1b2be;
}
.news-section .banner .title-list .item.active a,
.news-section .banner .title-list .item a:hover {
color: #f3c258;
background-color: rgba(255,255,255,.15);
}
.news-section .news {
flex: 1;
overflow: hidden;
padding: 0 17px;
}
.news-section .news .title-list {
display: flex;
height: 48px;
border-bottom: 1px solid #000;
}
.news-section .news .title-list .item {
width: 52px;
}
.news-section .news .title-list .item a {
display: block;
height: 48px;
box-sizing: border-box;
line-height: 48px;
color: #b8b9c5;
text-align: center;
transition: border-bottom 200ms ease-in;
}
.news-section .news .title-list .item.active a,
.news-section .news .title-list .item:not(.more) a:hover {
color: #f3c258;
border-bottom: 3px solid #f3c258;
}
/* .news-section .news .title-list .item.more a:hover {
color: #b8b9c5;
border-bottom-color: transparent;
} */
.news-section .download {
width: 236px;
background-color: skyblue;
}
.news-section .download a {
display: block;
background: url(./img/main_sprite.png) no-repeat;
}
.news-section .download a.download-btn {
height: 128px;
background-position: 0 -219px;
}
.news-section .download a.guard-btn {
height: 106px;
background-position: 0 -350px;
}
.news-section .download a.experience-btn {
height: 108px;
background-position: 0 -461px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section">
<div class="banner">
<ul class="image-list">
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
</ul>
<ul class="title-list">
<li class="item active">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">启示之音抢先听</a>
</li>
<li class="item">
<a href="#">谁成为版本之子</a>
</li>
<li class="item">
<a href="#">观赛体验升级</a>
</li>
<li class="item">
<a href="#">季后赛开战</a>
</li>
</ul>
</div>
<div class="news">
<ul class="title-list">
<li class="item active">
<a href="">热门</a>
</li>
<li class="item">
<a href="">新闻</a>
</li>
<li class="item">
<a href="">公告</a>
</li>
<li class="item">
<a href="">活动</a>
</li>
<li class="item">
<a href="">赛事</a>
</li>
<li class="item more">
<a href="">...</a>
</li>
</ul>
<p class="notice">
<a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
</p>
<ul class="news-list">
</ul>
</div>
<div class="download">
<a class="download-btn" href="#"></a>
<a class="guard-btn" href="#"></a>
<a class="experience-btn" href="#"></a>
</div>
</div>
<div class="content-section"></div>
<div class="match-section"></div>
</div>
</body>
</html>
05_(掌握)王者荣耀-main-news-notice实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main {
height: 100px;
}
.news-section {
display: flex;
height: 342px;
background: url(./img/news_bg.png) no-repeat;
}
.news-section .banner {
width: 605px;
}
.news-section .banner .image-list {
display: flex;
width: 604px;
overflow: hidden;
}
.news-section .banner .image-list .item {
flex-shrink: 0;
width: 100%;
}
.news-section .banner .image-list .item a {
display: block;
}
.news-section .banner .image-list .item a img {
width: 100%;
}
.news-section .banner .title-list {
display: flex;
height: 44px;
line-height: 44px;
}
.news-section .banner .title-list .item {
flex: 1;
text-align: center;
}
.news-section .banner .title-list .item a {
display: block;
color: #b1b2be;
}
.news-section .banner .title-list .item.active a,
.news-section .banner .title-list .item a:hover {
color: #f3c258;
background-color: rgba(255,255,255,.15);
}
.news-section .news {
flex: 1;
overflow: hidden;
padding: 0 17px;
}
.news-section .news .title-list {
display: flex;
height: 48px;
border-bottom: 1px solid #000;
}
.news-section .news .title-list .item {
width: 52px;
}
.news-section .news .title-list .item a {
display: block;
height: 48px;
box-sizing: border-box;
line-height: 48px;
color: #b8b9c5;
text-align: center;
transition: border-bottom 200ms ease-in;
}
.news-section .news .title-list .item.active a,
.news-section .news .title-list .item:not(.more) a:hover {
color: #f3c258;
border-bottom: 3px solid #f3c258;
}
/* .news-section .news .title-list .item.more a:hover {
color: #b8b9c5;
border-bottom-color: transparent;
} */
.news-section .news .notice {
height: 36px;
line-height: 36px;
margin-top: 18px;
padding: 0 15px;
background: #414046;
}
.news-section .news .notice > a {
display: block;
/* padding-right: 50px; */
font-size: 18px;
color: #f3c258;
/* white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; */
}
.news-section .download {
width: 236px;
background-color: skyblue;
}
.news-section .download a {
display: block;
background: url(./img/main_sprite.png) no-repeat;
}
.news-section .download a.download-btn {
height: 128px;
background-position: 0 -219px;
}
.news-section .download a.guard-btn {
height: 106px;
background-position: 0 -350px;
}
.news-section .download a.experience-btn {
height: 108px;
background-position: 0 -461px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section">
<div class="banner">
<ul class="image-list">
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
</ul>
<ul class="title-list">
<li class="item active">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">启示之音抢先听</a>
</li>
<li class="item">
<a href="#">谁成为版本之子</a>
</li>
<li class="item">
<a href="#">观赛体验升级</a>
</li>
<li class="item">
<a href="#">季后赛开战</a>
</li>
</ul>
</div>
<div class="news">
<ul class="title-list">
<li class="item active">
<a href="">热门</a>
</li>
<li class="item">
<a href="">新闻</a>
</li>
<li class="item">
<a href="">公告</a>
</li>
<li class="item">
<a href="">活动</a>
</li>
<li class="item">
<a href="">赛事</a>
</li>
<li class="item more">
<a href="">...</a>
</li>
</ul>
<p class="notice">
<a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
</p>
<ul class="news-list">
</ul>
</div>
<div class="download">
<a class="download-btn" href="#"></a>
<a class="guard-btn" href="#"></a>
<a class="experience-btn" href="#"></a>
</div>
</div>
<div class="content-section"></div>
<div class="match-section"></div>
</div>
</body>
</html>
06_(掌握)王者荣耀-main-news-list实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main {
height: 100px;
}
.news-section {
display: flex;
height: 342px;
background: url(./img/news_bg.png) no-repeat;
}
.news-section .banner {
width: 605px;
}
.news-section .banner .image-list {
display: flex;
width: 604px;
overflow: hidden;
}
.news-section .banner .image-list .item {
flex-shrink: 0;
width: 100%;
}
.news-section .banner .image-list .item a {
display: block;
}
.news-section .banner .image-list .item a img {
width: 100%;
}
.news-section .banner .title-list {
display: flex;
height: 44px;
line-height: 44px;
}
.news-section .banner .title-list .item {
flex: 1;
text-align: center;
}
.news-section .banner .title-list .item a {
display: block;
color: #b1b2be;
}
.news-section .banner .title-list .item.active a,
.news-section .banner .title-list .item a:hover {
color: #f3c258;
background-color: rgba(255,255,255,.15);
}
.news-section .news {
flex: 1;
overflow: hidden;
padding: 0 17px;
}
.news-section .news .title-list {
display: flex;
height: 48px;
border-bottom: 1px solid #000;
}
.news-section .news .title-list .item {
width: 52px;
}
.news-section .news .title-list .item a {
display: block;
height: 48px;
box-sizing: border-box;
line-height: 48px;
color: #b8b9c5;
text-align: center;
transition: border-bottom 200ms ease-in;
}
.news-section .news .title-list .item.active a,
.news-section .news .title-list .item:not(.more) a:hover {
color: #f3c258;
border-bottom: 3px solid #f3c258;
}
/* .news-section .news .title-list .item.more a:hover {
color: #b8b9c5;
border-bottom-color: transparent;
} */
.news-section .news .notice {
height: 36px;
line-height: 36px;
margin-top: 18px;
padding: 0 15px;
background: #414046;
}
.news-section .news .notice > a {
display: block;
/* padding-right: 50px; */
font-size: 18px;
color: #f3c258;
/* white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; */
}
.news-section .news .news-list {
margin-top: 12px;
}
.news-section .news .news-list .item {
display: flex;
align-items: center;
margin-bottom: 11px;
}
.news-section .news .news-list .item .desc {
flex: 1;
color: #b8b9c5;
white-space: nowrap;
}
.news-section .news .news-list .item .date {
padding: 0 8px;
color: #999;
font-size: 12px;
}
.news-section .download {
width: 236px;
background-color: skyblue;
}
.news-section .download a {
display: block;
background: url(./img/main_sprite.png) no-repeat;
}
.news-section .download a.download-btn {
height: 128px;
background-position: 0 -219px;
}
.news-section .download a.guard-btn {
height: 106px;
background-position: 0 -350px;
}
.news-section .download a.experience-btn {
height: 108px;
background-position: 0 -461px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section">
<div class="banner">
<ul class="image-list">
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
</ul>
<ul class="title-list">
<li class="item active">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">启示之音抢先听</a>
</li>
<li class="item">
<a href="#">谁成为版本之子</a>
</li>
<li class="item">
<a href="#">观赛体验升级</a>
</li>
<li class="item">
<a href="#">季后赛开战</a>
</li>
</ul>
</div>
<div class="news">
<ul class="title-list">
<li class="item active">
<a href="">热门</a>
</li>
<li class="item">
<a href="">新闻</a>
</li>
<li class="item">
<a href="">公告</a>
</li>
<li class="item">
<a href="">活动</a>
</li>
<li class="item">
<a href="">赛事</a>
</li>
<li class="item more">
<a href="">...</a>
</li>
</ul>
<p class="notice">
<a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
</p>
<ul class="news-list">
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_hot">热门</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_hot">热门</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_notice">公告</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
<!-- <i class="news_type news_type_hot">热门</i> -->
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_news" href="#">
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_notice">公告</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
</ul>
</div>
<div class="download">
<a class="download-btn" href="#"></a>
<a class="guard-btn" href="#"></a>
<a class="experience-btn" href="#"></a>
</div>
</div>
<div class="content-section"></div>
<div class="match-section"></div>
</div>
</body>
</html>07_(掌握)王者荣耀-新闻图标的封装过程
注意:对于会反复用到的样式我们应该写到common.css里面，进行复用
/* common.css公共的样式 */
/* body的公共样式 */
body {
font: 14px/1.5 "Microsoft YaHei",Tahoma,"simsun",sans-serif;
color: #333;
}
/* wrapper中间包裹的区域 */
.top_wrapper {
width: 980px;
margin: 0 auto;
}
.header_wrapper {
width: 1300px;
margin: 0 auto;
}
.main_wrapper {
width: 1200px;
margin: 0 auto;
}
/* 文字不换行显示3行代码 */
.nowrap_ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* 新闻类型的图标 */
/* .news_type {
display: inline-block;
width: 32px;
height: 16px;
margin-right: 2px;
line-height: 16px;
text-align: center;
font-size: 12px;
border: 1px solid #f00;
border-radius: 2px;
}
.news_type_hot {
color: #ff3636;
border-color: #ff3636;
}
.news_type_notice {
color: #f4be19;
border-color: #f4be19;
}
.news_type_news {
color: #1e96ab;
border-color: #1e96ab;
} */
.news_type::before {
display: inline-block;
width: 32px;
height: 16px;
margin-right: 2px;
line-height: 16px;
text-align: center;
font-size: 12px;
border: 1px solid #f00;
border-radius: 2px;
}
.news_type_hot::before {
content: "热门";
color: #ff3636;
border-color: #ff3636;
}
.news_type_notice::before {
content: "公告";
color: #f4be19;
border-color: #f4be19;
}
.news_type_news::before {
content: "新闻";
color: #1e96ab;
border-color: #1e96ab;
}
reset.css
/* reset.css样式重置文件 */
/* margin/padding重置 */
body, h1, h2, h3, ul, ol, li, p, dl, dt, dd {
padding: 0;
margin: 0;
}
/* a元素重置 */
a {
text-decoration: none;
color: #333;
}
/* img的vertical-align重置 */
img {
vertical-align: top;
}
/* ul, ol, li重置 */
ul, ol, li {
list-style: none;
}
/* 对斜体元素重置 */
i, em {
font-style: normal;
}
05_page_main_news_news
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main {
height: 100px;
}
.news-section {
display: flex;
height: 342px;
background: url(./img/news_bg.png) no-repeat;
}
.news-section .banner {
width: 605px;
}
.news-section .banner .image-list {
display: flex;
width: 604px;
overflow: hidden;
}
.news-section .banner .image-list .item {
flex-shrink: 0;
width: 100%;
}
.news-section .banner .image-list .item a {
display: block;
}
.news-section .banner .image-list .item a img {
width: 100%;
}
.news-section .banner .title-list {
display: flex;
height: 44px;
line-height: 44px;
}
.news-section .banner .title-list .item {
flex: 1;
text-align: center;
}
.news-section .banner .title-list .item a {
display: block;
color: #b1b2be;
}
.news-section .banner .title-list .item.active a,
.news-section .banner .title-list .item a:hover {
color: #f3c258;
background-color: rgba(255,255,255,.15);
}
.news-section .news {
flex: 1;
overflow: hidden;
padding: 0 17px;
}
.news-section .news .title-list {
display: flex;
height: 48px;
border-bottom: 1px solid #000;
}
.news-section .news .title-list .item {
width: 52px;
}
.news-section .news .title-list .item a {
display: block;
height: 48px;
box-sizing: border-box;
line-height: 48px;
color: #b8b9c5;
text-align: center;
transition: border-bottom 200ms ease-in;
}
.news-section .news .title-list .item.active a,
.news-section .news .title-list .item:not(.more) a:hover {
color: #f3c258;
border-bottom: 3px solid #f3c258;
}
/* .news-section .news .title-list .item.more a:hover {
color: #b8b9c5;
border-bottom-color: transparent;
} */
.news-section .news .notice {
height: 36px;
line-height: 36px;
margin-top: 18px;
padding: 0 15px;
background: #414046;
}
.news-section .news .notice > a {
display: block;
/* padding-right: 50px; */
font-size: 18px;
color: #f3c258;
/* white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; */
}
.news-section .news .news-list {
margin-top: 12px;
}
.news-section .news .news-list .item {
display: flex;
align-items: center;
margin-bottom: 11px;
}
.news-section .news .news-list .item .desc {
flex: 1;
color: #b8b9c5;
white-space: nowrap;
}
.news-section .news .news-list .item .date {
padding: 0 8px;
color: #999;
font-size: 12px;
}
.news-section .download {
width: 236px;
background-color: skyblue;
}
.news-section .download a {
display: block;
background: url(./img/main_sprite.png) no-repeat;
}
.news-section .download a.download-btn {
height: 128px;
background-position: 0 -219px;
}
.news-section .download a.guard-btn {
height: 106px;
background-position: 0 -350px;
}
.news-section .download a.experience-btn {
height: 108px;
background-position: 0 -461px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="news-section">
<div class="banner">
<ul class="image-list">
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
<li class="item">
<a href="">
<img src="./img/banner_01.jpeg" alt="">
</a>
</li>
</ul>
<ul class="title-list">
<li class="item active">
<a href="#">桑启的旅途故事</a>
</li>
<li class="item">
<a href="#">启示之音抢先听</a>
</li>
<li class="item">
<a href="#">谁成为版本之子</a>
</li>
<li class="item">
<a href="#">观赛体验升级</a>
</li>
<li class="item">
<a href="#">季后赛开战</a>
</li>
</ul>
</div>
<div class="news">
<ul class="title-list">
<li class="item active">
<a href="">热门</a>
</li>
<li class="item">
<a href="">新闻</a>
</li>
<li class="item">
<a href="">公告</a>
</li>
<li class="item">
<a href="">活动</a>
</li>
<li class="item">
<a href="">赛事</a>
</li>
<li class="item more">
<a href="">...</a>
</li>
</ul>
<p class="notice">
<a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
</p>
<ul class="news-list">
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_hot">热门</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_hot">热门</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_notice">公告</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
<!-- <i class="news_type news_type_hot">热门</i> -->
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_news" href="#">
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
<li class="item">
<a class="desc nowrap_ellipsis" href="#">
<i class="news_type news_type_notice">公告</i>
最新BUG修复进展【老亚瑟的答疑时间】
</a>
<span class="date">04/19</span>
</li>
</ul>
</div>
<div class="download">
<a class="download-btn" href="#"></a>
<a class="guard-btn" href="#"></a>
<a class="experience-btn" href="#"></a>
</div>
</div>
<div class="content-section"></div>
<div class="match-section"></div>
</div>
</body>
</html>08_(掌握)王者荣耀-main-入口的展示实现
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main .entrance-section {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.main .entrance-section .item {
width: 291px;
height: 134px;
}
.main .entrance-section a {
display: block;
height: 100%;
overflow: hidden;
}
.main .entrance-section a img {
width: 100%;
height: 100%;
transition: transform 400ms ease;
}
.main .entrance-section a:hover img {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="main main_wrapper">
<ul class="entrance-section">
<li class="item">
<a href="#">
<img src="./img/entrance_01.jpg" alt="">
</a>
</li>
<li class="item">
<a href="#">
<img src="./img/entrance_02.png" alt="">
</a>
</li>
<li class="item">
<a href="#">
<img src="./img/entrance_03.jpg" alt="">
</a>
</li>
<li class="item">
<a href="#">
<img src="./img/entrance_04.png" alt="">
</a>
</li>
</ul>
</div>
</body>
</html>
09_(掌握)王者荣耀-main-内容区域划分和header实现
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main .section-content {
display: flex;
justify-content: space-between;
}
.main .section-content .left-content {
width: 872px;
height: 1000px;
}
.main .section-content .right-content {
width: 295px;
height: 500px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="section-content">
<div class="left-content">
<div class="content-center">
<div class="section_header">
<div class="header_left">
<h3 class="title">内容中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
<div class="tab_control">
<div class="item active">精品栏目</div>
<div class="line"></div>
<div class="item">赛事精品</div>
<div class="line"></div>
<div class="item">英雄攻略</div>
</div>
<div class="tab_keyword">
<div class="item active">最新</div>
<div class="item">马菠萝奇闻录</div>
<div class="item">马菠萝奇</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
</div>
</div>
<div class="match-center">
<div class="section_header">
<div class="header_left">
<h3 class="title title-icon-match">赛事中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
</div>
</div>
<div class="right-content"></div>
</div>
</div>
</body>
</html>细节
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main .section-content {
display: flex;
justify-content: space-between;
}
.main .section-content .left-content {
width: 872px;
height: 1000px;
}
.main .section-content .right-content {
width: 295px;
height: 500px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="section-content">
<div class="left-content">
<div class="content-center">
<div class="section_header">
<div class="header_left">
<h3 class="title">内容中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
</div>
</div>
<div class="right-content"></div>
</div>
</div>
</body>
</html>common.css
/* common.css公共的样式 */
/* body的公共样式 */
body {
font: 14px/1.5 "Microsoft YaHei",Tahoma,"simsun",sans-serif;
color: #333;
}
/* wrapper中间包裹的区域 */
.top_wrapper {
width: 980px;
margin: 0 auto;
}
.header_wrapper {
width: 1300px;
margin: 0 auto;
}
.main_wrapper {
width: 1200px;
margin: 0 auto;
}
/* 文字不换行显示3行代码 */
.nowrap_ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* 新闻类型的图标 */
/* .news_type {
display: inline-block;
width: 32px;
height: 16px;
margin-right: 2px;
line-height: 16px;
text-align: center;
font-size: 12px;
border: 1px solid #f00;
border-radius: 2px;
}
.news_type_hot {
color: #ff3636;
border-color: #ff3636;
}
.news_type_notice {
color: #f4be19;
border-color: #f4be19;
}
.news_type_news {
color: #1e96ab;
border-color: #1e96ab;
} */
.news_type::before {
display: inline-block;
width: 32px;
height: 16px;
margin-right: 2px;
line-height: 16px;
text-align: center;
font-size: 12px;
border: 1px solid #f00;
border-radius: 2px;
}
.news_type_hot::before {
content: "热门";
color: #ff3636;
border-color: #ff3636;
}
.news_type_notice::before {
content: "公告";
color: #f4be19;
border-color: #f4be19;
}
.news_type_news::before {
content: "新闻";
color: #1e96ab;
border-color: #1e96ab;
}
.news_type_match {
display: inline-block;
width: 52px;
height: 23px;
margin-right: 12px;
border-radius: 10px;
line-height: 23px;
text-align: center;
color: #999;
font-size: 12px;
background-color: #e3e3e3;
}
/* section_header */
.section_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.section_header .header_left .title {
font-size: 22px;
color: #323235;
padding-left: 30px;
background: url(../img/main_sprite.png) no-repeat 0 -102px;
}
.section_header .header_left .title-icon-match {
background-position: 0 -180px;
}
.section_header .header_left .title-icon-hero {
background-position: 0 -139px;
}
.section_header .header_right {
display: flex;
align-items: center;
}
.section_header .header_right .more {
display: block;
padding-left: 22px;
background: url(../img/main_sprite.png) no-repeat -252px 4px;
}
.section_header .header_right .more:hover {
color: #f3c258;
}
10_(掌握)王者荣耀-main-tab-control的封装过程
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main .section-content {
display: flex;
justify-content: space-between;
}
.main .section-content .left-content {
width: 872px;
height: 1000px;
}
.main .section-content .right-content {
width: 295px;
height: 500px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="section-content">
<div class="left-content">
<div class="content-center">
<div class="section_header">
<div class="header_left">
<h3 class="title">内容中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
<div class="tab_control">
<div class="item active">精品栏目</div>
<div class="line"></div>
<div class="item">赛事精品</div>
<div class="line"></div>
<div class="item">英雄攻略</div>
</div>
</div>
<div class="match-center">
<div class="section_header">
<div class="header_left">
<h3 class="title title-icon-match">赛事中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
</div>
</div>
<div class="right-content"></div>
</div>
</div>
</body>
</html>
11_(掌握)王者荣耀-main-tab-keyword的封装过程
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.main .section-content {
display: flex;
justify-content: space-between;
}
.main .section-content .left-content {
width: 872px;
height: 1000px;
}
.main .section-content .right-content {
width: 295px;
height: 500px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="section-content">
<div class="left-content">
<div class="content-center">
<div class="section_header">
<div class="header_left">
<h3 class="title">内容中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
<div class="tab_control">
<div class="item active">精品栏目</div>
<div class="line"></div>
<div class="item">赛事精品</div>
<div class="line"></div>
<div class="item">英雄攻略</div>
</div>
<div class="tab_keyword">
<div class="item active">最新</div>
<div class="item">马菠萝奇闻录</div>
<div class="item">马菠萝奇</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
</div>
</div>
<div class="match-center">
<div class="section_header">
<div class="header_left">
<h3 class="title title-icon-match">赛事中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
</div>
</div>
<div class="right-content"></div>
</div>
</div>
</body>
</html>
12_(掌握)王者荣耀-main-video-item封装01
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video-Item</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.video_item {
margin: 100px auto;
display: block;
width: 212px;
}
.video_item .album {
position: relative;
border-radius: 3px;
overflow: hidden;
}
.video_item .album img {
width: 100%;
}
.video_item .album .info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 22px;
padding: 0 10px;
line-height: 22px;
background-color: rgba(0,0,0,.6);
font-size: 12px;
color: #fff;
}
.video_item .album .info .count {
padding-left: 16px;
background: url(./img/main_sprite.png) no-repeat -256px -59px;
}
.video_item .album .cover {
display: none;
opacity: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
transition: all 300ms ease-in;
}
.video_item:hover .album .cover {
display: block;
animation: itemCoverAnim 300ms ease-in forwards;
}
@keyframes itemCoverAnim {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.video_item .album .cover .icon_play {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
background: url(./img/main_sprite.png) no-repeat -192px -64px;
}
.video_item .desc {
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
</body>
</html>细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video-Item</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.video_item {
margin: 100px auto;
display: block;
width: 212px;
}
.video_item .album {
position: relative;
border-radius: 3px;
overflow: hidden;
}
.video_item .album img {
width: 100%;
}
.video_item .album .info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 22px;
padding: 0 10px;
line-height: 22px;
background-color: rgba(0,0,0,.6);
font-size: 12px;
color: #fff;
}
.video_item .album .info .count {
padding-left: 16px;
background: url(./img/main_sprite.png) no-repeat -256px -59px;
}
.video_item .desc {
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
</body>
</html>
13_(掌握)王者荣耀-main-video-item封装0
14_(掌握)王者荣耀-main-video-item动画补
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video-Item</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.video_item {
margin: 100px auto;
display: block;
width: 212px;
}
.video_item .album {
position: relative;
border-radius: 3px;
overflow: hidden;
}
.video_item .album img {
width: 100%;
}
.video_item .album .info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 22px;
padding: 0 10px;
line-height: 22px;
background-color: rgba(0,0,0,.6);
font-size: 12px;
color: #fff;
}
.video_item .album .info .count {
padding-left: 16px;
background: url(./img/main_sprite.png) no-repeat -256px -59px;
}
.video_item .album .cover {
display: none;
opacity: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
transition: all 300ms ease-in;
}
.video_item:hover .album .cover {
display: block;
animation: itemCoverAnim 300ms ease-in forwards;
}
@keyframes itemCoverAnim {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.video_item .album .cover .icon_play {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
background: url(./img/main_sprite.png) no-repeat -192px -64px;
}
.video_item .desc {
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
</body>
</html>15_(掌握)王者荣耀-main-video-list的展示
video.css
.video_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.video_item {
display: block;
width: 212px;
margin-bottom: 20px;
}
.video_item .album {
position: relative;
border-radius: 3px;
overflow: hidden;
}
.video_item .album img {
width: 100%;
}
.video_item .album .info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 22px;
padding: 0 10px;
line-height: 22px;
background-color: rgba(0,0,0,.6);
font-size: 12px;
color: #fff;
}
.video_item .album .info .count {
padding-left: 16px;
background: url(../img/main_sprite.png) no-repeat -256px -59px;
}
.video_item .album .cover {
display: none;
opacity: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
transition: all 300ms ease-in;
}
.video_item:hover .album .cover {
display: block;
animation: itemCoverAnim 300ms ease-in forwards;
}
@keyframes itemCoverAnim {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.video_item .album .cover .icon_play {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
background: url(../img/main_sprite.png) no-repeat -192px -64px;
}
.video_item .desc {
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}16_(掌握)王者荣耀-main-赛事中心tab_control
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/video.css">
<style>
.main .section-content {
display: flex;
justify-content: space-between;
}
.main .section-content .left-content {
width: 872px;
height: 1000px;
}
.main .match-center .match-news {
display: flex;
height: 260px;
margin: 20px 0 15px;
}
.main .match-center .match-news .news-left {
width: 211px;
background-color: orange;
}
.main .match-center .match-news .news-right {
flex: 1;
overflow: hidden;
padding: 0 15px;
}
.main .match-center .news-right .title {
font-size: 24px;
color: #333;
padding-right: 80px;
}
.main .match-center .news-right .subtitle {
padding-right: 160px;
color: #666;
}
.main .match-center .news-right .news-list .item {
display: flex;
align-items: center;
margin-top: 10px;
}
.main .match-center .news-right .news-list .item .desc {
flex: 1;
padding-right: 50px;
}
.main .match-center .news-right .news-list .item .desc:hover {
text-decoration: underline;
}
.main .match-center .news-right .news-list .item .date {
font-size: 12px;
color: #b8b9c5;
}
/* right-content */
.main .section-content .right-content {
width: 295px;
height: 500px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="section-content">
<div class="left-content">
<div class="content-center">
<div class="section_header">
<div class="header_left">
<h3 class="title">内容中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
<div class="tab_control">
<div class="item active">精品栏目</div>
<div class="line"></div>
<div class="item">赛事精品</div>
<div class="line"></div>
<div class="item">英雄攻略</div>
</div>
<div class="tab_keyword">
<div class="item active">最新</div>
<div class="item">马菠萝奇闻录</div>
<div class="item">马菠萝奇</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
</div>
<div class="video_list">
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
</div>
</div>
<div class="match-center">
<div class="section_header">
<div class="header_left">
<h3 class="title title-icon-match">赛事中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
<div class="tab_control">
<div class="item item_wrap active">KPL</div>
<div class="line"></div>
<div class="item item_wrap">挑战者杯</div>
<div class="line"></div>
<div class="item item_wrap">K甲联赛</div>
<div class="line"></div>
<div class="item item_wrap">城市赛</div>
<div class="line"></div>
<div class="item item_wrap">高校联赛</div>
<div class="line"></div>
<div class="item item_wrap">TGA</div>
<div class="line"></div>
<div class="item item_wrap">微信游戏邀请赛</div>
<div class="line"></div>
</div>
<div class="video_list">
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
</div>
</div>
</div>
<div class="right-content"></div>
</div>
</div>
</body>
</html>17_(掌握)王者荣耀-main-赛事中心新闻展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀-main-news</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/video.css">
<style>
.main .section-content {
display: flex;
justify-content: space-between;
}
.main .section-content .left-content {
width: 872px;
height: 1000px;
}
.main .match-center .match-news {
display: flex;
height: 260px;
margin: 20px 0 15px;
}
.main .match-center .match-news .news-left {
width: 211px;
background-color: orange;
}
.main .match-center .match-news .news-right {
flex: 1;
overflow: hidden;
padding: 0 15px;
}
.main .match-center .news-right .title {
font-size: 24px;
color: #333;
padding-right: 80px;
}
.main .match-center .news-right .subtitle {
padding-right: 160px;
color: #666;
}
.main .match-center .news-right .news-list .item {
display: flex;
align-items: center;
margin-top: 10px;
}
.main .match-center .news-right .news-list .item .desc {
flex: 1;
padding-right: 50px;
}
.main .match-center .news-right .news-list .item .desc:hover {
text-decoration: underline;
}
.main .match-center .news-right .news-list .item .date {
font-size: 12px;
color: #b8b9c5;
}
/* right-content */
.main .section-content .right-content {
width: 295px;
height: 500px;
}
</style>
</head>
<body>
<div class="main main_wrapper">
<div class="section-content">
<div class="left-content">
<div class="content-center">
<div class="section_header">
<div class="header_left">
<h3 class="title">内容中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
<div class="tab_control">
<div class="item active">精品栏目</div>
<div class="line"></div>
<div class="item">赛事精品</div>
<div class="line"></div>
<div class="item">英雄攻略</div>
</div>
<div class="tab_keyword">
<div class="item active">最新</div>
<div class="item">马菠萝奇闻录</div>
<div class="item">马菠萝奇</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
<div class="item">王者克纸轮</div>
<div class="item">王者视角</div>
<div class="item">峡谷460</div>
<div class="item">百星王者带你非</div>
</div>
<div class="video_list">
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_01.png" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
</div>
</div>
<div class="match-center">
<div class="section_header">
<div class="header_left">
<h3 class="title title-icon-match">赛事中心</h3>
</div>
<div class="header_right" href="#">
<a class="more" href="#">更多</a>
</div>
</div>
<div class="tab_control">
<div class="item item_wrap active">KPL</div>
<div class="line"></div>
<div class="item item_wrap">挑战者杯</div>
<div class="line"></div>
<div class="item item_wrap">K甲联赛</div>
<div class="line"></div>
<div class="item item_wrap">城市赛</div>
<div class="line"></div>
<div class="item item_wrap">高校联赛</div>
<div class="line"></div>
<div class="item item_wrap">TGA</div>
<div class="line"></div>
<div class="item item_wrap">微信游戏邀请赛</div>
<div class="line"></div>
</div>
<div class="match-news">
<a class="news-left" href="#">
<img src="./img/match_01.jpg" alt="">
</a>
<div class="news-right">
<div class="title nowrap_ellipsis">
K甲季后赛回顾：镇江VTG、火豹会师总决赛，MD止步四强总决赛，MD止步四强
</div>
<div class="subtitle nowrap_ellipsis">
2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
</div>
<ul class="news-list">
<li class="item">
<span class="news_type_match">KPL</span>
<a class="desc nowrap_ellipsis" href="#">
2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
</a>
<span class="date">04-22</span>
</li>
<li class="item">
<span class="news_type_match">KPL</span>
<a class="desc nowrap_ellipsis" href="#">
2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
</a>
<span class="date">04-22</span>
</li>
<li class="item">
<span class="news_type_match">KPL</span>
<a class="desc nowrap_ellipsis" href="#">
2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
</a>
<span class="date">04-22</span>
</li>
<li class="item">
<span class="news_type_match">KPL</span>
<a class="desc nowrap_ellipsis" href="#">
2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
</a>
<span class="date">04-22</span>
</li>
<li class="item">
<span class="news_type_match">KPL</span>
<a class="desc nowrap_ellipsis" href="#">
2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
</a>
<span class="date">04-22</span>
</li>
<li class="item">
<span class="news_type_match">KPL</span>
<a class="desc nowrap_ellipsis" href="#">
2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
</a>
<span class="date">04-22</span>
</li>
</ul>
</div>
</div>
<div class="video_list">
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
<a class="video_item" href="#">
<div class="album">
<img src="./img/video_album_02.jpg" alt="">
<div class="info">
<span class="count">471.6万</span>
<span class="date">2020-08-29</span>
</div>
<div class="cover">
<i class="icon_play"></i>
</div>
</div>
<div class="desc">
【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
</div>
</a>
</div>
</div>
</div>
<div class="right-content"></div>
</div>
</div>
</body>
</html>总结：王者荣耀项目实战
一. 新闻区域
1.1. 轮播图展示
-
banner-list
-
title-list
1.2. 新闻区域背景图
1.3. 新闻内容展示
-
news-titles-list
-
notice 公告
-
news-list
-
基本展示过程(没有前面图标)
-
单独对图标进行封装
-
i封装
-
伪元素封装
-
-
二. 入口区域
2.1. 四个等分/缩放的动画
三. 封装公共的class
3.1. section_header
3.2. tab_control
-
等分
-
包裹内容
3.3. tab_keyword
四. 视频列表
4.1. video_item进行封装
4.2. video_item遮盖层/动画
-
cover
-
icon
-
-
动画
-
transition
-
animation
-