在我们的网站、页面设计中需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验，以及会影响用户以后是否会回访我们的网站/博客。在这篇文章中整理一个用户留言 HTML CSS 样式代码。

首先我们要在网页中加上常用的几个标签文本，比如姓名，电子邮件，内容以及提交按钮，然后我们针对这些字段文本增加和修改样式就可以。

Contact Form

Please fill all the texts in the fields.

Your Name :

Your Email :

Message :

Subject :

Job Inquiry

General Question

一、基本灰色 HTML CSS 样式用户留言表单代码

样式：

/* Basic Grey */

.basic-grey {

margin-left:auto;

margin-right:auto;

max-width: 500px;

background: #F7F7F7;

padding: 25px 15px 25px 10px;

font: 12px Georgia, "Times New Roman", Times, serif;

color: #888;

text-shadow: 1px 1px 1px #FFF;

border:1px solid #E4E4E4;

}

.basic-grey h1 {

font-size: 25px;

padding: 0px 0px 10px 40px;

display: block;

border-bottom:1px solid #E4E4E4;

margin: -10px -15px 30px -10px;;

color: #888;

}

.basic-grey h1>span {

display: block;

font-size: 11px;

}

.basic-grey label {

display: block;

margin: 0px;

}

.basic-grey label>span {

float: left;

width: 20%;

text-align: right;

padding-right: 10px;

margin-top: 10px;

color: #888;

}

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

border: 1px solid #DADADA;

color: #888;

height: 30px;

margin-bottom: 16px;

margin-right: 6px;

margin-top: 2px;

outline: 0 none;

padding: 3px 3px 3px 5px;

width: 70%;

font-size: 12px;

line-height:15px;

box-shadow: inset 0px 1px 4px #ECECEC;

-moz-box-shadow: inset 0px 1px 4px #ECECEC;

-webkit-box-shadow: inset 0px 1px 4px #ECECEC;

}

.basic-grey textarea{

padding: 5px 3px 3px 5px;

}

.basic-grey select {

background: #FFF url('down-arrow.png') no-repeat right;

background: #FFF url('down-arrow.png') no-repeat right);

appearance:none;

-webkit-appearance:none;

-moz-appearance: none;

text-indent: 0.01px;

text-overflow: '';

width: 70%;

height: 35px;

line-height: 25px;

}

.basic-grey textarea{

height:100px;

}

.basic-grey .button {

background: #E27575;

border: none;

padding: 10px 25px 10px 25px;

color: #FFF;

box-shadow: 1px 1px 5px #B6B6B6;

border-radius: 3px;

text-shadow: 1px 1px 1px #9E3F3F;

cursor: pointer;

}

.basic-grey .button:hover {

background: #CF7A7A

}

女程序员博客 , 版权所有丨本站采用BY-NC-SA协议进行授权 , 转载请注明HTML CSS 样式用户留言表单代码分享！

【声明】：本博客仅为分享信息，不参与任何交易，也非中介，所有内容仅代表个人观点，均不作直接、间接、法定、约定的保证，读者购买风险自担。一旦您访问本博客，即表示您已经知晓并接受了此声明通告。

【关于安全】：任何 IDC 都有倒闭和跑路的可能，备份永远是最佳选择，服务器也是机器，不勤备份是对自己极不负责的表现，请保持良好的备份习惯。