蓝桥杯练习06给网页化个妆

给页面化个妆

介绍

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

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

其中:

·css/style.css是需补充的样式文件。

·images是项目所用到的图片文件。

·index.html是登录页面。

在浏览器中预览index.html,当前页面效果如下:

目标

请完善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

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 class="text">
                    <a href="#">注册</a>
                    <span>|</span>
                    <a href="#">忘记密码</a>
                </div>
            </div>

        </div>
    </div>
</body>

</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;
}


/*TODO:请补充代码*/

答案

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;
}


/*TODO:请补充代码*/

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form {
    height: 600px;
    width: 450px;
    background-color: rgba(0, 0, 0, .45);
    border-radius: 10px;
    text-align: center;
}

.content .form h2 {
    font-size: 45px;
    margin-top: 140px;
    margin-bottom: 50px;
    font-weight: 800;
}

.content .form input {
    font-size: 20px;
    border-radius: 5px;
    width: 300px;
    border: none;
    text-align: center;
    margin: 10px 0;
}

.content .form .btns button {
    margin: 10px 0;
    width: 80px;
    height: 30px;
    border-color: #041c32;
    background-color: #2d4263;
    font-size: 16px;
    color: white;
}

.content img {
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 1;
    border-radius: 50%;
    top: 0%;
}

.text a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

知识点

大部分代码更上面来就行这里选择的是flex布局,这两句关键代码

​ display: flex;

​ flex-direction: column;

​ align-items: center;

复制代码
display: flex;:将元素的显示模式设置为Flex布局,使其成为一个Flex容器。这意味着容器内的子元素(称为Flex项目)将根据Flex布局规则排列。

flex-direction: column;:定义Flex项目的排列方向为垂直方向。这意味着Flex项目会从上至下堆叠排列,而不是默认的从左至右水平排列。

align-items: center;:在Flex容器的交叉轴(在flex-direction: column;的情况下是垂直方向)上对齐Flex项目。设置为 center 表示所有的Flex项目将在垂直方向上居中对齐

这题想完成这个效果的方式还有很多,可以用绝对定位和相对定位来做,但要复杂一些页比较繁琐。

相关推荐
June bug8 小时前
【软考中级·软件评测师】下午题·面向对象测试之架构考点全析:分层、分布式、微内核与事件驱动
经验分享·分布式·职场和发展·架构·学习方法·测试·软考
薰衣草233313 小时前
一天两道力扣(1)
算法·leetcode·职场和发展
爱coding的橙子14 小时前
每日算法刷题Day41 6.28:leetcode前缀和2道题,用时1h20min(要加快)
算法·leetcode·职场和发展
天真小巫1 天前
2025.6.27总结
职场和发展
Memories off10 天前
实习/秋招记录:软件开发转AI或安全
职场和发展
一入JAVA毁终身11 天前
针对我的简历模拟面试
面试·职场和发展
挑战者66688811 天前
如何制定团队制度?
职场和发展·项目管理·创业创新
呆呆的小鳄鱼11 天前
leetcode:746. 使用最小花费爬楼梯
算法·leetcode·职场和发展
minos.cpp11 天前
从厨房到代码台:用做菜思维理解iOS开发 - Swift入门篇①
ios·蓝桥杯·swift
YuTaoShao11 天前
【LeetCode 热题 100】42. 接雨水——(解法一)前后缀分解
java·算法·leetcode·职场和发展