01-06 项目实战
1 代码规范
2 CSS编写顺序
3 组件化开发思想
组件化开发思路
项目整体思路 – 各个击破
07_(掌握)王者荣耀-top-整体布局完成
完整代码
01_page_top1.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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.top {border: 1px solid #f5f5f5;}.top .area {display: flex;justify-content: space-between;/* align-items: normal; */height: 41px;line-height: 41px;}.top .left-area {display: flex;}.top .left-area .logo a {display: block;width: 150px;text-indent: -9999px;background: url(./img/top_logo.png) no-repeat center center;}.top .right-area {display: flex;}.top .right-area .item a {position: relative;display: block;font-size: 14px;color: #464646;}.top .right-area .item a.ranking {margin-left: 20px;padding-right: 30px;}.top .right-area .item a.ranking::after {content: "";position: absolute;width: 30px;height: 30px;right: 0;top: 0;bottom: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat 0 0;opacity: 0.2;transform: rotate(90deg);}.top .right-area .item a.growth {padding-left: 30px;}.top .right-area .item a .icon-grow {position: absolute;width: 30px;height: 30px;left: 0;top: 0;bottom: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat -30px 0;}</style>
</head>
<body><div class="top"><div class="top_wrapper area"><div class="left-area"><h2 class="logo"><a href="#">腾讯游戏</a></h2><div class="recommend"><img src="./img/recommend_game.jpg" alt=""></div></div><ul class="right-area"><li class="item"><a class="growth" href="#"><i class="icon-grow"></i>成长守护平台</a></li><li class="item"><a class="ranking" href="#">腾讯游戏排行榜</a></li></ul></div></div></body>
</html>逐步细节
建议思路：先写html结构，再去写对应的CSS（效率高）
另一种思路：写好一个结构就去写对应的css（容易理解，效率低）
先做边框
<!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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><style>.top{height: 41px;border: 1px solid #f5f1f5;}</style>
</head>
<body><div class="top"></div>
</body>
</html>
先做一个wrapper
<!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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><style>.top{height: 41px;border: 1px solid #f5f1f5;}.wrapper{width: 980px;margin: 0 auto;/*把wrapper放中间*/height: 41px;background-color: orange;}</style>
</head>
<body><div class="top"><div class="wrapper"></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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.top{border: 1px solid #f5f1f5;}.top .area{height: 41px;background-color: orange;}</style>
</head>
<body><div class="top"><div class="top_wrapper area"></div></div>
</body>
</html>/* common.css公共的样式 *//* wrapper中间包裹的区域 */
.top_wrapper {width: 980px;margin: 0 auto;
}/* reset.css样式重置文件 */
/* margin/padding重置 */
body {padding: 0;margin: 0;
}08_(掌握)王者荣耀-top-top-left展示实现
<!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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.top{border: 1px solid #f5f1f5;}.top .area{display: flex;justify-content: space-between;height: 41px;line-height: 41px;}.top .left-area{display: flex;}.top .right-area{background-color: rgb(0, 255, 217);}.top .left-area .logo a{display: block;width: 150px;text-indent: -9999px;/*隐藏a元素的文字 腾讯游戏*/background: url(./img/top_logo.png) no-repeat center center;}</style>
</head>
<body><div class="top"><div class="top_wrapper area"><div class="left-area"><h2 class="logo"><a href="#">腾讯游戏</a></h2><div class="recommend"><img src="./img/recommend_game.jpg" alt=""></div></div><div class="right-area">2</div></div></div>
</body>
</html>
09_(掌握)王者荣耀-top-top-right展示实现
<!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>王者荣耀-top</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.top{border: 1px solid #f5f1f5;}.top .area{display: flex;justify-content: space-between;height: 41px;line-height: 41px;}.top .left-area{display: flex;}.top .left-area .logo a{display: block;width: 150px;text-indent: -9999px;/*隐藏a元素的文字 腾讯游戏*/background: url(./img/top_logo.png) no-repeat center center;}.top .right-area{display: flex;}.top .right-area .item a{position: relative;display: block;font-size:14px;color: #464646;}.top .right-area .item a.ranking{margin-left: 20px;padding-right: 30px;}.top .right-area .item a.ranking::after{content: "";position: absolute;width: 30px;height: 30px;top: 0;bottom: 0;right: 0;margin:auto 0;background: url(./img/top_sprite.png) no-repeat 0 0;opacity: 0.2;transform: rotate(90deg);}.top .right-area .item a.growth{padding-left: 30px;}.top .right-area .item a .icon-grow{position: absolute;width: 30px;height: 30px;top: 0;bottom: 0;left: 0;margin: auto 0;background: url(./img/top_sprite.png) no-repeat -30px 0;}</style>
</head>
<body><div class="top"><div class="top_wrapper area"><div class="left-area"><h2 class="logo"><a href="#">腾讯游戏</a></h2><div class="recommend"><img src="./img/recommend_game.jpg" alt=""></div></div><ul class="right-area"><li class="item"><a class="growth" href="#"><i class="icon-grow"></i>成长守护平台</a></li><li class="item"><a class="ranking" href="#">腾讯游戏排行榜</a></li></ul></div></div>
</body>
</html>
10_(掌握)王者荣耀-header-整体布局实现
完整代码
<!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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {background-color: rgba(0,0,0,.8);}.header .area {display: flex;justify-content: space-between;height: 84px;}.header .left-area {display: flex;}.header .left-area .logo a {position: relative;top: 50%;transform: translate(0, -50%);display: block;width: 200px;height: 54px;text-indent: -9999px;background: url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list {display: flex;margin-left: 30px;}.header .left-area .nav-list .item {width: 110px;padding-right: 5px;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active {background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item a {display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a {color: #e4b653;}.header .left-area .nav-list .item a .desc {display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc {color: #91763f;}.header .left-area .search {margin-left: 10px;}.header .left-area .search a {position: relative;top: 50%;transform: translate(0, -50%);display: block;width: 27px;height: 26px;background: url(./img/nav_search.png);}.header .right-area {display: flex;align-items: center;}.header .right-area .image img {border: 1px solid #d9ad50;border-radius: 50%;}.header .right-area .info {margin-left: 12px;}.header .right-area .info a {color: #fff;}.header .right-area .info p {font-size: 14px;color: #858792;margin-top: 5px;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area"><h1 class="logo"><a href="#">王者荣耀</a></h1><ul class="nav-list"><li class="item active"><a href="#">游戏资料<span class="desc">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="desc">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="desc">MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="desc">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="desc">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="desc">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="desc">NEW GAMES</span></a></li></ul><div class="search"><a href="#"></a></div></div><div class="right-area"><a class="image" href="#"><img src="./img/header_login.png" alt=""></a><div class="info"><a href="#">欢迎登录</a><p>登录后查看游戏战绩</p></div></div></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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;line-height: 84px;background-color: orange;}.header .left-area{background-color: red;}.header .right-area{background-color: green;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area">1</div><div class="right-area">2</div></div></div></body>
</html>
11_(掌握)王者荣耀-header-logo展示实现
注意：网站的logo一半我们用h1包裹，来做网站搜索优化，并且h1里面包裹一个a，超链接。
<!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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;margin-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .right-area{background-color: green;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area"><h1 class="logo"><a href="#">王者荣耀</a></h1><ul class="nav-list"><li class="item active"><a href="#">游戏资料<span class="desc">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="desc">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="desc">MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="desc">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="desc">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="desc">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="desc">NEW GAMES</span></a></li></ul></div><div class="right-area">2</div></div></div></body>
</html>12_(掌握)王者荣耀-header-导航展示实现
<!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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;padding-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .right-area{background-color: green;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area"><h1 class="logo"><a href="#">王者荣耀</a></h1><ul class="nav-list"><li class="item active"><a href="#">游戏资料<span class="desc">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="desc">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="desc">MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="desc">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="desc">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="desc">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="desc">NEW GAMES</span></a></li></ul></div><div class="right-area">2</div></div></div></body>
</html>
13_(掌握)王者荣耀-header-搜索和登录展示实现
<!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>王者荣耀-header</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.header {height: 84px;background-color: rgba(0,0,0,.8);}.header .area{display: flex;justify-content: space-between;height: 84px;}.header .left-area{display: flex;}.header .left-area .logo a{position: relative;top:50%;transform: translate(0,-50%);display: flex;width: 200px;height: 54px;text-indent: -9999px;background:url(./img/logo.png) no-repeat center center;}.header .left-area .nav-list{display: flex;margin-left: 25px;}.header .left-area .nav-list .item{width: 110px;padding-right: 5px; }.header .left-area .nav-list a{display: block;height: 100%;box-sizing: border-box;padding-top: 20px;font-size: 18px;color: #c9c9dd;text-align: center;}.header .left-area .nav-list a .desc{display: block;margin-top: 8px;font-size: 12px;color: #858792;}.header .left-area .nav-list .item:hover,.header .left-area .nav-list .item.active{background: url(./img/main_sprite.png) no-repeat 0 0;}.header .left-area .nav-list .item:hover a,.header .left-area .nav-list .item.active a{color: #e4b653;}.header .left-area .nav-list .item:hover .desc,.header .left-area .nav-list .item.active .desc{color: #91763f;}.header .left-area .search{margin-left: 10px;}.header .left-area .search a{position: relative;top:50%;transform: translate(0,-50%);display: block;width: 27px;height: 26px;background: url(./img/nav_search.png);}.header .right-area{display: flex;align-items: center;}.header .right-area .image img{border:1px solid #d9ad50;border-radius: 50%;}.header .right-area .info{margin-left: 12px;}.header .right-area .info a{color: #fff;}.header .right-area .info p{font-size: 14px;color: #858792;math-depth: 5px;}</style>
</head>
<body><div class="header"><div class="area header_wrapper"><div class="left-area"><h1 class="logo"><a href="#">王者荣耀</a></h1><ul class="nav-list"><li class="item active"><a href="#">游戏资料<span class="desc">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="desc">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="desc">MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="desc">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="desc">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="desc">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="desc">NEW GAMES</span></a></li></ul><div class="search"><a href="#"></a></div></div><div class="right-area"><a class="image" href="#"><img src="./img/header_login.png" alt=""></a><div class="info"><a href="#">欢迎登陆</a><p>登陆后查看游戏战绩</p></div></div></div></div></body>
</html>
14_(掌握)王者荣耀-main-news区域整体布局
完整代码
<!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: orange;}.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"></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>逐步细节
建议这样做：两边给一个固定的宽度，中间给一个flex 1让中间新闻的宽度是弹性的
<!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: #0f0;}.news-section .news{flex: 1;background-color: purple;}.news-section .download{width: 236px;background-color: skyblue;}</style>
</head>
<body><div class="main main_wrapper"><div class="news-section"><div class="banner"></div><div class="news"></div><div class="download"></div></div><div class="content-section"></div><div class="match-section"></div></div></body>
</html>15_(掌握)王者荣耀-main-news下载区域实现
<!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: #0f0;}.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"></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>
总结：内容回顾
一. vertical-align(了解)
1.1. vertical-align其他值
-
给行内级元素设置
-
middle
-
基线+x高度的一半
-
1.2. 行内块级元素其他现象
二. CSS整体内容回顾
三. 项目实战
3.1. 代码规范(重要)
3.2. CSS编写顺序
-
定位/浮动/flex
-
display/visibility
-
box model
-
文本/文字
-
background
-
其他
四. 王者荣耀
4.1. top区域
4.2. header区域
4.3. main-news区域(正在进行ing)
练习
自己往后做(王者荣耀)
-
news(必须做)
-
banner
-
news-list
-
![[Proteus仿真]基于51单片机的智能温控系统](assets/image-20250203190154-mkgk37q.png)
