CSS（十六）——美化表單實操

前言

本篇筆記中并不會記錄一個真實的案例（太懶了，就想把核心記錄下來），僅將一些基本的頁面美化的操作記錄下來，新知識點較少，依舊會先補充知識點說明后再進行相應的說明。

另：我們在做前端頁面的時候都會提前先將瀏覽器頁面的樣式重置，這時候需要一個重置樣式表，鏈接如下：

重置樣式表

https://download.csdn.net/download/qq_40749255/21567692?spm=1001.2014.3001.5503

文章目錄

• CSS（十六）——美化表單實操
• • 前言
  • 概述
  • 補充知識點
  • • placeholder
    • disabled
  • 表單美化注意事項
  • • 表單的分區邏輯
    • 表單的實現邏輯
• 總結

概述

表單美化一定要記住以下幾點：

• 美化是由靜態頁面與動態效果共同完成的；
• 一般來說，下拉列表、單選、復選等可替換元素都是重新做出來的（即，使用元素和樣式表來設計出同樣的功能）；
• 在設計表單樣式之前一定要將表單的默認樣式重置；
• 表單在設計之初就要進行細致的劃分，劃分的越細致越有助于我們做表單美化。

由上述四條可以看出，表單美化的步驟就是：重置，設計，美化。

補充知識點

placeholder

偽元素選擇器，表示表單元素（主要就是input）元素中的placeholder屬性，該屬性的含義是文本框等該元素中提供的提示文字，在用戶輸入數據后就會被覆蓋。

input[type="text"]::placeholder{color:#ccc; }

上述CSS樣式的含義是選擇頁面中input元素中type為text的元素，并設置其placeholder屬性，將其提示的文字顏色改為#ccc。

disabled

偽類選擇器，（其中，元素中出現disabled表示一個布爾屬性，該布爾屬性的含義是表示當前元素不可用）我們可以使用該偽類選擇器設置元素的不可用樣式。

<style>button:disabled{background-color: #f5f5f5;color:rgba(0,0,0,.25);border: 1px solid #d9d9d9;box-sizing: border-box;/*該鼠標樣式顯示未禁用符號*/cursor:not-allowed;} </style><button disabled><a href="#">點擊確認</a> </button>

表單美化注意事項

表單的分區邏輯

**曾經學習前端的時候，一個表單都是用一個form元素來制作，比較規范化的就是使用table元素來使其看起來更加工整。**對于具體的前端邏輯并沒有進行說明。下面詳細說明：

• 首先在設計表單的時候，要先根據UI圖中提供的頁面將其功能劃分。例如：登錄界面的賬號、密碼（或驗證碼）等輸入數據的位置都是input元素；登錄（獲取驗證碼）等按鈕都是button元素。（或者是由其他元素或樣式制作的——杠精別杠，舉個例子）。
• 對于一些頁面中樣式一致的（例如邊框，樣色等）進行統一設置，如果有不同的地方后期增加樣式。
• 在表單中可能會出現一些樣式需要用到浮動和定位，要注意高度坍塌和定位的相關問題。
• 如果有需要自定義樣式的可替換元素，記得使用關聯（隨便哪種關聯方式都可以），如果需要隱藏的元素設置display屬性。

表單的實現邏輯

• 表單從頭開始做起，依次向下做；
• 先設置統一樣式，然后再修改不同的地方；
• 橫向排列一般使用浮動，縱向排列一般使用定位；（并不絕對，完成同一個樣式的方法不止一個）
• 有些位置需要偽元素和偽類選擇器對其進行修改樣式（在之前的筆記中就有過講解，可以翻回去復習）

博主跟著視頻學習做的模仿小破站的注冊頁面中的靜態效果，具體樣式如下：

• 本次實現包括了文本框輸入，按鈕的樣式等；
• 同意協議那里的復選框偷懶沒使用圖片來完美復原小破站的樣式，采用了簡單的自定義樣式（上一篇筆記講過）。
• 有些位置細致的修改邊框樣式，位置等，需要自己把握（水不深，自己能把握得住）
• 關于最上方注冊二字需要說明一下。它是由連個樣式覆蓋形成的，在這里說明一下我學習到的方式（方式不止一種，僅僅覺得這種方便）

h2{text-align: center;font-size: 38px;border-bottom: 1px solid #ccc;height: 18px;margin-bottom: 30px; } h2>span{background-color: white;padding:0 20px; }

該樣式使用了兩個元素來嵌套包裹文字，具體元素如下：

<h2><span>注冊</span> </h2>

解釋如下：

• 首先設置設置h2元素的位置、字體大小以及邊框（注意代碼中設置的是下邊框）；
• 然后將h2的外邊距設置為30px（同樣設置的是下外邊距）；
• 復習知識點：元素的數據溢出了父元素的空間大小，默認不會將溢出部分隱藏；
• 然后把文字的背景顏色設置為頁面背景色。

以上的方式就可以實現注冊的樣式，也可以做左右各一條線，中間一個字（具體實現可以參考網頁導航欄中logo的嵌入方式）。

總結

本篇筆記僅僅提供了一個思路，各位可以自行實踐一下，希望大家一起加油。

總結

以上是生活随笔為你收集整理的CSS（十六）——美化表单实操的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。