經(jīng)典應(yīng)用場景

html實操示例

那今天假設(shè)我們要在頁尾,也就是<footer>標(biāo)簽上方，設(shè)計一個表單，用以收集用戶的email信息。我們一起來看看該如何操作吧。

1.首先我們在<footer>標(biāo)簽上方新建一個<section>，class命名為"newsletter"(此處同樣，可按照個人習(xí)慣命名）

2.在<section>內(nèi)，新建一個<form>標(biāo)簽

3.在<form>表單標(biāo)簽內(nèi)，插入<input>標(biāo)簽

示例代碼：

示例代碼解析：

<section class="newsletter">  <p>歡迎訂閱烘培工坊電子報，可不定期收到限定優(yōu)惠喔！</p>  <form>    <input type="email" placeholder="請輸入您的電子信箱">    <button type="submit">提交</button>  </form></section>

主要模塊

? 電子報訂閱區(qū)塊 (section#newsletter)

 ? 包含標(biāo)題說明（<p>標(biāo)簽的中文提示）

 ? 表單（<form>）含兩個核心元素：

 ? 郵箱輸入框：<input type="email"> 限制用戶只能輸入有效郵箱格式

 ? 提交按鈕：<button type="submit"> 觸發(fā)表單數(shù)據(jù)提交

注意：上述表單未定義action（數(shù)據(jù)提交地址）和method（GET/POST請求方式），提交后無法處理數(shù)據(jù)。

（由于我們當(dāng)前處于零基礎(chǔ)新手階段，只先對前端設(shè)計部分做一個大致的了解。至于表單提交后如何與后臺服務(wù)器做互動，我們這里就先暫且省略了。）

此時我們的表單欄框架已通過html搭建好

框架目前是很粗糙的，接下來就又到了CSS的美化環(huán)節(jié)啦。

CSS美化部分

整體功能解析

/* 電子報訂閱區(qū)域樣式 */.newsletter {    background-color: #485652; /* 深青灰色背景 */    color: white;             /* 白色文字 */    padding: 60px 0;          /* 上下內(nèi)邊距60px，左右0 */    display: flex;            /* 彈性布局 */    flex-direction: column;   /* 垂直方向排列子元素 */    align-items: center;      /* 子元素水平居中 */}
/* 段落樣式 */.newsletter p {    margin-bottom: 20px;      /* 段落下方留白20px */}
/* 輸入框和按鈕通用樣式 */.newsletter input,.newsletter button {    background-color: transparent; /* 透明背景 */    color: white;               /* 白色文字 */    border: 1px solid #949d9a;  /* 淺灰綠色邊框 */    padding: 10px;              /* 內(nèi)填充10px */    border-radius: 5px;         /* 圓角5px */}

樣式細(xì)節(jié)分解：

1. 色彩方案

? background-color: #485652; → 高級灰綠色調(diào)背景

? color: white; → 白色文字確保深色背景上的可讀性

2. 空間布局

? padding: 60px 0; → 頂部底部留白60px，營造呼吸感

? display: flex; → 彈性布局實現(xiàn)響應(yīng)式適配

? flex-direction: column; → 垂直堆疊表單元素

? align-items: center; → 內(nèi)容居中提升視覺平衡

3.文字段落樣式

.newsletter p {    margin-bottom: 20px;  /* 段落下方20px留白 */}

  ? 視覺作用：分隔說明文字和輸入框，避免信息擁擠

4.表單元素統(tǒng)一風(fēng)格

.newsletter input, .newsletter button {    background-color: transparent; /* 透明背景 */    color: white;                   /* 白色文字 */    border: 1px solid #949d9a;     /* 灰綠色邊框 */    padding: 10px;                 /* 內(nèi)邊距 */    border-radius: 5px;            /* 5px圓角 */}

  ? 設(shè)計意圖：

 ? 透明背景+白字：保持深色背景的沉浸感

 ? 細(xì)邊框：精致不搶眼（色值#949d9a是背景色的淺調(diào)）

? 圓角：柔和現(xiàn)代感

 ? 統(tǒng)一10px內(nèi)邊距：視覺對齊

好啦，本期學(xué)習(xí)了

1.如何用html制作出表單欄

2.如何用CSS美化表單欄，使其更符合網(wǎng)頁整體風(fēng)格

這在我們后續(xù)網(wǎng)頁開發(fā)的過程是非常重要的基礎(chǔ)技能，在學(xué)習(xí)過程中，十分建議你打開vscode，跟著文章一起實操。我的每篇文章當(dāng)中都有附上示意代碼，也是為了新手期的我們可以直接復(fù)用，直觀地去感受每行代碼的作用及顯示效果。

閱讀原文：原文鏈接