通过做题，你会发现我们web开发和程序设计会有很多的不同，我们侧重问题的分析，他会给你一个有问题的题目，让你通过调试补全残缺的css，js等，只要你最终实现这个功能就行。
像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。
然后其他的参考下图标注：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>登录页面</title> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <div class="nav-bar"> <p>返回</p> </div> <div class="content-container"> <div class="content"> <img src="./images/cat.png" /> <div class="form"> <h2>请登录</h2> <form> <input type="text" placeholder="用户名" /> <input type="password" placeholder="密码" /> <div class="btns"> <button type="submit">登录</button> <button type="reset">重置</button> </div> </form> </div> <div class="text"> <a href="#">注册</a> <span>|</span> <a href="#">忘记密码</a> </div> </div> </div> </body> </html>
* { 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：请补充代码*/
* { 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：请补充代码*/ .content-container{ width: 450px; height: 600px; background-color: rgba(0,0,0,.45); border-radius: 10px; margin: 55px auto; } .content{ position: relative; text-align: center; height: 100%; padding-top: 1px; /*解决嵌套块元素垂直外边距的坍塌*/ } .content img{ position:absolute; display: block; top:-75px; left: 50%; margin-left: -100px; width: 200px; height: 200px; border-radius: 50%; } .form{ margin-top: 120px; } .form h2{ font-size: 45px; font-weight: 800px; margin:0 0 50px; } .form input{ display: block; margin:10px auto; font-size: 20px; text-align: center; border-radius: 5px; width: 300px; border: 1px solid #ccc; } .btns, .text{ margin-top: 20px; } .form .btns button{ width: 80px; height: 30px; border:1px solid #041c32; background-color: #2d4263; font-size: 16px; color: white; margin-right: 10px; } .text a{ font-size: 16px; color: white; text-decoration: none; } .text span{ margin: 0 5px; }
