蓝桥杯web-31期楼赛题解（更新中）

杜卡迪家

已于 2022-03-25 19:59:56 修改

阅读量1.5k

点赞数 12

分类专栏： Web学习文章标签：蓝桥杯前端 jquery javascript vscode

于 2022-02-24 20:19:45 首次发布

本文链接：https://blog.csdn.net/weixin_51812604/article/details/123119298

版权

Web学习专栏收录该内容

12 篇文章 4 订阅

订阅专栏

题1：用Vue2的语法完成一个关键字匹配的搜索功能，这个自己去看相关方法相对简单，过了。

filteredList() {

// TODO: 请补充代码

return this.postList.filter(item=>(item.title.search(this.search)!==1))

题2：这题刚开始没看到用jquery语法，直接用Js写，后来看了一下直接利用

$（）方法直接循环遍历套用

题3：营销号生成器额这个。。要注意是特定用户才能触发的。加个判断就好了

题4：卡片切换同题2类似，不过是用js写。注意两层for循环嵌套，用排他思想。

题5：个人博客主要考察你对css的了解。

/* TODO:banner 上的文字需要居中显示 */
.home-wrapper .banner .banner-conent .hero {
margin-top: 3rem;
text-align: center;
}

/* TODO: main-wrapper 通过设置main-wrapper 布局方式让.main-left .main-right 正确显示 */
.main-wrapper {

margin: 0.5rem auto 1 auto;
max-width: 1300px;
padding: 0 0.9rem;
box-sizing: border-box;
position: relative;
display: flex;
flex-wrap: initial;
}

/*/* TODO 宽度自适应居左显示 */
.main-wrapper .main-left {

float: left;

box-sizing: border-box;
}

/* 宽 245px 居右显示 */
.main-wrapper .main-right>* {
box-sizing: border-box;
width: 245px;
float: right;

}

注意flex布局和宽度自适应

题6：水果拼盘

这个太简单了，直接秒了没什么好说的

参考align-self 值： flex-start flex-end center baseline stretch order:<整数>(... -1, 0 (default), 1, ..)

就可以做出来

题7： 新年贺卡

这题真的让我纠结了一小会额。。。

最后原来是自己没看懂要求，耽误了几分钟

随机数函数从 greetings 随机取一个值并返回

用random()函数就好了，数组[Math.floor((Math.random()*数组.length))] 就可以返回数组随机的值了，最后再调用show（）给贺卡框赋值就可以了

function show(greetingDisplay) {

greetingDisplay.innerText =writeGreeting()

}

题8：

这个题到最后一直给我提示页面差距大于20%

同样的代码，十分钟前提交报错，十分钟之后直接通过？？？

待续。。。。。。。。

题9：

完善 css/style.css 样式文件，让登录页面呈现如上所示的效果。直接在css里面修改就可以了

页面关键样式说明如下：

表单外观样式：高为 600px、宽为 450px、背景颜色为 rgba(0, 0, 0, .45)、圆角边框为 10px。
表单顶部的头像图片样式：宽和高均为 200px、圆角 50%。
表单中的二级标题样式：字体大小为 45px、字体粗细为 800。
表单中按钮样式：宽为 80px、高为 30px、边框颜色为 #041c32、背景颜色为 #2d4263、字体大小为 16px、字体颜色为 white。
表单中输入框的样式：字体大小为 20px、圆角边框为 5px、宽度为 300px。