Banner需求提交界面
背景图加表单文本居中
1、构造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>
2、设置背景层和局部
添加高度、背景和小手效果，然后让文本居中
.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;
}为确保文本部分整体居中，需要确保demand-submission-section类下面有且只有一个div层。
为确保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>
给form的class添加居中代码
.demand-submission-form {
display: flex;
}3、文本美化
小标题优化
h2 {
/* 设置文本内容水平居中对齐 */
text-align: center;
/* 设置字体大小为30像素 */
font-size: 30px;
/* 设置字体粗细为正常（非加粗） */
font-weight: normal;
/* 设置文本颜色为白色 */
color: #fff;
/* 清除所有外边距（上、右、下、左） */
margin: 0;
/* 设置下外边距为30像素，用于与其他元素保持间距 */
margin-bottom: 30px;
}输入框优化
/* 定义输入框样式（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;
}
}提交按钮优化
.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;
}效果演示
请查看效果演示以直观感受固定导航功能的实际效果。
文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。
