本文最后更新于 535 天前，其中的信息可能已经有所发展或是发生改变。
介绍
解题思路
没啥好说的，考验基本排版功底，上代码:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>蓝桥知识网</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!--TODO：请补充代码-->
<div id="banner">
<div class="box">
<div id="nav">
<span id="title">蓝桥知识网</span>
<div id="nav-fill"></div>
<span class="nav-item">首页</span>
<span class="nav-item">热门技术</span>
<span class="nav-item">使用手册</span>
<span class="nav-item">知识库</span>
<span class="nav-item">练习题</span>
<span class="nav-item">联系我们</span>
<span class="nav-item">更多</span>
</div>
<div id="main-box">
<h1 id="main-title">蓝桥云课</h1>
<span id="main-subtitle">随时随地丰富你的技术栈！</span>
<span id="join-btn">加入我们</span>
</div>
</div>
</div>
<div>
<div id="description">
<div class="box">
<div class="desc-item">
<span class="desc-title">人工智能</span>
<p class="desc-content">
人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
</p>
</div>
<div class="desc-item">
<span class="desc-title">前端开发</span>
<p class="desc-content">
前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
</p>
</div>
<div class="desc-item">
<span class="desc-title">后端开发</span>
<p class="desc-content">
后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。
</p>
</div>
<div class="desc-item">
<span class="desc-title">信息安全</span>
<p class="desc-content">
ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>© 蓝桥云课 2022</p>
<p>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</p>
</div>
</body>
</html>CSS
/*
TODO：请补充代码
*/
body {
margin: 0;
}
.box {
width: 1024px;
margin: 0 auto;
}
.nav-item {
display: inline-block;
padding: 0 8px;
font-size: 16px;
font-weight: bold;
}
#banner {
padding-top: 13px;
background-color: #a6b1e1;
}
#nav {
height: 46px;
line-height: 46px;
color: white;
}
#title {
font-size: 18px;
font-weight: bold;
}
#nav-fill {
display: inline-block;
width: 365px;
}
#main-box {
height: 427px;
text-align: center;
}
#main-title {
margin-top: 30px;
font-size: 45px;
color: black;
font-weight: normal;
}
#main-subtitle {
margin-top: 62px;
color: white;
font-size: 21px;
font-weight: 200;
}
#join-btn {
display: block;
margin: 36px auto;
width: fit-content;
padding: 10px 15px;
font-size: 18px;
color: #efbfbf;
border-radius: 2px;
box-shadow: inset 0 0 0 2px #efbfbf;
}
#description>.box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
/* height: 144px; */
margin-top: 74px;
}
.desc-item {
flex-basis: calc(50% - 10px);
}
.desc-title {
font-size: 30px;
font-weight: 200;
color: black;
}
.desc-content {
font-size: 18px;
color: #aaa;
line-height: 1.4em;
}
#footer {
height: 80px;
padding-top: 20px;
text-align: center;
}
#footer p {
margin-top: 10px;
font-size: 14px;
color: #aaa;
}页面效果
缩放67%，效果可能有所出入，不知道蓝桥杯咋判题，貌似footer还有一个上边框，忘记加了。
