蓝桥杯Web组备赛笔记1

已于 2023-03-12 20:02:58 修改
阅读量1.1k 收藏 39
点赞数 10
分类专栏： 蓝桥杯Web组 文章标签： html css html5
于 2023-03-12 19:52:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51478745/article/details/129413662
版权

目录

一、flex布局

1、详细的使用解释

2、简单例子

3、flex布局要认识两个轴

4、版心布局

5、13届蓝桥真题 （1，6）

二、grid布局

1、应用

2、代码例子

三、CSS动画

1、注意区别

2、代码例子

3、13届蓝桥真题 （2）

4、更多transform属性的介绍

四、媒体查询

一、flex布局

1、详细的使用解释，小伙伴们可以看小编的下面这篇文章🧐

HTML基础第六课（冲浪笔记6）_申小兮IU的博客-CSDN博客Flex、方向排列、换行、Flex多轴、order、Flex的放大缩小https://blog.csdn.net/qq_51478745/article/details/125712554

2、这边小编再来个简单例子，推荐一个编写布局小技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
        }
        .body{
            width: 150px;
            height: 150px;
            background-color: aqua;
        }
        .body:nth-child(1){
            background-color: red;
        }
        .body:nth-child(2){
            background-color: blue;
        }
        .body:nth-child(3){
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="body"></div>
        <div class="body"></div>
        <div class="body"></div>
    </div>
</body>
</html>

注意：利用编译器提供的调试工具，直接编辑调整需要的布局，然后直接copy代码

3、flex布局要认识两个轴

（1）主轴：x轴

（2）交叉轴：y轴

4、版心布局

（1）含义：设计师设定的一个区域，比如宽度1260px、1024px，目前主流的设计稿的大小，在针对不同设备，不同屏幕分辨率，进行版心的调整

（2）代码例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header,.footer{
            width: 100%;
            background-color: aqua;
        }
        .header{
            height: 60px;
        }
        .footer{
            height: 100px;
            border-top: 1px solid black;
            box-sizing: border-box;
        }
        .body{
            width: 1024px;
            min-height: calc(100vh - 60px - 100px);
            background-color: red;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</body>
</html>

 

5、13届蓝桥真题 （1，6）

（1）第一题：水果拼盘

/* TODO：待补充代码 */
#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

 （2）第六题：蓝桥知识网

<!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="header">
      <div class="head">
        <div class="logo">蓝桥知识网</div>
        <ul>
          <li>首页</li>
          <li>热门技术</li>
          <li>使用手册</li>
          <li>知识库</li>
          <li>练习题</li>
          <li>联系我们</li>
          <li>更多</li>
        </ul>
      </div>
      <div class="header-content">
        <div class="title">蓝桥云课</div>
        <div class="text">随时随地丰富你的技术栈！</div>
        <div class="join">加入我们</div>
      </div>
    </div>
    <div class="body">
      <div class="body-content">
        <div class="box">
          <div class="box-title">人工智能</div>
          <div class="box-text">人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</div>
        </div>
        <div class="box">
          <div class="box-title">前端开发</div>
          <div class="box-text">前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</div>
        </div>
        <div class="box">
          <div class="box-title">后端开发</div>
          <div class="box-text">后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。</div>
        </div>
        <div class="box">
          <div class="box-title">信息安全</div>
          <div class="box-text">ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="foot">
        <div class="foot-text">© 蓝桥云课 2022</div>
        <div class="foot-text">京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
      </div>
    </div>
  </body>
</html>

/*
 TODO：请补充代码
*/
*{
    margin: 0;
    padding: 0;
}
.header{
    width: 100%;
    background-color: #a6b1e1;
    padding-top: 13px;
}
.head{
    width: 1024px;
    height: 46px;
    margin: auto;
    /* background-color: blanchedalmond; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo{
    font-size: 18px;
    color: white;
}
ul{
    display: flex;
}
li{
    font-size: 16px;
    color: white;
    margin: auto 16px;
    list-style: none;
}
.header-content{
    width: 1024px;
    height: 427px;
    margin: auto;
    padding-top: 30px;
    box-sizing: border-box;
}
.title{
    text-align: center;
    font-size: 45px;
    color: black;
    margin-bottom: 62px;
}
.text{
    font-size: 21px;
    font-weight: 200;
    color: white;
    text-align: center;
    margin-bottom: 36px;
}
.join{
    width: 120px;
    color: #efbfbf;
    margin: auto;
    text-align: center;
    padding: 10px 0px;
    font-size: 18px;
    border: 2px solid #efbfbf;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px #efbfbf;
}
.body{
    width: 100%;
}
.body-content{
    width: 1024px;
    height: 302px;
    margin: auto;
    /* background-color: #a6b1e1; */
    margin-top: 74px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.box{
    height: 144px;
    width: calc((1024px - 20px) / 2);
}
.box-title{
    font-size: 30px;
    font-weight: 200;
    color: black;
}
.box-text{
    font-size: 18px;
    color: #aaa;
    line-height: 1.4em;
}
.footer{
    width: 100%;
    border-top: 1px solid gray;
}
.foot{
    width: 1024px;
    height: 80px;
    margin: auto;
    padding-top: 30px;
    box-sizing: border-box;
}
.foot-text{
    text-align: center;
    font-size: 14px;
    color: #aaa;
}
.foot-text:nth-of-type(2){
    margin-top: 10px;
}

二、grid布局

1、应用：适用于格子布局，商品列表

2、代码例子

（1）自定义行列数及行列的长度

.grid{
    width: 500px;
    height: 500px;
    background-color: aqua;
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
}

当设置的行列总长大于父级所设置的宽高，会出现溢出 

（2）解决溢出最好的方法就是将所有的行列长度用属性值auto替代，这样就是自动计算每个各自的大小

grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;

（3）通过函数repeat()设置行列

grid-template-columns: repeat(3,1fr);/* 3是列数，1fr是均等分，fr是单位 */
grid-template-rows: repeat(3,1fr);/* 3是行数 */

其效果同（2）

（4）常见的形式：高度由内容撑开，这时候就需要内容与内容间的间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid{
            width: 500px;
            height: 500px;
            background-color: aqua;
            display: grid;
            grid-template-columns: repeat(3,1fr);/* 3是列数，1fr是均等分，fr是单位 */
            grid-template-rows: repeat(3,1fr);/* 3是行数 */
            gap: 10px;/* 间距 */
            padding: 20px;/* 内边框 */
        }
        .dot{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</body>
</html>

（5） 内容居中

①法一：父级设置居中

justify-items: center;

更多设置技巧同样可以在调试器上直接设置自己需要的样式，然后直接复制代码

②法二：在子级本身设置居中

justify-self: center;

（6）设置区域模板，快速定位子元素位置

该方法能够特别容易编写出骰子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid{
            width: 500px;
            height: 500px;
            background-color: aqua;
            display: grid;
            grid-template-columns: repeat(3,1fr);/* 3是列数，1fr是均等分，fr是单位 */
            grid-template-rows: repeat(3,1fr);/* 3是行数 */
            grid-template-areas:
            'a1 a2 a3'
            'a4 a5 a6'
            'a7 a8 a9';/* 设置区域格子名称 */
            justify-items: center;
            align-items: center;
        }
        .dot{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            grid-area: a5;/* 确定元素在哪个格子区域 */
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="dot"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid{
            width: 500px;
            height: 500px;
            background-color: aqua;
            display: grid;
            grid-template-columns: repeat(3,1fr);/* 3是列数，1fr是均等分，fr是单位 */
            grid-template-rows: repeat(3,1fr);/* 3是行数 */
            grid-template-areas:
            'a1 a2 a3'
            'a4 a5 a6'
            'a7 a8 a9';
            justify-items: center;
            align-items: center;
        }
        .dot{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }
        .dot:nth-child(1){
            grid-area: a1;/* 注意这里的a1是没有单引号包裹的 */
        }
        .dot:nth-child(2){
            grid-area: a3;
        }
        .dot:nth-child(3){
            grid-area: a5;
        }
        .dot:nth-child(4){
            grid-area: a7;
        }
        .dot:nth-child(5){
            grid-area: a9;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</body>
</html>

三、CSS动画

1、注意区别

transform（转换）、transition（过渡）、translate(位移)

2、代码例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .card{
            width: 200px;
            height: 400px;
            background-color: cadetblue;
            transform: translate(100px);/* 平移 */
            transition: all 0.3s;/* 过渡 */
            transform: rotate(10deg);/* 顺时针旋转【默认基于中点旋转】 */
            transform-origin: 50% 100%;/* 基于某点【基于本身宽高的x轴 y轴】旋转 */
        }   
    </style>
</head>
<body>
    <div class="card"></div>
</body>
</html>

3、13届蓝桥真题 （2）

/*TODO：请补充 CSS 代码*/
#box:hover #item1{
  transform: rotate(-60deg);
}
#box:hover #item2{
  transform: rotate(-50deg);
}
#box:hover #item3{
  transform: rotate(-40deg);
}
#box:hover #item4{
  transform: rotate(-30deg);
}
#box:hover #item5{
  transform: rotate(-20deg);
}
#box:hover #item6{
  transform: rotate(-10deg);
}
#box:hover #item7{
  transform: rotate(10deg);
}
#box:hover #item8{
  transform: rotate(20deg);
}
#box:hover #item9{
  transform: rotate(30deg);
}
#box:hover #item10{
  transform: rotate(40deg);
}
#box:hover #item11{
  transform: rotate(50deg);
}
#box:hover #item12{
  transform: rotate(60deg);
}

4、更多transform属性的介绍

小伙伴们可以参考小编的这篇文章🧐

HTML基础第五课（冲浪笔记5）_color: aqua;_申小兮IU的博客-CSDN博客媒体查询、动画效果、清除浮动、过渡属性、calc函数、透明度、鼠标手势、最大最小宽度、transform属性、https://blog.csdn.net/qq_51478745/article/details/125700227

四、媒体查询

代码例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        @media screen and (max-width:450px) {
            .box{
                width: 80px;
                height: 80px;
                background-color: blue;
            }
        }
        @media screen and (min-width:450px) and (max-width:600px){
            .box{
                width: 400px;
                height: 400px;
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

五秒法则
关注
专栏目录
第十三届蓝桥杯(Web应用开发)省赛 大学组
yinuo886的博客
04-14 4205
文章目录蓝桥杯大学组省赛(web)01 水果拼盘（5分）02 展开你的扇子（5分）03 和手机相处的时光（10分）04 灯的颜色变化（10分）05 冬奥大抽奖（15分）06 蓝桥知识网（15分）07 布局切换（20分）08 购物车（20分）09 寻找小狼人（25分）10 课程列表（25分） 蓝桥杯大学组省赛(web) 01 水果拼盘（5分） Todo：相同颜色的水果放在相同颜色的圆盘正中间。 思路：flex布局，使用flex-direction和flex-wrap属性即可实现。 代码实现 /* TODO
备赛蓝桥杯python研究生组
qq_42708183的博客
11-03 2673
在选择赛道的时候，纠结python和java的组别，一方面java熟练度远大于python，但在研究生阶段，由于做图像处理方向，java的用处极少，因此选报python组也尽可能的熟练一下python。并以此将比赛学习过程记录下来，一方面勉励自己，另一方面记录笔记。 首先是赛前资料的收集： 比赛环境统一： 编译平台： 安装方式：点击官网地址→选择Windows x86-64 web-based installer→安装时自带python3.8版本 PYTHON IDLE Pytho..
蓝桥杯Web组备赛笔记5
申小兮和林小兮的博客宝
03-29 1045
vue引入式，生命周期，组件传参方式，Axios，13届省赛第七、八题
蓝桥杯web组国三选手题纲解析和备赛技巧--经验分享
最新发布
雨溪的博客
07-01 914
Hi👋,这里是瑞雨溪**->一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我->**我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉。
92天倒计时，蓝桥杯省赛备赛攻略来啦~
热门推荐
实验楼--动手做实验，轻松学IT！
01-07 1万+
就在前几天，蓝桥杯大赛组委会公布了第十三届蓝桥杯个人赛省赛时间，将于 2022 年 4 月 9 日正式开赛！ 第十三届蓝桥杯的赛事大致安排，也可以看看以下时间轴： （PS：马上放寒假了，要努力备赛！机会都是留给有准备的人~） 在备赛攻略分享前，我还给大家准备了全套竞赛规则和说明~ 竞赛规则 了解完省赛比赛时间、竞赛规则和说明，我们就要全面了解如何备赛了，这份蓝桥杯备赛攻略请收好了！ 备赛的方式有多种，比如看课程、刷蓝桥杯真题等等。 下面是我们整理的蓝桥杯官方备考资源，分「真题下载、真题讲解、备赛讲座、w
蓝桥杯Web组备赛笔记7
申小兮和林小兮的博客宝
04-06 1235
node.js，api，http的概念及使用
蓝桥杯web组备考笔记（仅个人简单记录）
Jclam的博客
04-14 590
在vue中`v-for` 指令是 Vue 中用于循环渲染数组或对象的指令，它接收一个参数，通常格式为 `(item, index) in arr`，`item` 为当前遍历到的元素，`index` 为当前元素在数组中的索引值，`arr` 为需要遍历的数组或对象。2、再定义一个变量接收获取到的数据(注意在调试输出窗口查看数据名，如数据中数组名字为result)，例如定义一个数组去接收获取到的数据(假设该数据为数组，元素为对象)。1.Jquery中的eq(index)方法用于获取标签元素中的具体子元素。
蓝桥杯Web赛学习笔记-附2022-2023题目试炼
04-05
内涵知识学习，还有2022年，2023年题目练习源码 一下是部分联系题目 markdown文档解析.md 全球新冠疫情数据统计.md 外卖给好评.md 年度明星项目.md 收集帛书碎片.md 电影院排座位.md 自适应页面.md ...
第十三届蓝桥杯Web竞赛试题考查范围记录
Pulse的博客
12-02 2291
第十三届蓝桥杯Web竞赛试题考查范围记录
蓝桥杯新增web应用开发科目—送给想要参赛的小伙伴们一份备赛指南
m0_60575487的博客
03-20 570
试题考查选手解决实际问题的能力，侧重考查选手阅读、分析、理解需求，实现功能性 需求（静态、动态页面效果，API 开发与调用），实现非功能性需求（如兼容性、安全性、 性能），产品交付（打包、部署）等方面的能力。其实，如果你是个老练的前端程序猿，一眼就能看出问题所在，题目中页面展示效果很明显是缺少了样式的渲染，所以这道题就属于那种一两分钟就可以做完的！选手可在比赛中的任何时间查看自己之前提交的代码，也可以重新提交任何题目的答 案，对于每个试题，仅有最后的一次提交被保存并作为评测的依据。
[蓝桥杯嵌入式]hal库 stm32 PWM的使用（随时修改占空比，随时修改频率）
m0_60721649的博客
04-18 344
你平时浏览网页的过程中遇到过哪些 302 的场景？将分频值设置为800（最好是800-1），自动重装值为100（最好是100-1）打开自动重装载使能，否认修改频率或者占空比时可能出现pwm输出停滞一小段的情况。（虽然输出比较模式也能输出可变的PWM，但是需要利用中断，会加大代码复杂度）TCP 协议怎么保证可靠的，UDP 为什么不可靠？HTTP 如何实现长连接？使得PWM按照上面的预设参数输出PWM。HTTP 常用的请求方式，区别和用途？启动定时器2的通道2的PWM输出模式。你对 TCP 滑动窗口有了解嘛？
蓝桥杯Web组备赛笔记4
申小兮和林小兮的博客宝
03-14 495
es6新增特性【set()，构造器，构造函数】及高阶函数【filter()，find()】使用，13届蓝桥真题 （9），数据劫持
[前端学习笔记1]蓝桥杯Web应用开发组考点内容
Sunshine_xiaohao的博客
11-08 7309
蓝桥杯新推出了前端组，正好在找实习的方向，决定先学学前端，以赛促学，希望明年暑假能找到一个前端的实习（导师允许的前提下）。 我完全是前端小白一个呀（准确的说开发小白一个，后端我也不会，但是我也想成为全栈工程师啊！！），所以今天先看看蓝桥杯考的东西都是干啥用的，百度搜一搜。 学习路线：鱼皮-前端路线 ———————————————————— HTML(Hyper Text Markup Language) HTML 是一种标记语言，使用特殊的语法或标记来向浏览器描述网页的结构。HTML 元素由开始和结束标签构
蓝桥杯web组第二次线上模拟复习版
qq_51481160的博客
04-03 837
本笔记用于我自己备赛蓝桥杯所用，有很多地方借鉴的其他大佬的笔记哈。
蓝桥杯Web组知识点——ES6篇
Lyy_ID的博客
10-22 537
飞书云文档：蓝桥杯web组知识点——ES6篇建议打开飞书云文档食用，非飞书用户也可查看。
蓝桥杯Web组知识点——CSS篇
Lyy_ID的博客
10-14 665
蓝桥杯web组知识点——css篇 大纲：css基础语法 盒子模型 display属性 浮动和定位 css3新特性 flex布局 媒体查询
蓝桥杯Web组备赛笔记3
申小兮和林小兮的博客宝
03-14 385
jq基础、原生xhr和ajax的使用、13届蓝桥真题（5）解答
2023年第十四届蓝桥杯Web应用开发(职业院校组)省赛真题
qq_56088882的博客
04-11 1万+
备赛一周发现临时抱佛脚是不行的，基础不牢地动山摇，难题不会简单题把握不住，得不得奖不重要，重要的是在这个过程中的收获。博主是个专科的小菜鸡，还希望各位大佬多多指教🙏🙏🙏
蓝桥杯C++B组算法学习笔记：核心技术点梳理
蓝桥杯算法学习笔记C++B组是一系列针对C++语言编写的算法学习资料，主要面向参与蓝桥杯竞赛的大学生和研究生级别选手，特别是C++大学A组和研究生组，以及Java相关的参赛者。该系列笔记涵盖广泛的计算机算法知识，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五秒法则

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值