蓝桥web真题：第一届大学组6-7题解析

jayLog

已于 2022-04-25 10:24:37 修改

阅读量1.2k

点赞数 4

分类专栏：蓝桥web 前端 js 文章标签：前端

于 2022-04-17 12:02:26 首次发布

本文链接：https://blog.youkuaiyun.com/jayLog/article/details/124227382

版权

文章目录

第六题：蓝桥知识网

第七题：布局切换

end

第六题：蓝桥知识网

介绍：为了帮助大家学校，开发了一个知识汇总网站，现在想涉及一个简单美观的首页。本题请根据要求来完成一个首页布局。

目标： 实现到mark.png的样子，如下
请添加图片描述

题目分析：

首先我把网页划分成了三个部分了。然后根据元素的位置，先预想好大概的div层级

请添加图片描述

网页的顶部： 再次划分了四个div。其中顶一个用来存放logo和顶部导航。

顶部导航又是一个层级，多个div需要并行，布局使用flex默认布局即可。然后字体大小等的，根据要求翻译成css即可。这里唯一有疑问的点就是文档顶部的给的框度不足以撑到1024，为了好看我直接让logo和顶部导航居两边了，其他参数按mark.png

请添加图片描述

中间部分：

div层级如下，样式依照要求来即可，超出的文章换行使用flex-wrap:wrap

请添加图片描述

底部部分：

比较简单两个div即可

请添加图片描述

关键代码:

index.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 class="site-head">
      <div class="nav block-center">
        <div class="logo">蓝桥知识网</div>
        <div class="nav-list">
          <div class="nav-list-item">首页</div>
          <div class="nav-list-item">热门技术</div>
          <div class="nav-list-item">使用手册</div>
          <div class="nav-list-item">知识库</div>
          <div class="nav-list-item">练习题</div>
          <div class="nav-list-item">联系我们</div>
          <div class="nav-list-item">更多</div>
          <div class="nav-list-item"></div