web蓝桥杯真题--11、蓝桥知识网

介绍

蓝桥为了帮助大家学习,开发了一个知识汇总网站,现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

├── css
│   └── style.css
├── data.txt
├── index.html
└── mark.png

其中:

  • css/style.css 是样式文件。
  • data.txt 是页面数据文件。
  • index.html 是主页面。
  • mark.png 是页面参数标注图。

注意:打开环境后发现缺少项目代码,请手动键入下述命令进行下载:

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/06.zip && unzip 06.zip && rm 06.zip

目标

请根据 mark.png 图片上的参数标注,补充 css/style.css 和 index.html 文件中的代码。对于 mark.png 上未标注的参数,请结合效果图自行调整。

页面版心宽度为 1024px,请保证版心居中,让页面呈现如下图所示的效果:

完成布局的显示效果

页面数据在 data.txt 文件中,直接复制即可。

规定

  • 请勿自定义页面数据,必须使用 data.txt 所提供的页面数据。
  • 请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径等,以免造成无法判题通过。

判分标准

  • 本题根据页面布局的相似度给分,低于 50% 得 0 分,高于 50% 则按比例给分。

解题思路:

一个一个拼凑,然后当一个页面有两个块元素在不同位置的两行上时,怎么让它门居中对齐呢,尝试过display:flex;  justify-content:center;  此种方法行不通,他会把两个元素摆在同一行上,然后margin:auto;  也行不通,毫无反应

后来发现可以在父元素里面设置text-align: center;设置文本标签居中对齐就可以了,有些知识点不用就忘了

整体代码:

html:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><metaname="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 class="container"><div class="lanse"><div class="contain"><div class="one"><div class="lanqiao">蓝桥知识网</div><div class="index"><span>首页</span><span>热门技术</span><span>使用手册</span><span>知识库</span><span>练习题</span><span>联系我们</span><span>更多</span></div></div><div class="two">蓝桥云课</div><div class="three">随时随地丰富你的技术栈!</div><div class="four"><span>加入我们</span></div></div></div><div class="baise"><div class="lvse"><div class="one2"><div class="rengong"><div style="margin-bottom: 10px;  font-size: 30px; font-weight: 200; color: black;">人工智能</div><span style="font-size: 18px; color: #aaa; line-height: 1.4em;">人工智能亦称智械、机器智能,指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</span></div><div class="qianduan"><div style="margin-bottom: 10px; font-size: 30px; font-weight: 200; color: black;">前端开发</div><span style="font-size: 18px; color: #aaa; line-height: 1.4em;">前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程,通过 HTML,CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。</span></div><div class="houduan"><div style="margin-bottom: 10px; font-size: 30px; font-weight: 200; color: black;">后端开发</div><span style="font-size: 18px; color: #aaa; line-height: 1.4em;">后端开发是实现页面的交互逻辑,通过使用后端语言来实现页面的操作功能,例如登录、注册等。</span></div><div class="xinan"><div style="margin-bottom: 10px; font-size: 30px; font-weight: 200; color: black;">信息安全</div><span style="font-size: 18px; color: #aaa; line-height: 1.4em;">ISO(国际标准化组织)的定义为:为数据处理系统建立和采用的技术、管理上的安全保护,为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。</span></div></div><div class="dibu"><div class="yunke" style="font-size: 14px; color: #aaa; margin: auto;">© 蓝桥云课 2022</div><div style="font-size: 14px; color: #aaa; margin-top: 10px;">京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div></div></div></div></div></body>
</html>

css:

/*TODO:请补充代码*/\* {margin: 0;padding: 0;box-sizing: border-box;}.lanse {background-color: #a6b1e1;width: 100vm;height: 492px;display: flex;justify-content: center;}.lanse .contain {width: 1024px;height: 100%;}.lanse .contain .one {margin-top: 19px;height: 46px;display: flex;align-items: center;}.lanse .contain .one .index {margin-left: 365px;}.lanse .contain .one .index span {padding-right: 16px;font-size: 16px;color: white;}.lanse .contain .one .lanqiao {font-size: 18px;color: white;margin-left: 10px;}.lanse .contain .two {margin-top: 30px;font-size: 45px;color: black;display: flex;justify-content: center;}.lanse .contain .three {margin-top: 62px;font-size: 21px;font-weight: 200;color: white;display: flex;justify-content: center;}.lanse .contain .four {margin-top: 36px;display: flex;justify-content: center;}.lanse .contain .four span {font-size: 18px;color: #efbfbf;line-height: 40px;border-radius: 2px;width: 100px;display: flex;justify-content: center;box-shadow: inset 0 0 0 2px #efbfbf;}.lvse {/* background-color: #efbfbf; */height: 456px;}.lvse .one2 {/* background-color: #a54444; */width: 1024px;height: 302px;margin-top: 74px;display: flex;flex-wrap: wrap;margin: auto;margin-top: 74px;}.lvse .one2 .qianduan {height: 144px;width: 49%;margin-left: 20px;margin-top: 10px;}.lvse .one2 .xinan {height: 144px;width: 49%;margin-left: 20px;margin-top: 10px;}.lvse .one2 .houduan {height: 144px;width: 49%;margin-top: 10px;}.lvse .one2 .rengong {height: 144px;width: 49%;margin-top: 10px;}.lvse .dibu {border-top: 1px solid black;text-align: center;}.lvse .dibu .yunke {padding-top: 30px;padding: auto;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/636982.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Stream toList不能滥用以及与collect(Collectors.toList())的区别

Stream toList()返回的是只读List原则上不可修改&#xff0c;collect(Collectors.toList())默认返回的是ArrayList,可以增删改查 1. 背景 在公司看到开发环境突然发现了UnsupportedOperationException 报错&#xff0c;想到了不是自己throw的应该就是操作collection不当。 发…

spawn_group | spawn_group_template | linked_respawn

字段介绍 spawn_group | spawn_group_template 用来记录与脚本事件或boss战斗有关的 creatures | gameobjects 的刷新数据linked_respawn 用来将 creatures | gameobjects 和 boss 联系起来&#xff0c;这样如果你杀死boss&#xff0c; creatures | gameobjects 在副本重置之前…

测试覆盖与矩阵

4. Coverage - 衡量测试的覆盖率 我们已经掌握了如何进行单元测试。接下来&#xff0c;一个很自然的问题浮现出来&#xff0c;我们如何知道单元测试的质量呢&#xff1f;这就提出了测试覆盖率的概念。覆盖率测量通常用于衡量测试的有效性。它可以显示您的代码的哪些部分已被测…

【网络安全】【密码学】【北京航空航天大学】实验五、古典密码(中)【C语言实现】

实验五、古典密码&#xff08;中&#xff09; 实验目的和原理简介参见博客&#xff1a;古典密码&#xff08;上&#xff09; 一、实验内容 1、弗纳姆密码&#xff08;Vernam Cipher&#xff09; &#xff08;1&#xff09;、算法原理 加密原理&#xff1a; 加密过程可以用…

【跳槽面试】Redis中分布式锁的实现

分布式锁常见的三种实现方式&#xff1a; 数据库乐观锁&#xff1b;基于Redis的分布式锁&#xff1b;基于ZooKeeper的分布式锁。 本地面试考点是&#xff0c;你对Redis使用熟悉吗&#xff1f;Redis中是如何实现分布式锁的。 在Redis中&#xff0c;分布式锁的实现主要依赖于R…

对比一下HelpLook和Bloomfire知识库软件:谁更胜一筹?

在当今知识经济的浪潮中&#xff0c;知识库工具作为企业不可或缺的利器&#xff0c;对于提高工作效率、加强团队协作和优化员工培训等方面起着至关重要的作用。HelpLook和Bloomfire是众多知识库工具中的两款佼佼者&#xff0c;它们各自拥有独特的优势和特点。 一、HelpLook&…

解决 java.lang.NoClassDefFoundError: org/apache/poi/POIXMLTypeLoader 报错

在使用POI导出Excel表格的时候&#xff0c;本地运行导出没问题&#xff0c;但是发布到服务器后提示 “java.lang.NoClassDefFoundError: org/apache/poi/POIXMLTypeLoader” 下面是pom.xml中的配置 <dependency><groupId>org.apache.poi</groupId><art…

Linux查找二进制文件命令——whereis

whereis whereis 命令是一个 Linux/Unix 系统下的命令行命令&#xff0c;用于查询指定命令或程序的二进制文件、源代码文件和帮助文件的位置。 whereis 命令的语法如下&#xff1a; whereis [options] command其中&#xff0c;command 为要查询的命令或程序名称&#xff0c;…

【算法详解】力扣162.寻找峰值

​ 目录 一、题目描述二、思路分析 一、题目描述 力扣链接&#xff1a;力扣162.寻找峰值 峰值元素是指其值严格大于左右相邻值的元素。 给你一个整数数组 nums&#xff0c;找到峰值元素并返回其索引。数组可能包含多个峰值&#xff0c;在这种情况下&#xff0c;返回 任何一个…

大创项目推荐 深度学习验证码识别 - 机器视觉 python opencv

文章目录 0 前言1 项目简介2 验证码识别步骤2.1 灰度处理&二值化2.2 去除边框2.3 图像降噪2.4 字符切割2.5 识别 3 基于tensorflow的验证码识别3.1 数据集3.2 基于tf的神经网络训练代码 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x…

Webpack5入门到原理15:提取 Css 成单独文件

提取 Css 成单独文件 Css 文件目前被打包到 js 文件中&#xff0c;当 js 文件加载时&#xff0c;会创建一个 style 标签来生成样式 这样对于网站来说&#xff0c;会出现闪屏现象&#xff0c;用户体验不好 我们应该是单独的 Css 文件&#xff0c;通过 link 标签加载性能才好 …

gin介绍及helloworld

1. 介绍 Gin是一个golang的微框架&#xff0c;封装比较优雅&#xff0c;API友好&#xff0c;源码注释比较明确&#xff0c;具有快速灵活&#xff0c;容错方便等特点 对于golang而言&#xff0c;web框架的依赖要远比Python&#xff0c;Java之类的要小。自身的net/http足够简单&…

未来 AI 可能给哪些产业带来哪些进步与帮助?

AI时代如何要让公司在创新领域领先吗&#xff1f;拥抱这5种创新技能&#xff0c;可以帮助你的公司应对不断变化。包括人工智能、云平台应用、数据分析、 网络安全和体验设计。这些技能可以帮助你提高业务效率、保护公司知识资产、明智决策、满足客户需求并提高销售额。 现在就加…

Redis 面试题 | 01.精选Redis高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Java 代理模式详解

1. 代理模式 代理模式是一种比较好理解的设计模式。简单来说就是 我们使用代理对象来代替对真实对象(real object)的访问&#xff0c;这样就可以在不修改原目标对象的前提下&#xff0c;提供额外的功能操作&#xff0c;扩展目标对象的功能。 代理模式的主要作用是扩展目标对象…

低代码技术杂谈

一、探讨低代码的定义 “Low-Code”是什么&#xff1f;身为技术人员听到这种技术名词&#xff0c;咱们第一反应就是翻看维基百科 或者其他相关技术论文&#xff0c;咱们想看维基百科的英文介绍&#xff1a; A low-code development platform (LCDP) provides a development env…

AI辅助编程工具—Github Copilot

一、概述 Copilot是一种基于Transformer模型的神经网络&#xff0c;具有12B个参数。是GitHub和OpenAPI共同开发的编程辅助工具。GitHubCopilot是一款由人工智能驱动的结对编程编辑器&#xff0c;旨在帮助开发人员更加高效地工作。它利用OpenAICodex技术&#xff0c;将开发…

数据仓库简介

一、数仓概念 数据仓库&#xff0c;英文名称为Data Warehouse&#xff0c;可简写为DW或DWH。数据仓库&#xff0c;是为企业所有级别的决策制定过程&#xff0c;提供所有类型数据支持的战略集合。它是单个数据存储&#xff0c;出于分析性报告和决策支持目的而创建。 为需要业务…

套接字通信(附带单线程TCP套接字通信代码)

套接字-Socket 1. 概念 1.1 局域网和广域网 局域网&#xff08;LAN&#xff09;和广域网&#xff08;WAN&#xff09;是两种不同范围的计算机网络&#xff0c;它们用于连接多台计算机以实现数据共享和通信。 局域网&#xff08;LAN&#xff09;&#xff1a; 定义&#xff1…

这是一款关于网页自动化操作的软件

背景 有开发这款软件的想法是因为工作中有部分任务重复性太多&#xff0c;作为开发工程师&#xff0c;一开始自己写了脚本完成了这些任务。换个思路&#xff0c;各行各业中也会遇到重复性工作&#xff0c;但是并不是每个人都会开发&#xff0c;那本人就想有没有一种软件也可以…