蓝桥杯Web组备赛笔记6

已于 2023-03-30 19:30:19 修改
阅读量831 收藏 5
点赞数 2
分类专栏： 蓝桥杯Web组 文章标签： 蓝桥杯 前端 elementui echarts
于 2023-03-30 19:29:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51478745/article/details/129849723
版权

目录

一、ElementUI

1、安装

2、简单使用

3、例子

4、其他内容的学习

二、echarts

1、简介

2、考点

3、安装

4、配置项：使用echarts的三步走

5、13届蓝桥真题（3）布局切换

6、数据格式处理：14届蓝桥模拟赛 1 期（8）

一、ElementUI

1、安装

（1）终端npm下载

npm i element-ui -S

（2）引入式

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

注意：引入顺序，在html中代码执行顺序是从上到下的，ElementUI是基于vue写的，所以要先引入vue再引入ElementUI

（3）介绍：ElementUI本身就是一次对功能的封装，需要我们做的就是二次封装

2、简单使用

（1）弹窗open()方法的介绍及使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world" @open="open()">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      },
      methods:{
        open(){
            console.log('是谁在点我！！！');
        }
      }
    })
  </script>
</html>

 open()方法：钩子函数，可以实现点击弹窗，回调给我们参数，例如：我们需要记录弹窗被点击的次数，这时候只需要在open()方法进行点击次数的+1

3、例子

（1）原装的单选表格

<template>
  <div class="home">
    <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址">
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  data(){
    return{
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        currentRow: null
    }
  },
  components: {
  },
  methods:{
    handleCurrentChange(val) {
        this.currentRow = val;
      }
  }
}
</script>

 （2）二次封装

①例子一

  • 要求：表格中获取数据，自定义修改样式
  • 分析：运用element-ui提供的插槽，在template标签中，绑定slot-scope属性来获取值
<el-table-column label="列名" width="200"> 
  <template slot-scope="scope">
    <!-- scope.row捕捉每一行的内容 -->
    <span style="color: red;">{{ scope.row.name }}</span>
  </template>
</el-table-column>

 ②例子二

  • 要求：改造表格前面为单选符号的样式
  • 分析：添加一个封装好的单选框标签
  • 注意：

        要给表格绑定row-click事件，当某一行被点击时会触发该事件

        单选框还提供了change事件来响应变化，且它会传入一个参数value

        点击表格除单选框外的其他地方时，表格样式变，但是单选框没有跟着变，需要用到方法setCurrentRow()，该方法的作用：设置某一行的选中状态

        单选框标签el-radio中间什么都不写的时候，页面会默认显示label属性的文字信息，如果想要只显示单选框，可以在标签中间写&nbsp;

<template>
  <div class="home">
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
      @row-click="setCurrent"
    >
      <el-table-column label="单选" width="50">
        <template slot-scope="scope">
          <!-- :label动态绑定label属性，scope.$index获取识别当前下标 -->
          <el-radio
            v-model="radio"
            :label="scope.$index"
            @change="setCurrent(scope.row)"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="date" label="日期" width="120">
      </el-table-column>
      <el-table-column property="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column property="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  data() {
    return {
      radio: 0,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      currentRow: null,
    };
  },
  components: {},
  methods: {
    setCurrent(row) {
      console.log(row);
      this.radio = this.tableData.indexOf(row)
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
  },
};
</script>

4、其他内容的学习

（1）小编的另一篇ElementUI学习文章

ElementUI学习笔记_申小兮IU的博客-CSDN博客ElementUI简介，其安装步骤，一些布局，容器，按钮，表格，对话框的简单操作https://blog.csdn.net/qq_51478745/article/details/129662671?spm=1001.2014.3001.5502（2）官网

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/radio

二、echarts

1、简介

一个基于JavaScript的开源可视化图表库，也是一种框架，封装好的东西

2、考点

（1）配置项

（2）数据处理

3、安装

（1）终端npm下载

npm install echarts --save

（2）引入式

import * as echarts from 'echarts';

（3）直接从 GitHub 获取下载到本地

GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browserApache ECharts is a powerful, interactive charting and data visualization library for browser - GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browserhttps://github.com/apache/echarts项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

小伙伴们也可以直接到小编的资源下载🧐

https://download.csdn.net/download/qq_51478745/87630802?spm=1001.2014.3001.5501https://download.csdn.net/download/qq_51478745/87630802?spm=1001.2014.3001.5501

4、配置项：使用echarts的三步走

（1）初始化

echarts.init(dom)

 代码例子

<!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>
    <script src="../../echarts.min.js"></script>
    <style>
        #demo{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <script>
        // 初始化
        const demo = echarts.init(document.getElementById('demo'))
    </script>
</body>
</html>

（2）定义配置项options

（3）配置项设置生效setOption

理解：要先初始化一个盒子，构思盒子要做成什么样的，开始做盒子

<!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>
    <script src="../../echarts.min.js"></script>
    <style>
        #demo {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <script>
        // 初始化
        const demo = echarts.init(document.getElementById('demo'))
        // 配置项
        const option = {
            xAxis: {
                // category类别
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        // 设置
        demo.setOption(option)
    </script>
</body>

</html>

5、13届蓝桥真题（3）布局切换

没有什么技巧，熟悉echarts就可以很容易看出是x轴、y轴的type值写反了

正确结果如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/echarts.js"></script>
    <title>和手机相处的时光</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #main {
      margin: 20px;
      background-color: white;
    }
  </style>

  <body>
    <div id="main" style="width: 1000px; height: 600px"></div>
  </body>
  <script>
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    /*TODO：ECharts 的配置中存在错误，请改正*/
    var option = {
      title: {
        text: "一周的手机使用时长",
      },
      xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
          type: "line",
        },
      ],
    };
    myChart.setOption(option);
  </script>
</html>

6、数据格式处理：14届蓝桥模拟赛 1 期（8）

要求：获取下面json文件的数据，并修改成x、y轴能用的数据格式，使内容正确显示在图上

{
  "code": 200,
  "desc": "请求成功",
  "data": {
    "2月": [
      30, 40, 30, 20, 10, 20, 30, 69, 86, 12, 32, 12, 23, 40, 50, 61, 39, 28,
      20, 35, 20, 38, 43, 52, 30, 39, 52, 70
    ],
    "3月": [
      36, 48, 52, 30, 39, 52, 20, 18, 25, 33, 21, 36, 44, 63, 32, 89, 98, 23,
      25, 36, 29, 31, 42, 23, 45, 56, 98, 83, 25, 28, 48
    ]
  }
}

分析：根据前面的认识，正确的数据格式如下，我们要做的就是如何把json取到的数据修改成下面的格式数据

// 修改后的数据
// 周数据
weekData = {
    x: ['2月第1周', '2月第2周', '2月第3周', '2月第4周', '3月第1周', '3月第2周', '3月第3周', '3月第4周', '3月第5周'],
    y: [180, 274, 253, 324, 277, 240, 332, 378, 101]
}
// 月数据
monthData = {
    x: ['2月', '3月'],
    y: [1031, 1328]
}

（1）做这道题前先学习两个知识点

①for...in循环：获取的item值是对象的key

<!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>
</head>

<body>
    <script>
        const data = {
            "2月": [
                30, 40, 30, 20, 10, 20, 30, 69, 86, 12, 32, 12, 23, 40, 50, 61, 39, 28,
                20, 35, 20, 38, 43, 52, 30, 39, 52, 70
            ],
            "3月": [
                36, 48, 52, 30, 39, 52, 20, 18, 25, 33, 21, 36, 44, 63, 32, 89, 98, 23,
                25, 36, 29, 31, 42, 23, 45, 56, 98, 83, 25, 28, 48
            ]
        }
        // for...in：循环对象，且获取的值是对象的key
        for(item in data){
            console.log(item);
            console.log(data[item]);
        }
    </script>
</body>

</html>

②迭代器reduce：做累加

<script>
    [1,2,3].reduce(function(pre,cur){
        return pre+cur
    },0)
    // reduce()会循环数组[1,2,3]
    // 0是初始值，不写默认也是0
    // 第一次循环：pre = 0 ; cur = 1 ; return = 0 + 1 = 1
    // 第二次循环：pre = 1 ; cur = 2 ; return = 1 + 2 = 3
    // 第三次循环：pre = 3 ; cur = 3 ; return = 3 + 3 = 6
</script>

 更多扩展，小伙伴们可以看小编下面这篇文章🧐

ES6篇（上）_申小兮IU的博客-CSDN博客ES6主要内容：const的使用，let与var的区别，增强写法，解构赋值（数组解构，对象解构），深浅拷贝，高阶函数（filter、map、reduce）https://blog.csdn.net/qq_51478745/article/details/127140261③slice(begin,end)方法：返回一个新的数组对象，该数组由begin,end两个值决定，范围包括begin，不包括end（左闭右开），原数组不会改变

<script>
    const arr = ['a','b','c','d','e','f','g','h','i']
    for(let i = 0;i<arr.length;i+=2){
        console.log(arr.slice(i,i+2));
    }
    //第一次循环：arr.slice(0,2)获取到arr下标为0和1的值
    //第二次循环：arr.slice(2,4)获取到arr下标为2和3的值
    // 以此类推
</script>

 （2）月数据的处理

<script>
    // 原数据
    const data = {
        "2月": [
            30, 40, 30, 20, 10, 20, 30, 69, 86, 12, 32, 12, 23, 40, 50, 61, 39, 28,
            20, 35, 20, 38, 43, 52, 30, 39, 52, 70
        ],
        "3月": [
            36, 48, 52, 30, 39, 52, 20, 18, 25, 33, 21, 36, 44, 63, 32, 89, 98, 23,
            25, 36, 29, 31, 42, 23, 45, 56, 98, 83, 25, 28, 48
        ]
    }

    // 每周的
    const weekData = {
        x:[],
        y:[]
    }
    // 每月的
    const monthData = {
        x:[],
        y:[]
    }
    for(item in data){
        //console.log(item);
        //console.log(data[item]);
        //每月的x轴
        monthData.x.push(item)
        // 每月的y轴值，用迭代器累加
        monthData.y.push(data[item].reduce((pre,cur)=> pre + cur))
    }
    console.log(monthData);
</script>

（3）周数据的处理

<script>
    // 原数据
    const data = {
        "2月": [
            30, 40, 30, 20, 10, 20, 30, 69, 86, 12, 32, 12, 23, 40, 50, 61, 39, 28,
            20, 35, 20, 38, 43, 52, 30, 39, 52, 70
        ],
        "3月": [
            36, 48, 52, 30, 39, 52, 20, 18, 25, 33, 21, 36, 44, 63, 32, 89, 98, 23,
            25, 36, 29, 31, 42, 23, 45, 56, 98, 83, 25, 28, 48
        ]
    }

    // 每周的
    const weekData = {
        x:[],
        y:[]
    }
    // 每月的
    const monthData = {
        x:[],
        y:[]
    }

    // for...in：循环对象，且获取的值是对象的key
    for(item in data){
        // console.log(item);
        // console.log(data[item]);
        //每月的x轴
        monthData.x.push(item)
        // 每月的y轴值，用迭代器累加
        monthData.y.push(data[item].reduce((pre,cur)=> pre + cur))

        let week = 1
        for(let i = 0; i<data[item].length; i += 7){
            weekData.x.push(`${item}第${week++}周`)
            // 截取到每一周的数据，然后再累加
            weekData.y.push(data[item].slice(i,i+7).reduce((pre,cur)=> pre + cur))
        }
    }
    console.log(monthData);
    console.log(weekData);
</script>

（4）完整解题代码

// TODO:待补充代码
    let weekx = []
    let weeky = []
    let monthx = []
    let monthy = []
    axios.get('./data.json').then(res => {
      // console.log(res.data.data);
      for (item in res.data.data) {
        // console.log(item);
        monthx.push(item)
        monthy.push(res.data.data[item].reduce((pre, cur) => pre + cur))

        let week = 1
        for (let i = 0; i < res.data.data[item].length; i += 7) {
          weekx.push(`${item}第${week++}周`)
          weeky.push(res.data.data[item].slice(i, i + 7).reduce((pre, cur) => pre + cur))
        }
      }
      option.xAxis.data = weekx
      option.series[0].data = weeky
      myChart.setOption(option)
    })
    let tabs = document.getElementsByName('tabs')
    for(let j=0;j<tabs.length;j++){
      tabs[j].onclick = function(){
        if(tabs[j].checked){
          if(tabs[j].id == 'week'){
            option.xAxis.data = weekx
            option.series[0].data = weeky
            myChart.setOption(option)
          }else{
            option.xAxis.data = monthx
            option.series[0].data = monthy
            myChart.setOption(option)
          }
        }
      }
    }
五秒法则
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
蓝桥杯新增web应用开发科目—送给想要参赛的小伙伴们一份备赛指南
slw213106的博客
12-07 835
目录： 赛事必知： 试题考查范围： 样题实战分析： 背景介绍： 准备步骤： 题目要求： 答案提交： 题目分析： 题目解答： 样卷线上模拟： 本人感受： 赛事必知： 有关于组别： 具有正式学籍的在校全日制研究生、本科、高职高专及中职中专学生（以报名时状态为准），以个人为单位进行比赛。该专业方向设大学组和职业院校组。 研究生和本科生只能报大学组。 其它高职高专、中职中专院校可自行选择报任意组别。 简单谈一谈这个组别： 可能有人会疑惑为啥分大学组和职业院校组。这俩有啥区别？ 其实也很容易理解——组别分为大学组和职
蓝桥杯单片机类个人备赛笔记
10-20
本人获得国二成绩，蓝桥杯单片机类个人备赛笔记,包含各个模块，大小:9.07 MB ；密码为:qwe123@Yc..?1
【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）线上模拟赛
qq_62837899的博客
04-01 589
【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）线上模拟赛，快来一起学习吧~~~
蓝桥杯Web赛道【功能实现】搜一搜呀题目解析
lxw621的博客
03-04 290
includes(a,b) 括号里第一个参数a为必选参数，表示要查找的某个参数；第二位b为可选参数，表示从某个索引位置开始查找，默认为零。1，使用过滤器filter得到数据。过滤器：filter（）是否包含一个指定的值，如果是返回 true，否则false。2，将符合条件的数据进行筛选。函数：includes()includes()方法用来判断一个。
第13届蓝桥杯 Web应用开发赛道题解
既见君子的博客
04-09 2424
第13届蓝桥杯 Web开发赛道题解
蓝桥杯Web应用开发
weixin_51735748的博客
05-17 6667
蓝桥杯在近两期新增了一个Web应用开发赛道。如果对前端感兴趣的同学，可以尝试一下。
蓝桥杯Web赛学习笔记-附2022-2023题目试炼
最新发布
04-05
内涵知识学习，还有2022年，2023年题目练习源码 一下是部分联系题目 markdown文档解析.md 全球新冠疫情数据统计.md 外卖给好评.md 年度明星项目.md 收集帛书碎片.md 电影院排座位.md 自适应页面.md ...
蓝桥杯算法学习笔记C++B组
07-06
蓝桥杯算法学习笔记C++B组蓝桥杯算法学习笔记C++B组蓝桥杯算法学习笔记C++B组蓝桥杯算法学习笔记C++B组蓝桥杯算法学习笔记C++B组蓝桥杯算法学习笔记C++B组蓝桥杯算法学习笔记C++B组蓝桥杯算法学习笔记C++B组蓝桥杯...
C语言个人笔记（用于蓝桥杯比赛）
03-22
本笔记是针对"蓝桥杯"编程比赛专门编写的，旨在帮助参赛者深入理解和熟练掌握C语言的基础与进阶技巧。 首先，C语言基础部分包括变量、数据类型、运算符和表达式。变量是用来存储数据的容器，数据类型则决定了变量...
蓝桥杯2省赛无忧班和冲刺班笔记
03-30
【蓝桥杯省赛无忧班与冲刺班笔记详解】 蓝桥杯是一项国内知名的软件和信息技术专业人才的竞赛，旨在培养和选拔优秀的编程及算法能力。该赛事覆盖了大学本科、研究生以及初高中等多个层次，为广大学子提供了一个展示...
【蓝桥杯Web】大一小白参与蓝桥杯模拟赛二期web组体会
m0_72922460的博客
12-06 5075
大一小白分享些关于蓝桥杯的相关内容参加和蓝桥杯模拟赛二期web组的一些感想。
2022.4.9第十三届蓝桥杯web组省赛个人题解
Detail_new的博客
04-10 3913
2022第十三届蓝桥杯第一次开放了web组赛道，博主作为一名前端小白，参加了这次比赛。一共十个题目，目的均是实现特定的网页效果，考点包含三件套、jQuery和vue，这里简单的进行一下个人的题解记录。...
蓝桥杯web赛道备战之jquery
Humanideal的博客
06-05 258
蓝桥杯国赛就要到了，刷题的时候通过看官方讲解和发布的各种题解，针对于jquery这个考点做出了一些总结，包括常用方法和出题方法。总的来说下面总结的知识点应对比赛是完全可以的。备战蓝桥杯web赛道的同学们，如果在备战的时候时间紧张或者对jquery的知识点不清楚或者把握不扎实的，希望这个总结可以帮到你们。
蓝桥杯web组备赛
Tommy__li的博客
04-18 1463
是自己刷题的一些记录，对遇到的问题进行记录。比赛的前几道题是比较简单的，主要是考验一些属性的问题，例如flex布局等，这几道题是必须拿下的，不耽误时间，都是修改一些小属性，看一下就知道了。后面的题目需要自己写的代码部分就多了自己主要的问题还是要复习，这就是备赛的意义，都写过，但是很久没写了就会遗忘。前端算法入门这个写的真的很好，数据结构超级重要。这次刷题真的让我意识到，数据结构和算法的重要性，在解决问题上真的很重要，数据结构是基础，真的是基础中的基础，js的语法不好，就会出现各种问题。
第十三届蓝桥杯Web应用开发（大学组）
weixin_46015250的博客
04-13 8418
文章目录前言01.水果盘02.展开你的扇子题目解答：03.和手机相处的时光题目解答04.灯的颜色变化题目解答05.冬奥大抽奖题目解答总结 前言 蓝桥杯，准备挺久的，参加这个比赛的过程蛮曲折，院内选拔的时候被刷了，出了结果后，emo了一会。后来自己交了钱比赛。因为这是第一届web蓝桥杯赛，能供练习的题超级少。官方出了2套题，学院老师给了一套。其他都是跟着一些文档学，边学边敲那种。实战经验还是少。这次我完全做出来的题，五五开吧。有些题做出来一半。应该不给分。猛猪流泪。。。结束后把自己..
【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解（上）
前端之行，任重道远！
03-10 5973
好久没更新了，今天上线收到了很多小伙伴的私信，发现有很多朋友正在准备蓝桥杯，问我要不要出几天前开放的模拟赛 3 期的解析，看到了大家的催更后，我想着就发一下试试吧，希望能顺利发出，话不多说，开干！
【蓝桥杯Web】第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-职业院校组
qq_62837899的博客
03-21 1551
【蓝桥杯Web】第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-职业院校组
第十三届蓝桥杯大赛（Web 应用开发）国赛-职业院校组题解
Cai____的博客
03-30 857
第十三届蓝桥杯大赛（Web 应用开发）国赛-职业院校组题解
2022年第十三届蓝桥杯web大学组题解
热门推荐
前端小白在前进的博客
04-10 1万+
第十三届蓝桥杯web大学组题解1.水果拼盘2.展开你的扇子3.和手机相处的时光4.灯的颜色变化5.东奥大抽奖6.蓝桥知识网7.布局切换8.购物车9.寻找小狼人10.课程列表 1.水果拼盘 /* TODO：待补充代码 */ #pond { flex-direction: column; flex-wrap: wrap; /* display: flex; */ } 第一道题就是送分题，简单的flex布局中的属性 本题考点：flex布局属性 2.展开你的扇子 /*TODO：请补充 CSS 代码
蓝桥杯C++/C语言 闫学灿(y总课程笔记)
01-29
"这份资料是关于蓝桥杯C++/C语言竞赛的，包含了研究生组、A组、B组的真题和算法编程练习，由闫学灿(y总)精心整理，部分题目附有注释。建议在学习过程中结合www.acwing.com网站上的Y总视频讲解，对于算法学习和准备...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

五秒法则

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

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

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

打赏作者

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

抵扣说明：

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

余额充值