【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）第一次线上模拟赛

第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,已经组织了几次模拟赛和楼赛,这里主要记录模拟赛题目和设计的知识点,帮助参赛者更好的复习琐碎的知识点和代码,有写的不对的地方欢迎指教并讨论.

• 前言
• 一、【Bug 调试】修复网站显示问题
• 二、【Bug 调试】修复注册验证问题
• 三、【功能实现】封装函数实现个人所得税计算器
• 四、【页面布局】Flex 经典骰子布局
• 五、【页面布局】制作网站首页
• 六、【页面布局】响应式 Gulp 中文网
• 七、【数据交互】天气预报查询
• 八、【数据交互】实现卡号绑定功能
• 九、【数据交互】知乎首页数据动态化
• 十、【API 开发】RESTful API 开发

1. 题目描述:网页的css样式不显示,需要修复.
2. 题目分析:文件引入错误.
3. 题目代码

1. 题目描述:书写一个判断方法，判断输入的手机号是否符合前三个数字是：186 134-139 150-152.
2. 题目分析:使用正则表达式进行判断.

3. 题目代码

function isPhone(phoneNumber) {
  var arr = /^(186|13[4-9]|15[0-2])d{8}$/;
  // var arr = /^1(86|[34-39]|[50-52])d{8}$/
  var flag = arr.test(phoneNumber);
  return flag
}

1. 题目描述:
   
2. 题目分析:采用if-else语句，对输入的金额分类。
3. 题目代码

function cal(salary) {
    // TODO: 在此处补充代码
    if (salary <= 5000) return 0
    else if(salary > 5000 && salary <= 9000) return (salary-5000)*0.03
    else if(salary > 9000 && salary <= 15000) return (salary-5000)*0.05
    else return (salary-5000)*0.1
}

1. 题目描述:利用弹性布局知识,完成骰子布局,骰子最终状态如图.
   
2. 题目分析: 主要使用了弹性布局的相关属性.

3. 题目代码
   骰子一：div1，主轴默认为横轴，主轴上的排列为居中，非主轴上的排列为居中

   .div1 {
       justify-content: center;
       align-items: center;
   }
   

   骰子二：div2，主轴设置为纵轴，主轴上的排列为均匀排列，非主轴上排列为居中

   .div2 {
   	flex-direction: column;
       justify-content: space-around;
       align-items: center;
       
   }
   

   骰子三：div3，主轴默认为横轴，主轴上的排列为均匀排列，非主轴上居中排列，此时情况为居中一排，再单独设计第一个点的位置为start，第二个点的位置为end

   .div3 {
       justify-content: space-around;
       align-items: center;
       padding: 10px;
   }
   .div3 :nth-child(1) {
   	align-self: flex-start;
   }
   .div3 :nth-child(3) {
   	align-self: flex-end;
   }
   

   骰子45679：divn，由于共同点都是在纵轴上均匀排列，设定主轴为纵轴，排列方式为均匀，不需要指定非主轴；再对里面每一个div进行设定，首先需要对子div指定排列方式：display: flex;因为外部的源代码中都指定过了；再设定主轴为横轴，排列方式为均匀即可。

   .divn {
   	flex-direction: column;
   	justify-content: space-around;
   }
   .divn div{
       display: flex;
       justify-content:space-around;
   }
   

   骰子8：div8，继承divn中的部分，调整第二个子div的布局，排列应该是扩展，但是由于没有间距不好看，再根据图片调整间距

   .divn .div8{
       display: flex;
       justify-content: space-between;
       padding: 0 6px;
   }
   

1. 题目描述:给知乎日报排版.
   
2. 题目分析:考察的是CSS盒子模型的应用.
3. 题目代码:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}

body {
    width: 1024px;
    margin: 0 auto;
    background-color: #f9f9f9;
}


.navbox {
    display: flex;
    height: 78px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}
.navbox img {
    height: 50px;
    margin-left: 30px;
}
.navbox .navright {
    margin-right: 50px;
    height: 32px;
}
.navbox .navright :first-child {
    display: inline-block;
    height: 32px;
    width: 120px;
    color: #0099F2;
    background-color: #f0f9ff;
    text-align: center;
    line-height: 32px;
}
.navbox .navright :nth-child(2) {
    display: inline-block;
    height: 32px;
    width: 120px;
    color: black;
    text-align: center;
    line-height: 32px;
}




.container {
    display: flex;
    height: 500px;
    background-color: #008bed;
    justify-content: space-between;
    position: relative;
}
.container .img{
    align-self: flex-end;
    margin-left: 20px;
}

.container .content {
    align-self: center;
    margin-right: 40px;
    width: 410px;
}

.container .content h2 {
    font-size: 40px;
    line-height: 40px;
    color: #fdfdfd;
}

.container .content .info {
    font-size: 16px;
    line-height: 26px;
    color: #99d1f8;
}


.tabtitle {
    height: 100px;
    width: 960px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
    
}

.tabtitle h3 {
    color: #000000;
    font-size: 24px;
}

.tabtitle h4 {
    color: #cccccc;
    font-size: 24px;
}


.list {
    width: 960px;
    margin: 0 auto;
}
.list ul {
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    
}
.list ul li {
    width: 300px;
    height: 374px;
    background-color: #fff;
    margin-bottom: 20px;
    text-align: center;
}

.list ul li img {
    height: 260px;
    width: 260px;
    margin-top: 20px;
}

.list ul li p{
    text-align: start;
    margin-left: 25px;
    color: #333333;
    font-size: 14px;
}

.list .more {
    height: 62px;
    line-height: 62px;
    font-size: 20px;
    text-align: center;
    background-color: #e8eef2;
    margin-bottom: 30px;
}
.list .more a {
    color: #59abdf;
}


.footer {
    background-color: #e5e5e5;
}

.footer .footerBox {
    width: 960px;
    height: 265px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.footer .footerBox .footerL {
    width: 710px;
    padding-top: 32px;
}

.footer .footerBox .footerL p {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 15px;
}

.footer .footerBox .footerR {
    width: 141px;
    height: 152px;
    text-align: center;
    margin-top: 30px;
}

1. 题目描述，根据页面宽度适应不同布局。在 index.html 文件