官方QQ群—Discuz在线开发手册购买邀请码
开启辅助访问 在线金币（V币）充值切换风格
立即注册 找回密码

QQ登录

只需一步，快速开始

【道勤网】- www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程！【道勤网】

快捷导航
搜索
【道勤网】- www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程！【道勤网】 › 首页 ›资源软件区 › 查看内容

6款漂亮HTML CSS样式用户留言表单

2015-8-10 14:07| 发布者: 学习NO.1| 查看: 3040| 评论: 0|原作者: 学习NO.1

摘要: 如今我们的网站、页面更加需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和PV，以及用户以后是否会回访我们的网站/博客。如果有时间的时候，道勤小编会浏览和阅读相关的前端网站 ...
如今我们的网站、页面更加需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和PV，以及用户以后是否会回访我们的网站/博客。如果有时间的时候，道勤小编会浏览和阅读相关的前端网站和积累一些不错的前端资源，在"8款设计师常用漂亮的html CSS表格样式"中展示了几款不错的价格列表，在这篇文章中整理6个用户留言HTML CSS样式。
标记
首先我们要在网页中加上常用的几个标签文本，比如姓名，电子邮件，内容以及提交按钮，然后我们针对这些字段文本增加和修改样式就可以。
  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>
复制代码
第一、基本灰色
6款漂亮HTML CSS样式用户留言表单01

样式：
  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. }
复制代码
第二、优雅的Aero样式

6款漂亮HTML CSS样式用户留言表单02
样式：
  1. .elegant-aero {
  2. margin-left:auto;
  3. margin-right:auto;
  4. max-width: 500px;
  5. background: #D2E9FF;
  6. padding: 20px 20px 20px 20px;
  7. font: 12px Arial, Helvetica, sans-serif;
  8. color: #666;
  9. }
  10. .elegant-aero h1 {
  11. font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  12. padding: 10px 10px 10px 20px;
  13. display: block;
  14. background: #C0E1FF;
  15. border-bottom: 1px solid #B8DDFF;
  16. margin: -20px -20px 15px;
  17. }
  18. .elegant-aero h1>span {
  19. display: block;
  20. font-size: 11px;
  21. }
  22. .elegant-aero label>span {
  23. float: left;
  24. margin-top: 10px;
  25. color: #5E5E5E;
  26. }
  27. .elegant-aero label {
  28. display: block;
  29. margin: 0px 0px 5px;
  30. }
  31. .elegant-aero label>span {
  32. float: left;
  33. width: 20%;
  34. text-align: right;
  35. padding-right: 15px;
  36. margin-top: 10px;
  37. font-weight: bold;
  38. }
  39. .elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {
  40. color: #888;
  41. width: 70%;
  42. padding: 0px 0px 0px 5px;
  43. border: 1px solid #C5E2FF;
  44. background: #FBFBFB;
  45. outline: 0;
  46. -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
  47. box-shadow: inset 0px 1px 6px #ECF3F5;
  48. font: 200 12px/25px Arial, Helvetica, sans-serif;
  49. height: 30px;
  50. line-height:15px;
  51. margin: 2px 6px 16px 0px;
  52. }
  53. .elegant-aero textarea{
  54. height:100px;
  55. padding: 5px 0px 0px 5px;
  56. width: 70%;
  57. }
  58. .elegant-aero select {
  59. background: #fbfbfb url('down-arrow.png') no-repeat right;
  60. background: #fbfbfb url('down-arrow.png') no-repeat right;
  61. appearance:none;
  62. -webkit-appearance:none;
  63. -moz-appearance: none;
  64. text-indent: 0.01px;
  65. text-overflow: '';
  66. width: 70%;
  67. }
  68. .elegant-aero .button{
  69. padding: 10px 30px 10px 30px;
  70. background: #66C1E4;
  71. border: none;
  72. color: #FFF;
  73. box-shadow: 1px 1px 1px #4C6E91;
  74. -webkit-box-shadow: 1px 1px 1px #4C6E91;
  75. -moz-box-shadow: 1px 1px 1px #4C6E91;
  76. text-shadow: 1px 1px 1px #5079A3;
  77. }
  78. .elegant-aero .button:hover{
  79. background: #3EB1DD;
  80. }
复制代码
第三、简单绿色
6款漂亮HTML CSS样式用户留言表单03

样式：
  1. .smart-green {
  2. margin-left:auto;
  3. margin-right:auto;
  4. max-width: 500px;
  5. background: #F8F8F8;
  6. padding: 30px 30px 20px 30px;
  7. font: 12px Arial, Helvetica, sans-serif;
  8. color: #666;
  9. border-radius: 5px;
  10. -webkit-border-radius: 5px;
  11. -moz-border-radius: 5px;
  12. }
  13. .smart-green h1 {
  14. font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  15. padding: 20px 0px 20px 40px;
  16. display: block;
  17. margin: -30px -30px 10px -30px;
  18. color: #FFF;
  19. background: #9DC45F;
  20. text-shadow: 1px 1px 1px #949494;
  21. border-radius: 5px 5px 0px 0px;
  22. -webkit-border-radius: 5px 5px 0px 0px;
  23. -moz-border-radius: 5px 5px 0px 0px;
  24. border-bottom:1px solid #89AF4C;
  25. }
  26. .smart-green h1>span {
  27. display: block;
  28. font-size: 11px;
  29. color: #FFF;
  30. }
  31. .smart-green label {
  32. display: block;
  33. margin: 0px 0px 5px;
  34. }
  35. .smart-green label>span {
  36. float: left;
  37. margin-top: 10px;
  38. color: #5E5E5E;
  39. }
  40. .smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
  41. color: #555;
  42. height: 30px;
  43. line-height:15px;
  44. width: 100%;
  45. padding: 0px 0px 0px 10px;
  46. margin-top: 2px;
  47. border: 1px solid #E5E5E5;
  48. background: #FBFBFB;
  49. outline: 0;
  50. -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
  51. box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
  52. font: normal 14px/14px Arial, Helvetica, sans-serif;
  53. }
  54. .smart-green textarea{
  55. height:100px;
  56. padding-top: 10px;
  57. }
  58. .smart-green select {
  59. background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
  60. background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
  61. appearance:none;
  62. -webkit-appearance:none;
  63. -moz-appearance: none;
  64. text-indent: 0.01px;
  65. text-overflow: '';
  66. width:100%;
  67. height:30px;
  68. }
  69. .smart-green .button {
  70. background-color: #9DC45F;
  71. border-radius: 5px;
  72. -webkit-border-radius: 5px;
  73. -moz-border-border-radius: 5px;
  74. border: none;
  75. padding: 10px 25px 10px 25px;
  76. color: #FFF;
  77. text-shadow: 1px 1px 1px #949494;
  78. }
  79. .smart-green .button:hover {
  80. background-color:#80A24A;
  81. }
复制代码
第四、白色样式
6款漂亮HTML CSS样式用户留言表单04

样式：
  1. .white-pink {
  2. margin-left:auto;
  3. margin-right:auto;
  4. max-width: 500px;
  5. background: #FFF;
  6. padding: 30px 30px 20px 30px;
  7. box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
  8. -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
  9. font: 12px Arial, Helvetica, sans-serif;
  10. color: #666;
  11. border-radius: 10px;
  12. -webkit-border-radius: 10px;
  13. }
  14. .white-pink h1 {
  15. font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  16. padding: 0px 0px 10px 40px;
  17. display: block;
  18. border-bottom: 1px solid #F5F5F5;
  19. margin: -10px -30px 10px -30px;
  20. color: #969696;
  21. }
  22. .white-pink h1>span {
  23. display: block;
  24. font-size: 11px;
  25. color: #C4C2C2;
  26. }
  27. .white-pink label {
  28. display: block;
  29. margin: 0px 0px 5px;
  30. }
  31. .white-pink label>span {
  32. float: left;
  33. width: 20%;
  34. text-align: right;
  35. padding-right: 10px;
  36. margin-top: 10px;
  37. color: #969696;
  38. }
  39. .white-pink input[type="text"], .white-pink input[type="email"], .white-pink textarea,.white-pink select{
  40. color: #555;
  41. width: 70%;
  42. padding: 3px 0px 3px 5px;
  43. margin-top: 2px;
  44. margin-right: 6px;
  45. margin-bottom: 16px;
  46. border: 1px solid #e5e5e5;
  47. background: #fbfbfb;
  48. height: 25px;
  49. line-height:15px;
  50. outline: 0;
  51. -webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
  52. box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
  53. }
  54. .white-pink textarea{
  55. height:100px;
  56. padding: 5px 0px 0px 5px;
  57. width: 70%;
  58. }
  59. .white-pink .button {
  60. -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
  61. -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
  62. box-shadow:inset 0px 1px 0px 0px #fbafe3;
  63. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
  64. background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
  65. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
  66. background-color:#ff5bb0;
  67. border-radius:9px;
  68. -webkit-border-radius:9px;
  69. -moz-border-border-radius:9px;
  70. border:1px solid #ee1eb5;
  71. display:inline-block;
  72. color:#ffffff;
  73. font-family:Arial;
  74. font-size:15px;
  75. font-weight:bold;
  76. font-style:normal;
  77. height: 40px;
  78. line-height: 30px;
  79. width:100px;
  80. text-decoration:none;
  81. text-align:center;
  82. text-shadow:1px 1px 0px #c70067;
  83. }
  84. .white-pink .button:hover {
  85. background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );
  86. background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );
  87. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');
  88. background-color:#ef027d;
  89. }
  90. .white-pink .button:active {
  91. position:relative;
  92. top:1px;
  93. }
  94. .white-pink select {
  95. background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%);
  96. background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9));
  97. appearance:none;
  98. -webkit-appearance:none;
  99. -moz-appearance: none;
  100. text-indent: 0.01px;
  101. text-overflow: '';
  102. width: 70%;
  103. line-height: 15px;
  104. height: 30px;
  105. }
复制代码
第五、Bootstrap风格样式
6款漂亮HTML CSS样式用户留言表单07

样式：
  1. .bootstrap-frm {
  2. margin-left:auto;
  3. margin-right:auto;
  4. max-width: 500px;
  5. background: #FFF;
  6. padding: 20px 30px 20px 30px;
  7. font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  8. color: #888;
  9. text-shadow: 1px 1px 1px #FFF;
  10. border:1px solid #DDD;
  11. border-radius: 5px;
  12. -webkit-border-radius: 5px;
  13. -moz-border-radius: 5px;
  14. }
  15. .bootstrap-frm h1 {
  16. font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;
  17. padding: 0px 0px 10px 40px;
  18. display: block;
  19. border-bottom: 1px solid #DADADA;
  20. margin: -10px -30px 30px -30px;
  21. color: #888;
  22. }
  23. .bootstrap-frm h1>span {
  24. display: block;
  25. font-size: 11px;
  26. }
  27. .bootstrap-frm label {
  28. display: block;
  29. margin: 0px 0px 5px;
  30. }
  31. .bootstrap-frm label>span {
  32. float: left;
  33. width: 20%;
  34. text-align: right;
  35. padding-right: 10px;
  36. margin-top: 10px;
  37. color: #333;
  38. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  39. font-weight: bold;
  40. }
  41. .bootstrap-frm input[type="text"], .bootstrap-frm input[type="email"], .bootstrap-frm textarea, .bootstrap-frm select{
  42. border: 1px solid #CCC;
  43. color: #888;
  44. height: 20px;
  45. line-height:15px;
  46. margin-bottom: 16px;
  47. margin-right: 6px;
  48. margin-top: 2px;
  49. outline: 0 none;
  50. padding: 5px 0px 5px 5px;
  51. width: 70%;
  52. border-radius: 4px;
  53. -webkit-border-radius: 4px;
  54. -moz-border-radius: 4px;
  55. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  56. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  57. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  58. }
  59. .bootstrap-frm select {
  60. background: #FFF url('down-arrow.png') no-repeat right;
  61. background: #FFF url('down-arrow.png') no-repeat right;
  62. appearance:none;
  63. -webkit-appearance:none;
  64. -moz-appearance: none;
  65. text-indent: 0.01px;
  66. text-overflow: '';
  67. width: 70%;
  68. height: 35px;
  69. line-height:15px;
  70. }
  71. .bootstrap-frm textarea{
  72. height:100px;
  73. padding: 5px 0px 0px 5px;
  74. width: 70%;
  75. }
  76. .bootstrap-frm .button {
  77. background: #FFF;
  78. border: 1px solid #CCC;
  79. padding: 10px 25px 10px 25px;
  80. color: #333;
  81. border-radius: 4px;
  82. }
  83. .bootstrap-frm .button:hover {
  84. color: #333;
  85. background-color: #EBEBEB;
  86. border-color: #ADADAD;
  87. }
复制代码
第六、暗黑色样式
6款漂亮HTML CSS样式用户留言表单088
样式：
  1. .dark-matter {
  2. margin-left: auto;
  3. margin-right: auto;
  4. max-width: 500px;
  5. background: #555;
  6. padding: 20px 30px 20px 30px;
  7. font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  8. color: #D3D3D3;
  9. text-shadow: 1px 1px 1px #444;
  10. border: none;
  11. border-radius: 5px;
  12. -webkit-border-radius: 5px;
  13. -moz-border-radius: 5px;
  14. }
  15. .dark-matter h1 {
  16. padding: 0px 0px 10px 40px;
  17. display: block;
  18. border-bottom: 1px solid #444;
  19. margin: -10px -30px 30px -30px;
  20. }
  21. .dark-matter h1>span {
  22. display: block;
  23. font-size: 11px;
  24. }
  25. .dark-matter label {
  26. display: block;
  27. margin: 0px 0px 5px;
  28. }
  29. .dark-matter label>span {
  30. float: left;
  31. width: 20%;
  32. text-align: right;
  33. padding-right: 10px;
  34. margin-top: 10px;
  35. font-weight: bold;
  36. }
  37. .dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select {
  38. border: none;
  39. color: #525252;
  40. height: 25px;
  41. line-height:15px;
  42. margin-bottom: 16px;
  43. margin-right: 6px;
  44. margin-top: 2px;
  45. outline: 0 none;
  46. padding: 5px 0px 5px 5px;
  47. width: 70%;
  48. border-radius: 2px;
  49. -webkit-border-radius: 2px;
  50. -moz-border-radius: 2px;
  51. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  52. background: #DFDFDF;
  53. }
  54. .dark-matter select {
  55. background: #DFDFDF url('down-arrow.png') no-repeat right;
  56. background: #DFDFDF url('down-arrow.png') no-repeat right;
  57. appearance:none;
  58. -webkit-appearance:none;
  59. -moz-appearance: none;
  60. text-indent: 0.01px;
  61. text-overflow: '';
  62. width: 70%;
  63. height: 35px;
  64. color: #525252;
  65. line-height: 25px;
  66. }
  67. .dark-matter textarea{
  68. height:100px;
  69. padding: 5px 0px 0px 5px;
  70. width: 70%;
  71. }
  72. .dark-matter .button {
  73. background: #FFCC02;
  74. border: none;
  75. padding: 10px 25px 10px 25px;
  76. color: #585858;
  77. border-radius: 4px;
  78. -moz-border-radius: 4px;
  79. -webkit-border-radius: 4px;
  80. text-shadow: 1px 1px 1px #FFE477;
  81. font-weight: bold;
  82. box-shadow: 1px 1px 1px #3D3D3D;
  83. -webkit-box-shadow:1px 1px 1px #3D3D3D;
  84. -moz-box-shadow:1px 1px 1px #3D3D3D;
  85. }
  86. .dark-matter .button:hover {
  87. color: #333;
  88. background-color: #EBEBEB;
  89. }
复制代码
总结，小小的CSS样式能够让用户更加欣赏和留住，网站模板不一定要经常改变，但是可以在原有的基础上慢慢修改和提升用户体验，那就从CSS做起。以上的6款HTML CSS表单样式，比较适合用户留言、邮件发送表单等使用。

鲜花
握手
雷人
路过
鸡蛋
收藏 邀请
上一篇：备案密码忘记了，怎么找回密码？下一篇：五步实现网站搬家更换域名及全站301重定向方法
相关推荐
!jz_fbzt! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-11-23 21:37

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

返回顶部