【Html.js——页面布局】给页面化个妆（蓝桥杯真题-1769）【合集】

Rossy Yan

发布于 2025-01-24 11:19:39

3300

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

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

准备步骤

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

wget https://labfile.oss.aliyuncs.com/courses/7835/exam01-imi.zip && unzip exam01-imi.zip && mv exam01-imi/* ./ && rm -rf exam01-imi*

下载完成之后的目录结构如下：

├── css
│   └── style.css
├── images
│   ├── background-pic.jpeg
│   ├── cat.png
│   └── icon.png
└── index.html

其中：

css/style.css 是本次挑战需补充的样式文件。
images 是项目所用到的图片文件。
index.html 是登录页面。
下载源码。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
打开环境右侧的【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。

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

通关代码✔️

/*style.css*/
* {
    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-container{
margin-top: 70px;
}
.content{
    height: 600px;
    width: 450px;
    background-color: rgba(0, 0, 0, .45);
    margin: 0 auto;
    border-radius: 10px;
    text-align: center;
}
.content img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-top: -20%;
}
.content h2{
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 40px;
}
.content button{
    width: 80px;
    height: 30px;
    border-color: #041c32;
    background-color: #2d4263;
    color: white;
    margin-top: 15px;
}
.content a{
    text-decoration: none;
    color: white;
}
.text{
    margin-top: 15px;
}
.content input{
    text-align: center;
    width: 300px;
    height: 40px;
    font-size: 20px;
    border-radius: 5px;
    margin: 10px;
}

代码解析📑

1. 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">
        <img src="./images/icon.png">
    </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>

<!DOCTYPE html>：
- 这是 HTML5 的文档类型声明，告诉浏览器使用 HTML5 标准来解析页面。
<html lang="en">：
- 表示该 HTML 文档的语言是英语。
<head> 部分：
- <meta charset="UTF-8">：指定文档使用 UTF-8 字符编码，以支持多种语言字符的显示。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，使页面在不同设备上（尤其是移动设备）有更好的显示效果，width=device-width 表示视口宽度等于设备宽度，initial-scale=1.0 表示初始缩放比例为 1。
- <title>登录页面</title>：设置页面的标题，会显示在浏览器的标题栏。
- <link rel="stylesheet" href="./css/style.css">：链接外部的 CSS 样式表文件，文件路径为 ./css/style.css，使页面能够应用样式。
<body> 部分：
- <div class="nav-bar">：创建一个具有 nav-bar 类的 div 元素，可能用于导航栏，其中包含一个 img 元素，显示图片 ./images/icon.png。
- <div class="content-container">：包含整个主要内容的容器。
  - <div class="content">：该 div 是主要的内容区域，包含以下几个部分：
    - <img src="./images/cat.png">：显示一张图片，可能是一个装饰性的元素，如头像等。
    - <div class="form">：包含登录表单的区域。
      - <h2>请登录</h2>：登录表单的标题。
      - <form>：表单元素，包含输入框和按钮。
      - <input type="text" placeholder="用户名">：文本输入框，用于输入用户名，显示占位符 "用户名"。
      - <input type="password" placeholder="密码">：密码输入框，显示占位符 "密码"。
      - <div class="btns">：包含按钮的 div。
      - <button type="submit">登录</button>：提交按钮，点击将提交表单。
      - <button type="reset">重置</button>：重置按钮，点击将重置表单输入。
    - <div class="text">：包含一些链接的区域。
      - <a href="#">注册</a>：注册链接，暂时指向 # ，可修改为实际的注册页面地址。
      - <span>|</span>：一个分隔符。
      - <a href="#">忘记密码</a>：忘记密码链接，暂时指向 # ，可修改为实际的忘记密码页面地址。

2. CSS部分

* {
    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-container{
    margin-top: 70px;
}
.content{
    height: 600px;
    width: 450px;
    background-color: rgba(0, 0, 0,.45);
    margin: 0 auto;
    border-radius: 10px;
    text-align: center;
}
.content img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-top: -20%;
}
.content h2{
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 40px;
}
.content button{
    width: 80px;
    height: 30px;
    border-color: #041c32;
    background-color: #2d4263;
    color: white;
    margin-top: 15px;
}
.content a{
    text-decoration: none;
    color: white;
}
.text{
    margin-top: 15px;
}
.content input{
    text-align: center;
    width: 300px;
    height: 40px;
    font-size: 20px;
    border-radius: 5px;
    margin: 10px;
}

通用选择器 *：
- box-sizing: border-box;：使元素的宽高包含边框和内边距，而不是仅包含内容，更方便布局。
- margin: 0; 和 padding: 0;：将所有元素的外边距和内边距初始化为 0，以消除浏览器默认的样式差异。
body 元素：
- background-image: url('../images/background-pic.jpeg');：设置页面的背景图片，路径为 ../images/background-pic.jpeg。
- background-size: cover;：使背景图片覆盖整个页面，根据页面大小进行缩放。
- color: #fff;：将页面中的文本颜色设置为白色。
- height: 945; 和 width: 1920;：这里存在错误，应该添加单位，如 height: 945px; 和 width: 1920px;。
.nav-bar 类：
- display: flex;：将元素设置为弹性布局，方便子元素的对齐和排列。
- align-items: center;：在交叉轴上居中对齐子元素。
- justify-content: flex-end;：将子元素在主轴上靠右对齐。
.nav-bar img 元素：
- height: 50px; 和 width: 50px;：设置图片的大小为 50px 高和宽。
- border-radius: 50%;：将图片变成圆形。
- margin: 15px;：设置外边距为 15px。
.content-container 类：
- margin-top: 70px;：给容器添加顶部外边距，使其与上方元素有一定距离。
.content 类：
- height: 600px; 和 width: 450px;：设置元素的大小。
- background-color: rgba(0, 0, 0,.45);：使用半透明的黑色背景。
- margin: 0 auto;：水平居中元素，上下外边距为 0。
- border-radius: 10px;：设置元素的圆角半径为 10px。
- text-align: center;：使内部文本居中对齐。
.content img 元素：
- width: 200px; 和 height: 200px;：设置图片的大小。
- border-radius: 50%;：将图片变成圆形。
- margin-top: -20%;：将图片向上移动，使其部分超出容器，达到一定的视觉效果。
.content h2 元素：
- font-size: 45px; 和 font-weight: 800;：设置标题的字体大小和加粗。
- margin-bottom: 40px;：设置底部外边距，与下方元素隔开一定距离。
.content button 元素：
- width: 80px; 和 height: 30px;：设置按钮的大小。
- border-color: #041c32; 和 background-color: #2d4263;：设置按钮的边框颜色和背景颜色。
- color: white;：设置按钮文本颜色为白色。
- margin-top: 15px;：设置顶部外边距。
.content a 元素：
- text-decoration: none;：去除链接的下划线。
- color: white;：设置链接的颜色为白色。
.text 类：
- margin-top: 15px;：设置顶部外边距。
.content input 元素：
- text-align: center;：输入框中的文本居中对齐。
- width: 300px; 和 height: 40px;：设置输入框的大小。
- font-size: 20px;：设置输入框字体大小。
- border-radius: 5px;：设置输入框的圆角半径。
- margin: 10px;：设置输入框的外边距。

3. 工作流程 ▶️

布局基础：
- 首先使用 HTML 构建页面的基本结构，通过各种标签如 div、form、input、button 等将页面分成不同的功能区域，如导航栏、登录表单、链接等。
通用样式初始化：
- 使用 * 选择器对所有元素进行基础的样式设置，如使用 box-sizing: border-box 改变元素的盒模型计算方式，清除 margin 和 padding 以统一布局基础。
页面背景和颜色：
- 为 body 元素设置背景图片和颜色，以确定页面的整体视觉风格，使用 background-size: cover 确保背景图片铺满页面。
元素定位和对齐：
- 对于导航栏（.nav-bar）使用 flex 布局，将其内部元素向右对齐，并使用 align-items: center 使其垂直居中。
- 使用 margin 等属性调整元素之间的间距，如 .content-container 的 margin-top 和 .content 的 margin: 0 auto 来控制位置。
元素样式细节：
- 对元素进行细节处理，如 .content 的 border-radius 使其有圆角，半透明背景；.content img 的圆形处理和位置调整；.content button 的颜色和大小设置；.content input 的输入框样式调整等。
文本和链接样式：
- 设置文本的字体大小、颜色，对链接使用 text-decoration: none 去掉下划线，使页面元素的文本风格一致且美观。