对数据表格应用样式

1、表格特有的元素

  • caption：基本上用做表格的标题。summary：可应用于表格的标签，用来描述表格的内容（与image的alt文本相似）

    1. <table class="cal" summary="A calandar style date picker">
    2. <caption>
    3.     <a href="#" class="prev">&lt;</a> January 2008 <a href="#" class="next">&gt;</a>
    4. </caption>
    5. </table>

  • thead、tbody和tfoot使开发人员能够将表格划分为逻辑部分，可以将所有列标题放在thead元素中，这样可以对这个特殊区域单独应用样式。如果使用thead或tfoot元素，那么必须至少使用一个tbody元素。在一个表格中只能使用一个thead和tfoot元素，但是可以使用多个tbody将复杂的表格划分为更容易管理的几个部分。

    　　　　行和列标题应该使用th标记而不是td，但是如果某些内容既是数据又是标题，那么它仍然应该使用td，表格标题可以设置值为row或col的scope属性，定义他们是行标题还是列标题，它们还可以设置值rowgroup或colgroup，表示他们与多行或多列相关

    1. <thead>
    2.     <tr>
    3.         <th scope="col">S</th>
    4.         <th scope="col">M</th>
    5.         <th scope="col">T</th>
    6.         <th scope="col">W</th>
    7.         <th scope="col">T</th>
    8.         <th scope="col">F</th>
    9.         <th scope="col">S</th>
    10.     </tr>
    11. </thead>
  • col和colgroup：tr能狗对整行应用样式，但是很难对整列应用样式。colgroup能够对使用col元素定义的一个或多个列进行分组，但是支持col和colgroup元素的浏览器并不多 
    1. <colgroup>
    2.   <col id="sun" />
    3.   <col id="mon" />
    4.   <col id="tue" />
    5.   <col id="wed" />
    6.   <col id="thur" />
    7.   <col id="fri" />
    8.   <col id="sat" />
    9. </colgroup>

2、数据表格标记

下面代码可以创建出一个日历表格的基本轮廓：

  1. <table class="cal" summary="A calandar style date picker">
  2. <caption>
  3.     <a href="#" class="prev">&lt;</a> January 2008 <a href="#" class="next">&gt;</a>
  4. </caption>
  5. <colgroup>
  6.   <col id="sun" />
  7.   <col id="mon" />
  8.   <col id="tue" />
  9.   <col id="wed" />
  10.   <col id="thur" />
  11.   <col id="fri" />
  12.   <col id="sat" />
  13. </colgroup>
  14.  
  15. <thead>
  16.     <tr>
  17.         <th scope="col">S</th>
  18.         <th scope="col">M</th>
  19.         <th scope="col">T</th>
  20.         <th scope="col">W</th>
  21.         <th scope="col">T</th>
  22.         <th scope="col">F</th>
  23.         <th scope="col">S</th>
  24.     </tr>
  25. </thead>
  26.  
  27.     <tbody>
  28.         <tr>
  29.             <td>30</td>
  30.             <td>31</td>
  31.             <td><a href="#">1</a></td>
  32.             <td><a href="#">2</a></td>
  33.             <td><a href="#">3</a></td>
  34.             <td><a href="#">4</a></td>
  35.             <td><a href="#">5</a></td>
  36.         </tr>
  37.         <tr>
  38.             <td><a href="#">6</a></td>
  39.             <td><a href="#">7</a></td>
  40.             <td class="selected"><a href="#">8</a></td>
  41.             <td><a href="#">9</a></td>
  42.             <td><a href="#">10</a></td>
  43.             <td><a href="#">11</a></td>
  44.             <td><a href="#">12</a></td>
  45.         </tr>
  46.         <tr>
  47.             <td><a href="#">13</a></td>
  48.             <td><a href="#">14</a></td>
  49.             <td><a href="#">15</a></td>
  50.             <td><a href="#">16</a></td>
  51.             <td><a href="#">17</a></td>
  52.             <td><a href="#">18</a></td>
  53.             <td><a href="#">19</a></td>
  54.         </tr>
  55.         <tr>
  56.             <td><a href="#">20</a></td>
  57.             <td><a href="#">21</a></td>
  58.             <td><a href="#">22</a></td>
  59.             <td><a href="#">23</a></td>
  60.             <td><a href="#">24</a></td>
  61.             <td><a href="#">25</a></td>
  62.             <td><a href="#">26</a></td>
  63.         </tr>
  64.         <tr>
  65.             <td><a href="#">27</a></td>
  66.             <td><a href="#">28</a></td>
  67.             <td><a href="#">29</a></td>
  68.             <td><a href="#">30</a></td>
  69.             <td><a href="#">31</a></td>
  70.             <td>1</td>
  71.             <td>2</td>
  72.         </tr>
  73.     </tbody>
  74. </table>

结果如下：

3、对表格应用样式

  • border-collapse：设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

    值 描述
    separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
    collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
    inherit 规定应该从父元素继承 border-collapse 属性的值。

    separate时：collapse时：

  • border-spacing：该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

    值 描述
    length length

    规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

    如果定义一个 length 参数，那么定义的是水平和垂直间距。

    如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
    inherit 规定应该从父元素继承 border-spacing 属性的值。

CSS规范有两个表格边框模型：单独的和叠加的。单独模型：在各个单元周围有边框；叠加模型：单元格共享边框。用border-collapse属性来设置。

在本例中希望使用双边框创建斜面效果，所以将border-collapse设置为separate，然后让表格中的所有文本居中，删除默认的内边距和外边距。使用border-spacing控制按元个之间的距离。

4、添加视觉样式

让表格标题更像常规的标题：增加自豪并粗体，通过垂直内边距增加标题上下的空间。

  1. .cal caption {
  2.     font-size: 1.25em;
  3.     padding-top: 0.692em;
  4.     padding-bottom: 0.692em;
  5.     background-color: #d4dde6;
  6. }

确定月份两边的前一个和下一个链接的位置：

  1. .cal caption[rel="prev"] {
  2.     float: left;       /*向左浮动*/
  3.     margin-left: 0.2em;     /*设置水平外边距*/
  4. }
  5. .cal caption[rel="next"] {
  6.     float: right;       /*向右浮动*/
  7.     margin-lright: 0.2em;    /*设置水平外边距*/
  8. }
  9. .cal caption a:link,
  10. .cal caption a:visited {
  11.     text-decoration: none;
  12.     color: #333;
  13.     padding: 0 0.2em;    /*内边距让点击区域更突出*/
  14. }
  15. .cal caption a::hover,
  16. .cal caption a::active,
  17. .cal caption a::focus {
  18.     background-color: #6d8ab7;    /*悬停等操作时改变背景颜色*/
  19. }

区别表格标题的第一行：背景较浅，添加下划线，文本略小：

  1. .cal thead th {
  2.     background-color: #d4dde6;
  3.     border-bottom: 1px solid #a9bacb;
  4.     font-size: 0.875em;
  5. }

设置表格体的文本是灰色的，表示不可以选择它们，为文本设置文本阴影：

  1. .cal tbody {
  2.     color: #a4a4a4;
  3.     text-shadow: 1px 1px 1px white;
  4.  
  5. }
让单元格产生斜面效果：顶部和左边颜色浅，底部和右边颜色深。设置锚链接的样式：创建像按钮一样的点击区域，加深背景颜色，加粗字体
  1. .cal tbody td {
  2.     border-top: 1px solid #e0e0e1;
  3.     border-right: 1px solid #9f9fa1;
  4.     border-bottom: 1px solid #acacad;
  5.     border-left: 1px solid #dfdfe0;
  6. }
  7. .cal tbody a {
  8.     display: block;
  9.     text-decoration: none;
  10.     color: #333;
  11.  
  12.     font-weight: bold;
  13.     padding: 0.385em 0.692em 0.308em 0.692em;
  14. }
设置锚链接的鼠标悬停状态，前面选择的日期将通过包含selected类继承这个样式，让链接变成蓝色背景上的白色文本：

  1. .cal tbody a:hover,
  2. .cal tbody a:focus,
  3. .cal tbody a:active,
  4. .cal tbody .selected a:link,
  5. .cal tbody .selected a:visited,
  6. .cal tbody  .selecteda:hover,
  7. .cal tbody  .selected a:focus,
  8. .cal tbody .selected a:active {
  9.     background-color: #6d8ab7;
  10.     color: white;
  11. 　　text-shaow:1px 1px 2px #22456b
  12. }

一个总的CSS样式：

  1. <style type="text/css">
  2.  
  3. body {
  4.     font-family: "myriad pro", arial, helvetica, sans-serif;
  5.   font-size:16px;
  6.   line-height:1.125em; /* Baseline grid of 18px */
  7. }
  8.  
  9. /* tables may still need 'cellspacing="0"' in the markup */
  10. table.cal {
  11.     border-collapse: collapse;
  12.     border-spacing:;
  13.     text-align: center;
  14.     border-bottom: 1px solid #666;
  15. }
  16.  
  17. .cal caption {
  18.     font-size:1.3em;
  19.     padding-top: 0.692em; /* 9px */
  20.     padding-bottom: 0.692em; /* 9px */
  21. }
  22.  
  23. .cal thead th {
  24.     border-top: 3px solid #666;
  25.     border-bottom: 3px solid #666;
  26.     padding-top: 0.692em; /* 9px */
  27.     padding-bottom: 0.692em; /* 9px */
  28. }
  29.  
  30. /* @group Header */
  31.  
  32. .cal caption a:link,
  33. .cal caption a:visited,
  34. .cal caption a:hover,
  35. .cal caption a:active,
  36. .cal caption a:focus {
  37.     background-color: #CCC;
  38.     text-decoration: none;
  39.     color: black;
  40.     padding: 0 0.2em;
  41. }
  42.  
  43. .cal caption a:hover,
  44. .cal caption a:active,
  45. .cal .caption a:focus {
  46.     background-color: blue;
  47.     color: white;
  48. }
  49.  
  50. /* @end */
  51.  
  52. /* @group Days */
  53.  
  54. .cal tbody {
  55.     color: #999;
  56. }
  57.  
  58. .cal tbody a:link,
  59. .cal tbody a:visited,
  60. .cal tbody a:hover,
  61. .cal tbody a:focus,
  62. .cal tbody a:active {
  63.     display: block;
  64.     text-decoration: none;
  65.     color: black;
  66.     font-weight: bold;
  67.     padding: 0.385em 0.692em 0.308em 0.692em; /* 5px 9px 4px 9px */
  68. }
  69.  
  70. .cal tbody a:hover,
  71. .cal tbody a:focus,
  72. .cal tbody a:active {
  73.     /*outline: 1px solid #ccc;*/
  74.     background-color: #CCC;
  75.     color: black;
  76. }
  77.  
  78. .cal tbody .selected a:link,
  79. .cal tbody .selected a:visited,
  80. .cal tbody  .selecteda:hover,
  81. .cal tbody  .selected a:focus,
  82. .cal tbody .selected a:active {
  83.     background-color: blue;
  84.     color: white;
  85. }
  86.  
  87. </style>

结果为：

简单的表格布局

1、有用的表单元素

  • fieldset：对相关的信息块进行分组（上图中有两个fieldset，一个用于联系人详细信息，一个用于注释）。lengend设置fieldset的标题
  • 表单标签label：阅读器会正确的将表单元素和它的标签关联起来。将表单元素和它的标签关联的两种方式： 
    1. <!--控件和标签关联需要id属性，将表单数据发送回服务器需要name属性-->
    2.  
    3. <!--隐式方式：把表单元素嵌套在label元素中-->
    4. <label>email <input name="email" type="text"/><label>
    5.  
    6. <!--显式方式：把label的for属性值设置为控件的id值-->
    7. <label for="email" >email <label>
    8. <input name="email" id="email" type="text"/>

2、基本布局

  1. <fieldset>
  2.     <legend>Your Contact Details</legend>   <!--为fieldset设置标题-->
  3.     <div>
  4.     <label for="author">Name: <em class="required">(Required)</em></label>  <!--em强调斜体，for和id的值相同-->
  5.     <input name="author" id="author" type="text" />
  6.     </div>
  7.  
  8.     <div>
  9.     <label for="email">Email Address:</label> <!--for和id的值相同-->
  10.     <input name="email" id="email" type="text" />
  11.     </div>
  12.  
  13.     <div>
  14.     <label for="url">Web Address:</label> <!--for和id的值相同-->
  15.     <input name="url" id="url" type="text" />
  16.     </div>
  17. </fieldset>

没有应用样式：

应用样式：

  1. fieldset {
  2.     margin: 1em 0; /*使用外边距进行垂直分隔*/
  3.     padding: 1em;
  4.     border : 1px solid #ccc;
  5. }
  6.  
  7. legend {
  8.     font-weight: bold; /*加粗legend元素*/
  9. }
  10.  
  11. label {
  12.     display: block; /*标签在默认情况下是行内元素，将他们的display设置为block会使它们产生自己的块框，使输入元素转到下一行*/
  13.     cursor: pointer;  /*设置标签的光标样式*/
  14. }
  15.  
  16. input {
  17.   width: 20em; /*显式设置输入框的宽度，使其一致*/
  18. }

结果：

3、其他元素

文本区域：

  1. <fieldset>
  2.     <legend>Comments</legend>
  3.     <div>
  4.     <label for="text">Message: <em class="required">(Required)</em></label>
  5.     <textarea name="text" id="text" cols="20" rows="10"></textarea>
  6.     </div>
  7. </fieldset>

应用样式：

  1. textarea {
  2.     width: 100%;
  3.     height: 10em;
  4. }

单选按钮和复选框：通常不把标签放在上方，而是放在右边。上述的代码将所有的输入框宽度都设置为20em，为区别输入元素，最好的办法是给它们分配一个类：例如给单选按钮分配类名radio

  1. <fieldset id="remember-me">
  2.     <legend>Remember Me</legend>
  3.     <div>
  4. <!--通过让标签围绕控件让标签和控件出现在同一行-->
  5.         <label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
  6.     </div>
  7.     <div>
  8.         <label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
  9.     </div>
  10. </fieldset>

应用样式：

  1. input.radio, input.submit {
  2.   width: auto;      <!--将单选按钮的宽度设置为auto，覆盖前面对输入元素的设置-->
  3. }
  4.  
  5. #remember-me .radio {
  6.     margin-right: 1em;  <!--在单选按钮中添加一点外边距，使得标签之间提供适当的距离-->
  7. }

4、修饰

元素获得焦点时改变背景颜色，帮助用户找到要填写的表单域：

  1. input[type="text"]:focus, textarea:focus {
  2.     background: #ffc;
  3. }

必填域：可在必填域的旁边放上有样式的文本或星号，适合这一信息的元素是em和strong，对这一信息应用样式：

  1. label .required {
  2.     font-size: 0.75em;     <!--减小字号-->
  3.     color:#760000;      <!--让文本变为红色-->
  4. }

总代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. <style type="text/css">
  7. body {
  8.     font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  9. }
  10.  
  11. form {
  12.   font-size: 1.4em;
  13.     width: 30em;
  14. }
  15.  
  16. /* fieldset styling */
  17. fieldset {
  18.     margin: 1em 0; /*  space out the fieldsets a little*/
  19.     padding: 1em;
  20.     border : 1px solid #ccc;
  21. }
  22.  
  23. /* legend styling */
  24. legend {
  25.     font-weight: bold;
  26. }
  27.  
  28. form div {
  29.     padding: 0.4em 0;
  30. }
  31.  
  32. /* style for  labels */
  33. label {
  34.     display: block;
  35.     cursor: pointer;
  36. }
  37.  
  38.  /*style for required labels */
  39. label .required {
  40.     font-size: 0.75em;
  41.     color:#760000;
  42. }
  43.  
  44. input {
  45.   width: 20em;
  46. }
  47.  
  48. textarea {
  49.     width: 100%;
  50.     height: 10em;
  51. }
  52.  
  53. input.radio, input.submit {
  54.   width: auto;
  55. }
  56.  
  57. #remember-me .radio {
  58.     margin-right: 1em;
  59. }
  60.  
  61. /* style form elements on focus */
  62. input[type="text"]:focus, textarea:focus {
  63.     background: #ffc;
  64. }
  65. </style>
  66. </head>
  67.  
  68. <body>
  69. <form id="comments_form" action="#" method="post">
  70. <fieldset>
  71.     <legend>Your Contact Details</legend>
  72.     <div>
  73.     　　<label for="author">Name: <em class="required">(Required)</em></label>
  74.     　　<input name="author" id="author" type="text" />
  75.     </div>
  76.     <div>
  77.     　　<label for="email">Email Address:</label>
  78.     　　<input name="email" id="email" type="text" />
  79.     </div>
  80.     <div>
  81.     　　<label for="url">Web Address:</label>
  82.     　　<input name="url" id="url" type="text" />
  83.     </div>
  84. </fieldset>
  85. <fieldset>
  86.     <legend>Comments</legend>
  87.     <div>
  88.     　　<label for="text">Message: <em class="required">(Required)</em></label>
  89.     　　<textarea name="text" id="text" cols="20" rows="10"></textarea>
  90.     </div>
  91. </fieldset>
  92. <fieldset id="remember-me">
  93.     <legend>Remember Me</legend>
  94.     <div>
  95.         <label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
  96.     </div>
  97.     <div>
  98.         <label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
  99.     </div>
  100. </fieldset>
  101. <div>
  102. 　　<input id="submit" class="submit" name="submit" type="submit"/>
  103. </div>
  104. </form>
  105. </body>
  106. </html>

复杂的表单布局

将标签个表单元素水平布置：

与上述示例不同的地方：将标签向左浮动，并为标签设置宽度，让所有表单元素排齐

  1. label {
  2.     float: left;
  3.     width: 10em;
  4. }

如果表单标签可能跨多行，应该清理div容器，避免它们干扰下一组标签和弄乱布局。

  1. form div {
  2.     clear: left;        /*clear规定元素的哪一侧不允许其他元素浮动*/
  3. }

1、可访问的数据输入元素（Personal Information中的Date of Birth部分）

  1. <div>
  2.     <label for="dateOfBirth">Date of Birth:</label>
  3.     <input name="dateOfBirth" id="dateOfBirth" type="text"  />
  4.  
  5.     <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
  6.     <select name="monthOfBirth" id="monthOfBirth">
  7.       <option value="1">January</option>
  8.       <option value="2">February</option>
  9.       <option value="3">March</option>
  10.     </select>
  11.  
  12.     <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
  13.     <input name="yearOfBirth" id="yearOfBirth" type="text" />
  14. </div>

在收集日期信息的表单元素中，不希望月和年的标签显示：需要隐藏Month of Birth和Year of Birth标签

  • 将标签的display属性设置为none会阻止标签的显示，但是也会阻止屏幕阅读器访问它们
  • 通过值较大的负文本缩进将标签定位到屏幕外，并将标签的宽度设置为零。 
    1. #monthOfBirthLabel, #yearOfBirthLabel {
    2.     text-indent: -1000em;
    3.     width:;
    4. }

单独设置各个表单控件的尺寸，并用外边距控制它们的水平边距：

  1. #dateOfBirth {
  2.     width: 3em;
  3.     margin-right: 0.5em;
  4. }
  5.  
  6. #monthOfBirth {
  7.     width: 10em;
  8.     margin-right: 0.5em;
  9. }
  10.  
  11. #yearOfBirth {
  12.     width: 5em;
  13. }

2、多列复选框（Personal Information中的Favorite Color部分）

将大的复选框组或单选按钮创建成两列：

　　为创建列效果，要将复选框分成两组，每一组放在一个div中各有一个col类，然后将这两个div放在一个具有描述性ID的fieldset中。

  1. <fieldset id="favoriteColor">
  2.   <h2>Favorite Color:</h2>
  3.   <div class="col">
  4.     <div>
  5.         <label><input class="checkbox" id="red" name="red" type="checkbox" value="red" />red</label>
  6.     </div>
  7.     <div>
  8.         <label><input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" />yellow</label>
  9.     </div>
  10.     <div>
  11.         <label><input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" />pink</label>
  12.     </div>
  13.     <div>
  14.         <label><input class="checkbox" id="green" name="green" type="checkbox" value="green" />green</label>
  15.     </div>
  16.   </div>
  17.  
  18.   <div class="col">
  19.     <div>
  20.         <label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />orange</label>
  21.     </div>
  22.     <div>
  23.         <label><input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" />purple</label>
  24.     </div>
  25.     <div>
  26.         <label><input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" />blue</label>
  27.     </div>
  28.     <div>
  29.         <label><input class="checkbox" id="other" name="other" type="checkbox" value="other" />other</label>
  30.     </div>
  31.   </div>
  32. </fieldset>

因为之前已经创建了基本的fieldset样式，所以需要先覆盖这些样式，将内边距和外边距设置为零，去掉边框设置背景颜色为透明：

  1. #favoriteColor {
  2.     margin:;
  3.     padding:;
  4.     border: none;
  5.     background: transparent;
  6. }

将标题用作标签：

  1. #favoriteColor h2 {
  2.     width: 10em;
  3.     float: left;
  4.     font-size: 1em;
  5.     font-weight: normal;
  6. }

将两个div向左浮动，创建出两列的布局：

  1. #favoriteColor .col {
  2.     width: 8em;
  3.     float: left;
  4.     clear: none; /*因为在表单中的所有div在默认情况下已经被清理了，所以需要用clear: none覆盖那个声明*/
  5. }

复选框的标签不需要浮动，需要覆盖那个声明：

  1. #favoriteColor label {
  2.     float: none;
  3. }

3、提交按钮

通常使用一个type值为submit的input元素，也可以使用button元素替代input元素

  1. <div>
  2.     <button type="submit">Book Now »</button>
  3. </div>
  4. <style>
  5. button {
  6.   width: 200px;
  7.   height: 50px;
  8.   border: 1px solid #989898;
  9.    -moz-border-radius: 6px;
  10.    -webkit-border-radius: 6px;
  11.    border-radius: 6px;
  12.    background: url(img/button-bg.png) #c5e063 bottom left repeat-x;
  13.   -moz-box-shadow: 2px 2px 2px #ccc;
  14.   -webkit-box-shadow: 2px 2px 2px #ccc;
  15.   box-shadow: 2px 2px 2px #ccc;
  16.    color: #fff;
  17.    font-size: 26px;
  18.    font-weight: bold;
  19.    text-shadow: 1px 1px 1px #666;
  20. }
  21. </style>

4、表单反馈（Your Contact Details中的email部分）

反馈信息突出显示忘了填写或填写错误的域：常用方法是在域的旁边添加一个错误信息。

将反馈文本放在一个em中，将这个em放在源代码中文本输入元素的后面，为使其正确排列，em和前面的input元素要浮动。许多阅读器会忽略表单元素之间的文本，除非把文本挡在标签中，为避免此问题，最好的方法是将错误信息放在表单标签中，然后使用css进行定位：

  1. <div>
  2.     <label for="email">Email Address is really, really, really really long: <em class="feedback">Incorrect email address. Please try again.</em></label>
  3.     <input name="email" id="email" type="text" />
  4. </div>

对其应用样式：

  1. form div {
  2.     position: relative;  /*为对em进行定位，需要将表单中所有段落的position设置为relative，从而创建一个新的定位上下文*/
  3.     width: 100%;
  4.     padding: 0.4em 0;
  5.     clear: both;
  6. }
  7. label .feedback {
  8.     position: absolute;     /*对em进行绝对定位，让它出现在文本输入元素的右边*/
  9.     left: 30em;     /*标签宽度为10em，文本框宽度为20em，所以em的左位置设置为30em*/
  10.     right:;
  11.     top: 0.5em;
  12.     font-weight: bold;
  13.     color:#760000;
  14.     padding-left: 20px;
  15.     background: url(img/error.png) no-repeat left top;
  16. }

总的代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. <style type="text/css">
  7. <!--
  8.  
  9. body {
  10.     font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  11. }
  12.  
  13. .clear {
  14.   clear: both;
  15. }
  16.  
  17. form {
  18.   font-size: 1.4em;
  19.     width: 45em;
  20. }
  21.  
  22. /* fieldset styling */
  23. fieldset {
  24.     margin: 1em 0; /*  space out the fieldsets a little*/
  25.     padding: 1em;
  26.     border : 1px solid #ccc;
  27.     background-color:#F5F5F5
  28. }
  29.  
  30. /* legend styling */
  31. legend {
  32.     font-weight: bold;
  33. }
  34.  
  35. form div {
  36.   position: relative;
  37.     width: 100%;
  38.     padding: 0.4em 0;
  39.     clear: both;
  40. }
  41.  
  42. /* style for  labels */
  43. label {
  44.     float: left;
  45.     clear: left;
  46.     width: 10em;
  47. }
  48.  
  49. /* style for required labels */
  50. label .required {
  51.     font-size: 0.83em;
  52.     color:#760000;
  53. }
  54.  
  55. /* style error messages */
  56. label .feedback {
  57.     position: absolute;
  58.     left: 31em;
  59.   right: 0;
  60.     top: 0.5em;
  61.     font-weight: bold;
  62.     color:#760000;
  63.     padding-left: 20px;
  64.     background: url(img/error.png) no-repeat left top;
  65. }
  66.  
  67. /* :KLUDGE: Explicitly set the width for IE6- */
  68. * html .feedback{
  69.   width: 10em;
  70. }
  71.  
  72. input {
  73.   width: 20em;
  74.     font-size: inherit;
  75. }
  76.  
  77. input[type="text"], textarea {
  78.     border-top: 2px solid #999;
  79.     border-left: 2px solid #999;
  80.     border-bottom: 1px solid #ccc;
  81.     border-right: 1px solid #ccc;
  82. }
  83.  
  84. input.radio, input.checkbox, input.submit {
  85.   width: auto;
  86. }
  87.  
  88. /* style form elements on focus */
  89. input:focus, textarea:focus {
  90.     background: #ffc;
  91. }
  92.  
  93. textarea {
  94.     width: 100%;
  95.     height: 10em;
  96. }
  97.  
  98. /* Date of Birth form styling */
  99.  
  100. #monthOfBirthLabel, #yearOfBirthLabel {
  101.   text-indent: -1000em;
  102.     width: 0;
  103. }
  104.  
  105. #dateOfBirth {
  106.   width: 3em;
  107.     margin-right: 0.5em;
  108. }
  109.  
  110. #monthOfBirth {
  111.   width: 10em;
  112.     margin-right: 0.5em;
  113. }
  114.  
  115. #yearOfBirth {
  116.   width: 5em;
  117. }
  118.  
  119. /* Color form styling */
  120. #favoriteColor {
  121.   margin: 0;
  122.     padding: 0;
  123.     border: none;
  124.     background: transparent;
  125. }
  126.  
  127. #favoriteColor h2 {
  128.   width: 10em;
  129.     float: left;
  130.     font-size: 1em;
  131.     font-weight: normal;
  132. }
  133.  
  134. #favoriteColor .col {
  135.   width: 8em;
  136.     float: left;
  137.     clear: none;
  138. }
  139.  
  140. #favoriteColor label {
  141.     float: none;
  142. }
  143.  
  144. #remember-me .radio {
  145.     margin-right: 1em;
  146. }
  147.  
  148. /* Button styling */
  149.  
  150. button {
  151.   width: 200px;
  152.   height: 50px;
  153.   border: 1px solid #989898;
  154.    -moz-border-radius: 6px;
  155.    -webkit-border-radius: 6px;
  156.    border-radius: 6px;
  157.    background: url(img/button-bg.png) #c5e063 bottom left repeat-x;
  158.   -moz-box-shadow: 2px 2px 2px #ccc;
  159.   -webkit-box-shadow: 2px 2px 2px #ccc;
  160.   box-shadow: 2px 2px 2px #ccc;
  161.    color: #fff;
  162.    font-size: 26px;
  163.    font-weight: bold;
  164.    text-shadow: 1px 1px 1px #666;
  165. }
  166.  
  167. </style>
  168. </head>
  169. <body>
  170. <form id="comments_form" action="#" method="post">
  171.  
  172. <fieldset>
  173.     <legend>Your Contact Details</legend>
  174.     <div>
  175.     <label for="author">Name: <em class="required">(Required)</em></label>
  176.     <input name="author" id="author" type="text" />
  177.     </div>
  178.  
  179.     <div>
  180.     <label for="email">Email Address is really, really, really really long: <em class="feedback">Incorrect email address. Please try again.</em></label>
  181.     <input name="email" id="email" type="text" />
  182.     </div>
  183.  
  184.     <div>
  185.     <label for="url">Web Address:</label>
  186.     <input name="url" id="url" type="text" />
  187.     </div>
  188. </fieldset>
  189.  
  190. <fieldset>
  191.     <legend>Personal Information</legend>
  192.  
  193.     <div>
  194.     <label for="author">Place of Birth: </label>
  195.     <select>
  196.   <option value="USA" selected="selected">USA</option>
  197.   <option value="UK">United Kingdom</option>
  198.   </select>
  199.     </div>
  200.  
  201.     <div>
  202.     <label for="dateOfBirth">Date of Birth:</label>
  203.   <input name="dateOfBirth" id="dateOfBirth" type="text"  />
  204.  
  205.   <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
  206.   <select name="monthOfBirth" id="monthOfBirth">
  207.   <option value="1">January</option>
  208.   <option value="2">February</option>
  209.   <option value="3">March</option>
  210.   </select>
  211.  
  212.   <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
  213.   <input name="yearOfBirth" id="yearOfBirth" type="text" />
  214.     </div>
  215.  
  216.     <fieldset id="favoriteColor">
  217.     <h2>Favorite Color:</h2>
  218.  
  219.     <div class="col">
  220.     <div>
  221.     <label><input class="checkbox" id="red" name="red" type="checkbox" value="red" />red</label>
  222.     </div>
  223.  
  224.     <div>
  225.     <label><input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" />yellow</label>
  226.     </div>
  227.  
  228.     <div>
  229.     <label><input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" />pink</label>
  230.     </div>
  231.  
  232.     <div>
  233.     <label><input class="checkbox" id="green" name="green" type="checkbox" value="green" />green</label>
  234.     </div>
  235.   </div>
  236.  
  237.     <div class="col">
  238.     <div>
  239.     <label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />orange</label>
  240.     </div>
  241.  
  242.     <div>
  243.     <label><input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" />purple</label>
  244.     </div>
  245.  
  246.     <div>
  247.     <label><input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" />blue</label>
  248.     </div>
  249.  
  250.     <div>
  251.     <label><input class="checkbox" id="other" name="other" type="checkbox" value="other" />other</label>
  252.     </div>
  253.   </div>
  254.     </fieldset>
  255.  
  256. </fieldset>
  257.  
  258. <fieldset>
  259.     <legend>Comments</legend>
  260.     <div>
  261.     <label for="text">Message: <em class="required">(Required)</em></label>
  262.     <textarea name="text" id="text" cols="20" rows="10"></textarea>
  263.     </div>
  264. </fieldset>
  265.  
  266. <fieldset id="remember-me">
  267.     <legend>Remember Me</legend>
  268.         <div>
  269.         <label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
  270.         </div>
  271.  
  272.         <div>
  273.         <label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
  274.         </div>
  275.  
  276. </fieldset>
  277.  
  278. <div>
  279. <button type="submit">Book Now »</button>
  280. </div>
  281.  
  282. </form>
  283. </body>
  284. </html>

　　

ch7对表单和数据表格使用样式的更多相关文章

  1. 【CSS系列】对表单和数据表格应用样式

    表格特有的元素: 1.summary和caption caption用作与表格的标题.summary应用于表格标签,用来描述表格的内容,于image标签的alt文本相似. 2.thead tbody ...

  2. JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入

    1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...

  3. Layui事件监听（表单和数据表格）

    一.表单的事件监听 先介绍一下几个属性的用法 1.lay-filter 事件过滤器 相当于选择器,layui的专属选择器 2.lay-verify 验证属性 属性值可以是 :required必填项, ...

  4. .NET开源工作流RoadFlow-表单设计-数据表格

    数据表格即在表单中显示一个table,该table数据可以来自任意自定义的来源: 数据类型:指定表格的数据源类型 1.datatable,即.net中的System.Data.DataTable 2. ...

  5. web设计_8_数据表格内容样式分离

    1.页面需要用到table的时候,样式重置CSS要设置: table{ border-collapse: collapse; border-spacing:; } 2. HTML结构 <tabl ...

  6. HTML5对表单的约束验证

    在HTML5中增加了许多新的功能,用于表单提交到服务器之前对表单进行数据的验证(抢了javascript的饭碗),有了这些功能,即便是javascript没有加载进来还是可以确保基本的验证.换句话说, ...

  7. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  8. jQuery（6）——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  9. （十）jQuery对表单、表格的操作

    一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

随机推荐

  1. 喵星之旅-狂奔的兔子-svn安装及使用

    一.服务端安装配置 1.安装svn 创建版本库并配置 以root用户登录,或者具有sudo权限的用户,这里选择root. yum install subversion 都选择y 2.创建版本库并配置 ...

  2. redis的使用1

    学Linux已经将近一个月了,Linux中讲到的redis的使用,到现在还不回具体的使用在php中,今天周末,于是想把redis的使用搞懂. 网上的资料不算多,但还需要硬着头皮学.其中找到这样一篇关于 ...

  3. spring boot 配置时区差别

    前提 数据库时区:GMT+8 show variables like '%time_zone%'; 本机电脑时区: 情景一.不指定时区 传递的参数映射到Data不指定时区,连接数据库不指定时区,保存时 ...

  4. proto school tutorial: blog: lesson 1

    https://proto.school/#/blog/01 我们现在希望:把一个post 和他的作者联系起来. 从之前的教程here中,你可以知道, 一个cid 就是代表一个link 比如: { l ...

  5. PyCharm调试方法

    1.调试部分代码以后继续执行剩余代码,点击Resume Program:

  6. Hive的安装与基础指令

    一.Hive安装 Hive的安装相对比较简单,Hive是基于Hadoop来使用的,所以搭建Hadoop伪分布式或完全分布式即可,Hive安装过程如下: ①安装并启动Hadoop 在博主的其他博客中有安 ...

  7. python - 关于json和pickle两个序列化模块的区别

    传送门 https://stackoverflow.com/a/20980488/5955399 区别 json:用于字符串(unicode text)和python基本数据类型间进行转换.优点:跨语 ...

  8. color转成image对象

    .h //颜色转换成图片 + (UIImage *)imageFromColor:(UIColor *)color; .m //颜色转换成图片 + (UIImage *)imageFromColor: ...

  9. python 基础之深浅拷贝

    深浅拷贝 s=[[1,2],'fgfgf','cx'] s3=s.copy() print(s) print(s3) 测试 D:\python\python.exe D:/untitled/dir/f ...

  10. 进程fork

    fork用于父进程创建一个子进程 返回两次 返回-1表示错误 父进程中返回创建子进程的ID,大于0 返回0是表示进入子进程 创建的子进程会继承父进程的属性,比如打开的文件描述符.工作目录.根目录等等. ...