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>

效果图:

css笔记05:表单

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>

效果图:基本灰色

css笔记05:表单

 

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 }

效果图:优雅图

css笔记05:表单

你可能感兴趣的:(css)