2024年前端最新蓝桥杯web开发组模拟题—给页面化个妆，最新阿里Web前端面试题目

最新推荐文章于 2024-07-01 15:02:59 发布

2401_84411018

最新推荐文章于 2024-07-01 15:02:59 发布

阅读量796

点赞数 10

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84411018/article/details/138828582

版权

程序员专栏收录该内容

202 篇文章 0 订阅

订阅专栏

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

HTML5新特性，语义化
浏览器的标准模式和怪异模式
xhtml和html的区别
使用data-的好处
meta标签
canvas
HTML废弃的标签
IE6 bug，和一些定位写法
css js放置位置和原因
什么是渐进式渲染
html模板语言
meta viewport原理

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

像Bootstrap,ElementUI这些前端ui框架学一下就好，基本都是看文档开发的东西，大概学一学，他不会让你直接写的，而是他给出的html,css代码有些是用这些写的，只要你会分析就可以。
像LESS,node.js,webpack目前可能也基本不会考到,目前考题基本都是通过分析实现页面功能，我们最笨用计算器作运算写css就可以,没必要写LESS,而且比赛时他们不会提供vscode中的easyless插件。
ECharts也基本是看文档开发，你知道他的x轴和y轴的配置方法就可以，其他的一些配置看看有个印象吧！

因为是刚开这个web组的比赛，所以可能相比其他赛道竞争少一点，所以你还在犹豫什么！！！

🌸给页面画个妆

🌷题目要求

本题目让我们完成一个登录页面的布局，补全剩余的css代码就好，其他的不用修改

文件结构如下：

在这里插入图片描述

其中style.css是我们要修改的文件，要把页面布局为如下样式:

页面关键样式说明如下:

表单外观样式:高为600px、宽为450px、背景颜色为rgba(0，0，0，.45)、圆角边框为10px。

表单顶部的头像图片样式:宽和高均为200px、圆角50%。

表单中的二级标题样式:字体大小为45px、字体粗细为800。

表单中按钮样式:宽为80px、高为30px、边框颜色为#041c32、背景颜色为#2d4263、字体大小为16px、字体颜色为white。

表单中输入框的样式:字体大小为20px、圆角边框为5px、宽度为300px。

然后其他的参考下图标注：

在这里插入图片描述

🌷题目文件

🍀🍀🍀图片素材🍀🍀🍀

请添加图片描述

🍀🍀🍀html文件代码🍀🍀🍀

登录页面

请登录

重置

忘记密码

🍀🍀🍀css代码🍀🍀

{

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background-color: azure;

background-size: cover;

color: #fff;

height: 945;

width: 1920;

}

.nav-bar {

display: flex;

align-items: center;

justify-content: flex-end;

}

.nav-bar p {

font-size: large;

color: cornflowerblue;

margin: 15px;

cursor: pointer;

}

/TODO：请补充代码/

里面的提示就是我们需要补充的css。

🌷题解分析

在这里插入图片描述

我们要改的样式主要在上图框起来的一块。

其他的样式比较简单，我把本题的难点分析一下。

1.可以看到content下面有三块是同一层级，所以我们要把img变为块级元素，然后用父相子绝，将img变为绝对定位通过top，left属性实现图中情况。

2.由于img和下面的两个div是同一级，且父亲都是content，所以给img加上绝对定位之后他会飘起来，下面的两个div会跑到img下面，因此我们可以给下面的form一个margin-top值解决，但这样又会出现嵌套块元素垂直外边距的坍塌，导致无法实现，因此我们给他们的父亲content添加padding-top值即可解决（题目是css3盒子，padding不会改变盒子大小）。