蓝桥杯13届真题页面布局-蓝桥知识网

最新推荐文章于 2023-07-02 15:36:01 发布

Snoopydate

最新推荐文章于 2023-07-02 15:36:01 发布

阅读量474

点赞数 2

文章标签：蓝桥杯 css css3 前端 html

本文链接：https://blog.csdn.net/qq_55853408/article/details/129757672

版权

问题描述：
蓝桥知识网
介绍
蓝桥为了帮助大家学习，开发了一个知识汇总网站，现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。
规定
请勿自定义页面数据，必须使用 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>

最终效果：
在这在这里插入图片描述
里插入图片描述

Snoopydate

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
蓝桥杯13届真题页面布局-蓝桥知识网

问题描述：蓝桥知识网介绍蓝桥为了帮助大家学习，开发了一个知识汇总网站，现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。规定请勿自定义页面数据，必须使用 data.txt 所提供的页面数据。请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。判分标准本题根据页面布局的相似度给分，低于 50% 得 0 分，高于 50% 则按比例给分。
复制链接

扫一扫