# 一、需求分析

Banner需求提交界面，背景图加表单文本居中，效果图如下
![202404201713619485666540](https://developer.qcloudimg.com/http-save/yehe-12010127/1254b0b010c4c45a9532e93242b309ca.png)
# 二、操作步骤

## （一）构造HTML结构

使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结，然后设置语言和标题。
```
<!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">
        <h2>网站模板开发中心</h2>
        <form method="get" action="">
            <input type="text" name="info" placeholder="请详细描述您的需求">
            <button class="submit-btn">提交需求</button>
        </form>
    </div>
</body>
</html>
```
## （二）设置背景层和局部

（1）添加高度、背景和小手效果，然后让文本居中
```
.demand-submission-section {
    /* 设置容器为弹性布局（Flexbox） */
    display: flex;
    /* 垂直方向上居中对齐子元素 */
    align-items: center;
    /* 水平方向上居中对齐子元素 */
    justify-content: center;
    /* 设置容器高度为200像素 */
    height: 200px;
    /* 设置背景图片为指定URL */
    background-image: url("https://www.ytwes.com/zb_users/theme/tpure/style/images/banner.jpg");
    /* 背景图片按容器尺寸等比例缩放以完全覆盖容器（不剪裁或拉伸） */
    background-size: cover;
    /* 当鼠标悬停在容器上时，显示指针光标 */
    cursor: pointer;
}
```
（2）为确保文本部分整体居中，需要确保demand-submission-section类下面有且只有一个div层。
（3）为确保form表单内2个元素可以正常对齐无缝隙，给form添加一个class类名，下级的2个元素也都套个div，并对元素添加上class类型。
```
<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>
```
（4）给form的class添加居中代码
```
.demand-submission-form {
    display: flex;
}
```
## （三）文本美化

### 1.小标题优化

```
h2 {
    /* 设置文本内容水平居中对齐 */
    text-align: center;
    /* 设置字体大小为30像素 */
    font-size: 30px;
    /* 设置字体粗细为正常（非加粗） */
    font-weight: normal;
    /* 设置文本颜色为白色 */
    color: #fff;
    /* 清除所有外边距（上、右、下、左） */
    margin: 0;
    /* 设置下外边距为30像素，用于与其他元素保持间距 */
    margin-bottom: 30px;
}
```
### 2.输入框优化

```
/* 定义输入框样式（class: input-field） */
.input-field {
    /* 设置输入框高度为36像素 */
    height: 36px;
    /* 设置行内文本的垂直居中，行高为20像素 */
    line-height: 20px;
    /* 设置内边距为上/下8像素，左/右16像素 */
    padding: 8px 16px;
    /* 设置字体大小为14像素 */
    font-size: 14px;
    /* 设置文本颜色为白色 */
    color: #fff;
    /* 继承父元素的边框半径 */
    border-radius: inherit;
    /* 移除边框 */
    border: 0px;
    /* 使用border-box盒模型，计算元素总宽度时包含内边距和边框 */
    box-sizing: border-box;
    /* 移除输入框的轮廓线 */
    outline: 0;
    /* 设置输入框左上角和左下角的圆角为3像素 */
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    /* 设置输入框初始宽度为480像素 */
    width: 480px;
    /* 在屏幕宽度小于等于960像素时，将输入框宽度调整为200像素 */
    @media(max-width: 960px) {
        width: 200px;
    }
}
```
### 3.提交按钮优化

```
.submit-btn {
    /* 设置元素高度为36像素 */
    height: 36px;
    /* 设置行高为21像素，确保文本垂直居中 */
    line-height: 21px;
    /* 设置内边距为上下0像素，左右15像素 */
    padding: 0px 15px;
    /* 设置文本颜色为白色 */
    color: #fff;
    /* 设置字体大小为14像素 */
    font-size: 14px;
    /* 设置元素右上角和右下角圆角为3像素 */
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    /* 使用border-box盒模型，计算元素总宽度时包含内边距和边框 */
    box-sizing: border-box;
    /* 设置背景颜色为#3b5160（深蓝色） */
    background: #3b5160;
    /* 为元素添加2像素宽的实线边框，颜色为#e4e8eb（浅灰色） */
    border: 2px solid #e4e8eb;
    /* 当鼠标悬停在元素上时，显示指针光标，暗示可点击或交互 */
    cursor: pointer;
}
```

使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结，然后设置语言和标题。

第六章 第三节 banner模块

前端

学习如何创建响应式Banner需求提交界面，包含HTML5结构搭建、CSS样式优化技巧，实现背景图自适应、表单元素居中对齐，以及输入框和按钮的美化效果。掌握flex布局、媒体查询等前端开发核心技术。

容器

HTML5

2026新春采购季

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

第六章 第三节 banner模块-腾讯云开发者社区-腾讯云

第六章第三节 banner模块

第六章第三节 banner模块

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第六章 第三节 banner模块

第六章 第三节 banner模块

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第六章第三节 banner模块

第六章第三节 banner模块