蓝桥杯(web组)题解-给页面化个妆
蓝桥杯(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。 完整代码 * { box-sizing: border-box; margin: 0; padding: 0; } body { background-image: url('../images/background-pic.jpeg'); background-size: cover; color: #fff; height: 945; width: 1920; } .nav-bar { display: flex; align-items: center; justify-content: flex-end; } .nav-bar img { height: 50px; width: 50px; border-radius: 50%; margin: 15px; } .content>img{ width: 200px; height: 200px; border-radius: 50%; margin-left: 125px; margin-top: -100px; } .content-container{ margin: 100px auto; width: 450px; height:600px; background-color: rgb(0, 0, 0 ,.45); border-radius: 10px; } .form{ text-align: center; } .form>h2{ font-size: 45px; font-weight: 800; margin-bottom: 20px; } button{ width: 80px; height: 30px; border: #041c32; background-color: #2d4263; font-size: 16px; color: white; margin: 10px; } input{ font-size: 20px; border-radius: 5px; width: 300px; margin: 10px; } .text{ text-align: center; margin: 10px; } .text>a{ text-decoration: none; color: white; }
 2022-3-10
蓝桥杯(web组)题解-水果摆盘
蓝桥杯(web组)题解-水果摆盘
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。
 2022-3-10
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录