css笔记05：表单

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>&nbsp;</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 }

效果图：优雅图

posted on 2015-06-30 08:26  鸿钧老祖  阅读(196)  评论(0)  编辑  收藏  举报

导航