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

2021-09-11 10:28:48 字數 3384 閱讀 6643

看到一篇挺實用的文章，這裡收藏一下，方便以後使用。使用的時候把標籤的 class 替換成對應的 class

樣式即可直接使用。

表單**：

第

一、基本灰色

樣式：

.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
第

三、簡單綠色

第

四、白色樣式

第五、bootstrap風格樣式

第六、暗黑色樣式

樣式：

.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

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

如今我們的 頁面更加需要注重細節，不論是字型的樣式 還是的解析度清晰度都會影響到使用者的訪問體驗和 pv，以及使用者以後是否會回訪我們的 部落格。標記 首先我們要在網頁中加上常用的幾個標籤文字，比如姓名，電子郵件，內容以及提交按鈕，然後我們針對這些字段文字增加和修改樣式就可以。第 一 基本灰色 樣式...

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

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

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

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