📋 个人简介
- 💖 作者简介:大家好,我是阿牛,定制设计全栈领域新星创作者。😜
- 📝 个人主页:🔥
- 🎉 支持我:点赞👍+收藏⭐️+留言📝
- 📣 系列专栏:🍁
- 💬格言:定制设计迄今所有人生都大写着失败,定制设计但不妨碍我继续向前!🔥
目录
🌺前言
定制设计我们都知道,定制设计是近几年特别火的一个竞赛,同时,定制设计我也看到了越来越多的定制设计人在程序设计组竞争,那么,定制设计有没有竞争稍微弱一点的组别呢!怀着期待,定制设计十二届蓝桥杯大赛增加了web开发组,定制设计也就是说今年是第一届web定制设计开发组赛事,定制设计所以说竞争不大哦!定制设计你还在犹豫吗!定制设计快来跟着博主一起打卡学习吧!
🌸定制设计考察范围和分析
在开始今天的刷题之前,我们先看一下官网给的考题范围。
综上来看,目前只要你学好三件套,jquery就可以参加比赛了,会vue.js就更好啦!其他的目前了解就好,后面有时间慢慢学。
- 通过做题,你会发现我们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。
然后其他的参考下图标注:
🌷题目文件
🍀🍀🍀图片素材🍀🍀🍀
🍀🍀🍀html文件代码🍀🍀🍀
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
🍀🍀🍀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:请补充代码*/
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
里面的提示就是我们需要补充的css。
🌷题解分析
我们要改的样式主要在上图框起来的一块。
其他的样式比较简单,我把本题的难点分析一下。
1.可以看到content下面有三块是同一层级,所以我们要把img变为块级元素,然后用父相子绝,将img变为绝对定位通过top,left属性实现图中情况。
2.由于img和下面的两个div是同一级,且父亲都是content,所以给img加上绝对定位之后他会飘起来,下面的两个div会跑到img下面,因此我们可以给下面的form一个margin-top值解决,但这样又会出现嵌套块元素垂直外边距的坍塌,导致无法实现,因此我们给他们的父亲content添加padding-top值即可解决(题目是css3盒子,padding不会改变盒子大小)。
🌷题解代码
* { 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;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
🌺结语
本题遇到的所有难点在我的专栏中都有写到,包括通过定位让图片居中,嵌套块元素垂直外边距的坍塌三种解决办法,css3盒子等等。感兴趣的可以看看哦!
陆陆续续写了很多前端基础知识和小demo了,这些对初学者都很有用,我把他们都放在我的专栏里了,精心打造了软磨硬泡系列,一起来学习吧!💦💦
🏰系列专栏
👉
👉
👉
兄弟们蓝桥web组开冲啦!今年试水,明年说不定我们就是巅峰!一起加油吧!