第三节 Banner模块

一、需求分析

在现代网页设计中，Banner（横幅广告区）通常占据着用户进入网站后的第一视觉焦点。本节我们将开发一个“需求提交”Banner 模块。该模块的核心需求是：在一张全屏铺满的高清背景图上，放置一个包含引导标语和输入表单的交互区域。为了保证视觉上的极致平衡，内部的标题、输入框和提交按钮必须在父容器中实现严格的水平与垂直双向居中。这不仅考验我们对 HTML 嵌套结构的把控，更是对现代 CSS 弹性布局（Flexbox）技术的一次经典实战应用。

202404201713619485666540

二、操作步骤

（一）搭建具备层次的 HTML 结构

良好的 CSS 布局离不开合理的 HTML 嵌套。使用 !DOCTYPE html 声明文档后，通过快捷代码 html:5 生成基础骨架。为了实现居中对齐，我们需要构建一个“外层容器 -> 内容包裹层 -> 具体元素”的三级结构。外层容器负责加载背景图，包裹层负责将标题和表单作为一个整体进行布局调度。

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner需求提交界面</title>
</head>
<body>
    <div class="demand-submission-section">
        <div class="submission-content">
            <h2>网站模板开发中心</h2>
            <form method="get" name="demandSubmission" action="" class="demand-submission-form">
                <div class="input-box">
                    <input type="text" name="info" placeholder="请详细描述您的需求" class="input-field">
                </div>
                <div class="submit-button-box">
                    <button class="submit-btn">提交需求</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

（二）运用 Flexbox 实现精准居中与背景控制

过去，前端开发者经常为了“垂直居中”而绞尽脑汁。如今，CSS Flexbox（弹性盒子）让我们只需三行代码即可轻松实现。

（1）外层容器的背景与弹性布局

我们为最外层的 .demand-submission-section 设置固定高度，并引入背景图片。利用 background-size: cover 确保图片无论在何种屏幕比例下都能完美覆盖容器且不失真。随后，开启 Flex 布局实现子元素的绝对居中。

.demand-submission-section {
    height: 200px;
    /* 引入远端背景图片 */
    background-image: url("https://www.ytwes.com/zb_users/theme/tpure/style/images/banner.jpg");
    /* 核心：等比例缩放背景图以完全覆盖容器，杜绝留白或变形 */
    background-size: cover;

    /* 开启弹性布局引擎 */
    display: flex;
    /* 交叉轴（垂直方向）居中 */
    align-items: center;
    /* 主轴（水平方向）居中 */
    justify-content: center;
}

（2）表单控件的无缝隙对齐

在默认情况下，表单内的输入框和按钮属于行内块元素，它们之间会因为 HTML 代码中的换行而产生难以消除的空白缝隙。为了让输入框和按钮完美贴合，我们同样对 <form> 表单开启 Flex 布局，强制其内部子元素严密排列。

.demand-submission-form {
    display: flex;
}

（三）UI 细节打磨与表单控件美化

原生浏览器提供的表单控件往往比较简陋。在这一步，我们将扮演 UI 设计师的角色，对文本、边框、圆角等细节进行精雕细琢。

1. 主标题视觉优化

去除默认的加粗效果以显得更现代，调整字号并将其颜色反白，确保在深色背景图上具有足够的阅读对比度。

h2 {
    text-align: center;
    font-size: 30px;
    font-weight: normal; /* 取消默认的粗体，提升现代感 */
    color: #fff;
    margin: 0;
    margin-bottom: 30px; /* 拉开与下方表单的呼吸空间 */
}

2. 输入框的细节重塑

重点在于去除输入框获取焦点时浏览器自带的难看高亮外边框（outline: 0），并利用 box-sizing: border-box 规范盒模型尺寸，防止内边距撑破设定的宽度。同时，引入响应式媒体查询，确保在移动端设备上输入框宽度能自动缩放。

.input-field {
    width: 480px;
    height: 36px;
    line-height: 20px;
    padding: 8px 16px;
    font-size: 14px;
    color: #333; /* 注：输入框文字通常为深色，以保证在白色背景中清晰可见 */

    border: 0px;
    outline: 0; /* 核心：干掉浏览器默认的点击高亮外发光线 */
    box-sizing: border-box; /* 核心：让 padding 包含在设定的宽度内 */

    /* 仅设置左侧圆角，以便右侧与按钮直角无缝拼接 */
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* 响应式降级：当屏幕小于960px时，缩减输入框宽度防止溢出 */
@media (max-width: 960px) {
    .input-field {
        width: 200px;
    }
}

3. 提交按钮的呼应式设计

按钮的高度需与输入框严格保持一致（36px）。为了与输入框形成视觉咬合，我们将按钮的右侧设置为圆角，左侧保持直角。并加入鼠标悬停（cursor: pointer）的手型反馈。

.submit-btn {
    height: 36px;
    line-height: 21px;
    padding: 0px 15px;
    font-size: 14px;
    color: #fff;
    background: #3b5160; /* 沉稳的深蓝色 */

    border: 2px solid #e4e8eb;
    box-sizing: border-box;

    /* 仅设置右侧圆角，与输入框完美拼接组合 */
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

    cursor: pointer; /* 交互细节：提示用户这是一个可点击的行动点 */
}

三、效果演示

请查看，重点观察在缩放浏览器窗口时，整体模块如何始终保持居中，以及输入框宽度的响应式断点变化。

一、需求分析

二、操作步骤

（一）搭建具备层次的 HTML 结构​

（二）运用 Flexbox 实现精准居中与背景控制​

（三）UI 细节打磨与表单控件美化​

1. 主标题视觉优化​

2. 输入框的细节重塑​

3. 提交按钮的呼应式设计​