1.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <style> 5 input[type="text"] 6 { 7 width:150px; 8 display:block; 9 margin-bottom:10px; 10 background-color:yellow; 11 font-family: Verdana, Arial; 12 } 13 14 input[type="button"] 15 { 16 width:120px; 17 margin-left:35px; 18 display:block; 19 font-family: Verdana, Arial; 20 } 21 </style> 22 </head> 23 <body> 24 25 <div class="about-text"> 26 <form class="contact-from"> 27 <input type="text" name="text" id="name" placeholder="姓名："> 28 <input type="text" name="text" id="e-mail" placeholder="电话："> 29 <textarea name="text" id="message" cols="30" rows="5" placeholder="咨询内容：" > 30 </textarea><br> 31 <button class="send">确认提交</button> 32 </form> 33 </div> 34 35 </body> 36 </html>
效果图：
2.
1 <form action="" method="post" class="STYLE-NAME"> 2 <h1>Contact Form 3 <span>Please fill all the texts in the fields.</span> 4 </h1> 5 <label> 6 <span>Your Name :</span> 7 <input id="name" type="text" name="name" placeholder="Your Full Name" /> 8 </label> 9 <label> 10 <span>Your Email :</span> 11 <input id="email" type="email" name="email" placeholder="Valid Email Address" /> 12 </label> 13 <label> 14 <span>Message :</span> 15 <textarea id="message" name="message" placeholder="Your Message to Us"></textarea> 16 </label> 17 <label> 18 <span>Subject :</span><select name="selection"> 19 <option value="Job Inquiry">Job Inquiry</option> 20 <option value="General Question">General Question</option> 21 </select> 22 </label> 23 <label> 24 <span> </span> 25 <input type="button" class="button" value="Send" /> 26 </label> 27 </form>
效果图：基本灰色
3.
1 /* Basic Grey */ 2 .basic-grey { 3 margin-left:auto; 4 margin-right:auto; 5 max-width: 500px; 6 background: #F7F7F7; 7 padding: 25px 15px 25px 10px; 8 font: 12px Georgia, "Times New Roman", Times, serif; 9 color: #888; 10 text-shadow: 1px 1px 1px #FFF; 11 border:1px solid #E4E4E4; 12 } 13 .basic-grey h1 { 14 font-size: 25px; 15 padding: 0px 0px 10px 40px; 16 display: block; 17 border-bottom:1px solid #E4E4E4; 18 margin: -10px -15px 30px -10px;; 19 color: #888; 20 } 21 .basic-grey h1>span { 22 display: block; 23 font-size: 11px; 24 } 25 .basic-grey label { 26 display: block; 27 margin: 0px; 28 } 29 .basic-grey label>span { 30 float: left; 31 width: 20%; 32 text-align: right; 33 padding-right: 10px; 34 margin-top: 10px; 35 color: #888; 36 } 37 .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select { 38 border: 1px solid #DADADA; 39 color: #888; 40 height: 30px; 41 margin-bottom: 16px; 42 margin-right: 6px; 43 margin-top: 2px; 44 outline: 0 none; 45 padding: 3px 3px 3px 5px; 46 width: 70%; 47 font-size: 12px; 48 line-height:15px; 49 box-shadow: inset 0px 1px 4px #ECECEC; 50 -moz-box-shadow: inset 0px 1px 4px #ECECEC; 51 -webkit-box-shadow: inset 0px 1px 4px #ECECEC; 52 } 53 .basic-grey textarea{ 54 padding: 5px 3px 3px 5px; 55 } 56 .basic-grey select { 57 background: #FFF url('down-arrow.png') no-repeat right; 58 background: #FFF url('down-arrow.png') no-repeat right); 59 appearance:none; 60 -webkit-appearance:none; 61 -moz-appearance: none; 62 text-indent: 0.01px; 63 text-overflow: ''; 64 width: 70%; 65 height: 35px; 66 line-height: 25px; 67 } 68 .basic-grey textarea{ 69 height:100px; 70 } 71 .basic-grey .button { 72 background: #E27575; 73 border: none; 74 padding: 10px 25px 10px 25px; 75 color: #FFF; 76 box-shadow: 1px 1px 5px #B6B6B6; 77 border-radius: 3px; 78 text-shadow: 1px 1px 1px #9E3F3F; 79 cursor: pointer; 80 } 81 .basic-grey .button:hover { 82 background: #CF7A7A 83 }
效果图：优雅图
