首页
   /       /   
蓝桥杯(web组)题解-给页面化个妆
3月
10
蓝桥杯(web组)题解-给页面化个妆
作者:大彭Sir    分类: 学习笔记

背景介绍

各个网站都拥有登录页面,设计一个界面美观的登录页面,会给用户带来视觉上的享受。本次试题我们要完成一个登录页面的布局。

考试要求

请完善 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;
}
本文标签:标签: css
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录