当前位置： 首页 > news >正文

19.[前端开发]Day19-王者荣项目耀实战(二)

news 2025/11/6 6:48:12

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

4.3. video_list列表展示

五. 赛事中心的新闻展示

5.1. 左侧图片

5.2. 右侧title/subtitle

5.3. 新闻的列表

相关文章：

19.[前端开发]Day19-王者荣项目耀实战(二)

01_(掌握)王者荣耀-main-banner展示实现 完整代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…...

编程日记 2025/2/6 5:55:25

lmk内存压力测试工具mem-pressure源码剖析

背景&#xff1a; android系统开发过程中&#xff0c;经常会遇到一些low memory kill的问题&#xff0c;在分析这些系统低内存导致被杀问题时候&#xff0c;经常因为不好复现而成为一个比较烦恼的阻碍。因为这种低内存问题本身就不属于一种功能操作类型的问题&#xff0c;属于…...

编程日记 2025/2/6 5:54:15

企业四要素如何用Java进行调用

一、什么是企业四要素&#xff1f; 企业四要素是在企业三要素&#xff08;企业名称、统一社会信用代码、法定代表人姓名&#xff09;的基础上&#xff0c;增加了一个关键要素&#xff0c;通常是企业注册号或企业银行账户信息。这种接口主要用于更全面的企业信息验证&#xff0c…...

编程日记 2025/2/6 5:52:14

修剪二叉搜索树(力扣669)

这道题还是比较复杂&#xff0c;在递归上与之前写过的二叉树的题目都有所不同。如果当前递归到的子树的父节点不在范围中&#xff0c;我们根据节点数值的大小选择进行左递归还是右递归。为什么找到了不满足要求的节点之后&#xff0c;还要进行递归呢&#xff1f;因为该不满足要…...

编程日记 2025/2/6 5:51:10

一款由 .NET 官方团队开源的电子商务系统 - eShop

项目介绍 eShop是一款由.NET官方开源的&#xff0c;基于.NET Aspire构建的用于参考学习的服务架构电子商务系统&#xff0c;旨在展示如何利用.NET框架及其相关技术栈构建一个现代化的电子商务网站。该项目采用服务架构&#xff0c;将应用程序分解为多个独立的服务&#xff0c;…...

编程日记 2025/2/6 5:49:05

论最新技术编程类有什么，值得关注的点有什么呢？

在2025年的编程领域，新技术层出不穷。编程语言方面，Zig作为新一代系统级编程语言，凭借无隐藏控制流、出色的优化性能以及良好的C语言兼容性，被视作C语言强有力的替代者；Rust的应用范围不断拓展，在系统开发和Web后端开发中表现亮眼，其“零成本抽象”特性在保障内存安全的…...

编程日记 2025/2/6 5:48:03

Java入门进阶

文章目录 1、常用API 1.1、Math1.2、System1.3、Object1.4、Arrays1.5、基本类型包装类 1.5.1、基本类型包装类概述1.5.2、Integer1.5.3、int和String相互转换1.5.4、自动装箱和拆箱 1.6、日期类 1.6.1、Date类1.6.2、SimpleDateFormat类 1.6.2.1、格式化&#xff08;从Date到…...

编程日记 2025/2/6 5:47:01

Java并发编程面试题：ThreadLocal（8题）

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…...

编程日记 2025/2/6 5:45:59

Zabbix7.0安装(Ubuntu24.04+LNMP)

1.选择版本 下载Zabbix 2.安装虚拟机 这里选择在Ubuntu24.04上安装Zabbix. 安装链接https://blog.csdn.net/weixin_58189050/article/details/145446065 配置源 vim /etc/apt/sources.list deb https://mirrors.aliyun.com/ubuntu/ noble main restricted universe multive…...

编程日记 2025/2/6 5:44:57

从 0 到 1 构建数仓之DWD层

在企业数字化转型进程中&#xff0c;数据仓库的建设至关重要&#xff0c;而 DWD 层&#xff08;明细粒度事实层&#xff09;作为数据仓库的核心支撑层&#xff0c;其搭建质量直接影响企业数据的分析价值与决策效率。本文将结合实际案例与行业经验&#xff0c;详细阐述企业如何从…...

编程日记 2025/2/6 5:42:55

S4 HANA手工记账Tax Payable – FB41

本文主要介绍在S4 HANA OP中手工记账Tax Payable – FB41。具体请参照如下内容&#xff1a; 手工记账Tax Payable – FB41 该事务代码用于手工处理税码统驭科目的记账&#xff0c;一般税码科目需要设置为只能自动记账&#xff0c;因此无法手工对税码统驭科目记账&#xff0c;但…...

编程日记 2025/2/6 5:41:54

【自然语言处理（NLP）】NLP实战：IMDB影评情感分析项目

文章目录 介绍IMDB影评情感分析项目数据集项目实现1. 导包2. 加载IMDB数据3. 查看部分数据4. 分词5. 加载数据整合6. 构建模型7. 词嵌入8. 初始化模型和权重9. glove词向量10. 训练和评估11. 预测 个人主页&#xff1a;道友老李 欢迎加入社区&#xff1a;道友老李的学习社区 介…...

编程日记 2025/2/6 5:40:53

DIY Shell：探秘进程构建与命令解析的核心原理

个人主页&#xff1a;chian-ocean 文章专栏-Linux 前言&#xff1a; Shell&#xff08;外壳&#xff09;是一个操作系统的用户界面&#xff0c;它提供了一种方式&#xff0c;使得用户能够与操作系统进行交互。Shell 是用户与操作系统之间的桥梁&#xff0c;允许用户通过命令行…...

编程日记 2025/2/6 5:39:51

通过Redisson构建延时队列并实现注解式消费

目录 一、序言二、延迟队列实现1、Redisson延时消息监听注解和消息体2、Redisson延时消息发布器3、Redisson延时消息监听处理器 三、测试用例四、结语 一、序言 两个月前接了一个4万的私活&#xff0c;做一个线上商城小程序&#xff0c;在交易过程中不可避免的一个问题就是用户…...

编程日记 2025/2/6 5:38:50

SQL Server配置管理器无法连接到 WMI 提供程序

目录 第一步第二部 第一步 发现没有资源管理器 ​​​​ 在文件夹找到管理器 打开发现报这个错误 配置管理器无法连接到 WMI 提供程序第二部 https://blog.csdn.net/thb369208315/article/details/126954074...

编程日记 2025/2/6 5:34:45

Linux内核源码：ext4 extent详解

在 Linux 系统的庞大体系中&#xff0c;文件系统就像是一个井然有序的图书馆&#xff0c;而 ext4 文件系统则是这座图书馆中极为重要的 “藏书室”&#xff0c;它负责高效管理和存储数据。在 ext4 众多的奥秘中&#xff0c;ext4 extent 犹如一颗璀璨的明珠&#xff0c;起着关键…...

编程日记 2025/2/6 5:33:44

Maven jar 包下载失败问题处理

Maven jar 包下载失败问题处理 1.配置好国内的Maven源2.重新下载3. 其他问题 1.配置好国内的Maven源 打开⾃⼰的 Idea 检测 Maven 的配置是否正确&#xff0c;正确的配置如下图所示&#xff1a; 检查项⼀共有两个&#xff1a; 确认右边的两个勾已经选中&#xff0c;如果没有请…...

编程日记 2025/2/6 5:32:43

自指学习：AGI的元认知突破

文章目录 引言：从模式识别到认知革命一、自指学习的理论框架1.1 自指系统的数学定义1.2 认知架构的三重反射1.3 与传统元学习的本质区别二、元认知突破的技术路径2.1 自指神经网络架构2.2 认知效能评价体系2.3 知识表示的革命三、实现突破的关键挑战3.1 认知闭环的稳定性3.2 计…...

编程日记 2025/2/6 5:31:42

排序算法--希尔排序

希尔排序是插入排序的改进版本&#xff0c;适合中等规模数据排序&#xff0c;性能优于简单插入排序。 // 希尔排序函数 void shellSort(int arr[], int n) {// 初始间隔&#xff08;gap&#xff09;为数组长度的一半&#xff0c;逐步缩小for (int gap n / 2; gap > 0; gap …...

编程日记 2025/2/6 5:30:41

Java 2024年面试总结（持续更新）

目录 最近趁着金三银四面了五六家公司吧&#xff0c;也整理了一些问题供大家参考一下&#xff08;适合经验三年左右的&#xff09;。 面试问题&#xff08;答案是我自己总结的&#xff0c;不一定正确&#xff09;&#xff1a; 总结&#xff1a; 最近趁着金三银四面了五六家公…...

编程日记 2025/2/6 5:29:39

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/11/4 16:08:05

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/10/31 17:52:25

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/11/1 19:15:39

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/11/3 19:22:42

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/10/17 17:04:15

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/11/1 2:53:40

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/10/5 6:09:34

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/10/25 5:20:46

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/10/26 2:48:36

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/11/3 2:51:56