问题描述:
蓝桥知识网
介绍
蓝桥为了帮助大家学习,开发了一个知识汇总网站,现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。
规定
请勿自定义页面数据,必须使用 data.txt 所提供的页面数据。
请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径等,以免造成无法判题通过。
判分标准
本题根据页面布局的相似度给分,低于 50% 得 0 分,高于 50% 则按比例给分。
真题地址
css部分
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
/* header部分 */
.header{
background-color:#a6b1e1 ;
height: 427px;
display: flex;
}
.wrap{
width: 1024px;
margin: 0 auto;
margin-top: 13px;
/* 父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.
就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。导致高度塌陷
这里给父元素设置了flex就不会引起这个高度塌陷 */
}
.wrap .nav{
height: 46px;
display: flex;
justify-content: space-between;
color: white;
}
.nav h1 {
font-size: 18px;
font-weight: 500;
}
.nav ul{
display: flex;
}
.nav ul li{
font-size: 16px;
margin-right: 16px;
}
.container{
display: flex;
/* justify-content: center; */
align-items: center;
flex-direction: column;
}
.container .title{
color: black;
font-size: 45px;
margin-top: 30px;
font-weight: 500;
}
.container .text{
color: white;
font-size: 21px;
font-weight: 200;
margin-top: 62px;
}
.container .join{
color: #efbfbf;
font-size: 18px;
border-radius: 2px;
box-shadow: inset 0 0 0 2px #efbfbf;
margin-top: 36px;
padding: 14px;
/* 这里我是设置padding达到文字居中的效果 也可以
将行高设置line-height和盒子一样高达到居中效果 */
}
/* 身体部分 */
.main{
width: 1024px;
height: 302px;
margin: 74px auto 0 auto;
}
.main ul li{
height: 144px;
width: 502px;
margin-bottom:20px;
/* padding-bottom:20px; */
}
.main ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.main .tit{
font-size: 30px;
font-weight: 200;
color: black;
margin-bottom: 20px;
}
.main .titxx{
font-size: 18px;
color: #aaa;
line-height: 1.4em;
}
/* footer部分 */
.footer{
border-top: solid 1px;
}
.footer .wrapdd{
margin: 0 auto;
width: 1024px;
height: 80px;
text-align: center;
}
.footer .wrapdd h1{
font-size: 14px;
color: #aaa;
margin: 30px auto 10px auto;
font-weight: 500;
}
.footer .wrapdd h2{
font-size: 14px;
color: #aaa;
font-weight: 500;
}
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>
<div class="header">
<div class="wrap">
<div class="nav">
<h1>蓝桥知识网</h1>
<ul>
<li>首页</li>
<li>热门技术</li>
<li>使用手册</li>
<li>知识库</li>
<li>练习题</li>
<li>联系我们</li>
<li>更多</li>
</ul>
</div>
<div class="container">
<h1 class="title">蓝桥云课</h1>
<span class="text">随时随地丰富你的技术栈!</span>
<div class="join">加入我们</div>
</div>
</div>
</div>
<div class="main">
<ul>
<li>
<div class="tit">人工智能</div>
<div class="titxx">
人工智能亦称智械、机器智能,指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
</div>
</li>
<li>
<div class="tit">
前端开发
</div>
<div class="titxx">
前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程,通过 HTML,CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。
</div>
</li>
<li>
<div class="tit"> 后端开发</div>
<div class="titxx">
后端开发是实现页面的交互逻辑,通过使用后端语言来实现页面的操作功能,例如登录、注册等。
</div>
</li>
<li>
<div class="tit">信息安全</div>
<div class="titxx">
ISO(国际标准化组织)的定义为:为数据处理系统建立和采用的技术、管理上的安全保护,为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
</div>
</li>
</ul>
</div>
<div class="footer">
<div class="wrapdd">
<h1>© 蓝桥云课 2022</h1>
<h2>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</h2>
</div>
</div>
</body>
</html>
最终效果: