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 }
效果图：优雅图
时间： 2024-10-11 06:52:23