6款漂亮HTML CSS樣式使用者留言表單

2021-08-18 13:54:41 字數 3755 閱讀 5554

如今我們的**、頁面更加需要注重細節，不論是字型的樣式、還是的解析度清晰度都會影響到使用者的訪問體驗和

pv，以及使用者以後是否會回訪我們的**

/部落格。

標記

首先我們要在網頁中加上常用的幾個標籤文字，比如姓名，電子郵件，內容以及提交按鈕，然後我們針對這些字段文字增加和修改樣式就可以。
第

一、基本灰色

樣式：

/* basic grey */


.basic-grey 


.basic-grey h1 


.basic-grey h1>span 


.basic-grey label 


.basic-grey label>span 


.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select 


.basic-grey textarea


.basic-grey select 


.basic-grey textarea


.basic-grey .button 


.basic-grey .button:hover
第

二、優雅的

aero樣式

樣式：

.elegant-aero 


.elegant-aero h1 


.elegant-aero h1>span 


.elegant-aero label>span 


.elegant-aero label 


.elegant-aero label>span 


.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select 


.elegant-aero textarea


.elegant-aero select 


.elegant-aero .button


.elegant-aero .button:hover
第

三、簡單綠色

樣式：

.smart-green 


.smart-green h1 


.smart-green h1>span 


.smart-green label 


.smart-green label>span 


.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select 


.smart-green textarea


.smart-green select 


.smart-green .button 


.smart-green .button:hover
第

四、白色樣式

樣式：

.white-pink 


.white-pink h1 


.white-pink h1>span 


.white-pink label 


.white-pink label>span 


.white-pink input[type="text"], .white-pink input[type="email"], .white-pink textarea,.white-pink select


.white-pink textarea


.white-pink .button 


.white-pink .button:hover 


.white-pink .button:active 


.white-pink select
第五、bootstrap風格樣式

樣式：

.bootstrap-frm 


.bootstrap-frm h1 


.bootstrap-frm h1>span 


.bootstrap-frm label 


.bootstrap-frm label>span 


.bootstrap-frm input[type="text"], .bootstrap-frm input[type="email"], .bootstrap-frm textarea, .bootstrap-frm select


.bootstrap-frm select 


.bootstrap-frm textarea


.bootstrap-frm .button 


.bootstrap-frm .button:hover
第

六、暗黑色樣式

樣式：

.dark-matter 


.dark-matter h1 


.dark-matter h1>span 


.dark-matter label 


.dark-matter label>span 


.dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select 


.dark-matter select 


.dark-matter textarea


.dark-matter .button 


.dark-matter .button:hover
總結，小小的

css樣式能夠讓使用者更加欣賞和留住，**模板不一定要經常改變，但是可以在原有的基礎上慢慢修改和提公升使用者體驗，那就從

css做起。以上的6款

html css

6款漂亮HTML CSS樣式使用者留言表單

看到一篇挺實用的文章，這裡收藏一下，方便以後使用。使用的時候把標籤的 class 替換成對應的 class 樣式即可直接使用。表單 第 一 基本灰色 樣式 basic grey basic grey h1 basic grey h1 span basic grey label basic grey ...

HTML CSS例項 漂亮的背景（一）

一 二 效果 三 css body 四 說明 網頁背景色與大海融為一體，這個是非常唯美的藝術效果。而更大的亮點則是，背景的左右兩邊各有一條沒有特別虛化的亮線，這個背景如果只是隨便地設為背景，那，背景會有兩條比較明顯線痕，這會是很重的乙個敗筆。但，樣式表中，設定了background position...

HTML CSS實現漂亮的查詢部件例項

一 參考 www.kuhnsjewelers.com qccssad 二 效果 三 html 複製 如下 四 css 複製 如下 search box searchtextbox submitbutton submitbutton hover 五 說明 1 文字框預編譯後是 type text 的標...