清洁和时尚的CSS3的表格 - html/css语言栏目：html

这篇文章是关于使用一些 CSS3属性创建一个表单。您可以轻松地自定义样式。 HTML代码： 下面的HTML代码的形式给出。我们使用的每一个输入字段的标签，包裹在一个div。 <form id="contactform" class="rounded" method="post" action=""> <h3>Contact Form</h3>   <div class="field">     <label for="name">Name:</label>     <input type="text" class="input" name="name" id="name" />     <p class="hint">Enter your name.</p> </div>   <div class="field">     <label for="email">Email:</label>     <input type="text" class="input" name="email" id="email" />     <p class="hint">Enter your email.</p> </div>   <div class="field">     <label for="message">Message:</label>     <textarea class="input textarea" name="message" id="message">     </textarea>     <p class="hint">Write your message.</p> </div>   <input type="submit" name="Submit"  class="button" value="Submit" /> </form> 加入风格的形成 布局形式： 我们可以添加一些风格，形成布局，例如，我们可以设置的形式，宽度，背景颜色，边框样式，例如框阴影等： #contactform {       width: 500px;     padding: 20px;     background: #f0f0f0;     overflow:auto;       /* Border style */     border: 1px solid #cccccc;     -moz-border-radius: 7px;     -webkit-border-radius: 7px;     border-radius: 7px;       /* Border Shadow */     -moz-box-shadow: 2px 2px 2px #cccccc;     -webkit-box-shadow: 2px 2px 2px #cccccc;     box-shadow: 2px 2px 2px #cccccc;       } 标签： 用于关联标签输入元素的HTML <label>的标签。每个<label>的标签相关联的一个元素。 属性的<label>标签相关的输入元素的id应该是平等的。   我们可以标签样式如下： label {     font-family: Arial, Verdana;     text-shadow: 2px 2px 2px #ccc;     display: block;     float: left;     font-weight: bold;     margin-right:10px;     text-align: right;     width: 120px;     line-height: 25px;     font-size: 15px;     } 由于我们没有指定任何标签类名，因此，上面的样式将被应用到表单中的所有标签。   输入字段： 以下是为输入字段输入类。在我们的表格中，我们指定为300像素宽的输入字段。 .input{     font-family: Arial, Verdana;     font-size: 15px;     padding: 5px;     border: 1px solid #b9bdc1;     width: 300px;     color: #797979;     } 在演示中，你可以看到，当鼠标在任何场区，显示提示。这是一个简单的方法。我们可以在一个类中添加提示文本，每一个输入字段旁边。最初的类是隐藏的，如： .hint{     display:none;     } 悬停时，我们可以显示的提示类 .field:hover .hint {     position: absolute;     display: block;     margin: -30px 0 0 455px;     color: #FFFFFF;     padding: 7px 10px;     background: rgba(0, 0, 0, 0.6);       -moz-border-radius: 7px;     -webkit-border-radius: 7px;     border-radius: 7px;     } 由于利润率和绝对位置，显示输入字段旁边的提示类。   提交按钮 我们添加背景渐变样式，边界半径和阴影等，使我们的提交按钮。以下是按钮的代码： .button{     float: right;     margin:10px 55px 10px 0;     font-weight: bold;     line-height: 1;     padding: 6px 10px;     cursor:pointer;     color: #fff;       text-align: center;     text-shadow: 0 -1px 1px #64799e;       /* Background gradient */     background: #a5b8da;     background: -moz-linear-gradient        (top, #a5b8da 0%, #7089b3 100%);     background: -webkit-gradient        (linear, 0% 0%, 0% 100%,        from(#a5b8da), to(#7089b3));       /* Border style */     border: 1px solid #5c6f91;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border-radius: 10px;       /* Box shadow */     -moz-box-shadow: inset 0 1px 0 0 #aec3e5;     -webkit-box-shadow: inset 0 1px 0 0 #aec3e5;     box-shadow: inset 0 1px 0 0 #aec3e5;