精通CSS高級Web標準解決方案讀書筆記-07對表單和數據表格應用樣式

1. 簡單的表格樣式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Calendar Table | Chapter 7 | CSS Mastery </title>
</head>
<style type="text/css">
<!--

body {
    font-family: "myriad pro", arial, helvetica, sans-serif;
  font-size:16px;
  line-height:1.125em; /* Baseline grid of 18px */
}


/* tables may still need 'cellspacing="0"' in the markup */
table.cal {
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    border-bottom: 1px solid #666;
}

.cal caption {
    font-size:1.3em;
    padding-top: 0.692em; /* 9px */
    padding-bottom: 0.692em; /* 9px */
}


.cal thead th {
    border-top: 3px solid #666;
    border-bottom: 3px solid #666;
    padding-top: 0.692em; /* 9px */
    padding-bottom: 0.692em; /* 9px */
}



/* @group Header */
    
.cal caption a:link,
.cal caption a:visited,
.cal caption a:hover,
.cal caption a:active,
.cal caption a:focus {
    background-color: #CCC;
    text-decoration: none;
    color: black;
    padding: 0 0.2em;
}

.cal caption a:hover,
.cal caption a:active,
.cal .caption a:focus {
    background-color: blue;
    color: white;
}
    
/* @end */
    
/* @group Days */
    
.cal tbody {
    color: #999;
}

.cal tbody a:link,
.cal tbody a:visited,
.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active {
    display: block;
    text-decoration: none;
    color: black;
    font-weight: bold;
    padding: 0.385em 0.692em 0.308em 0.692em; /* 5px 9px 4px 9px */
}

.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active {
    /*outline: 1px solid #ccc;*/
    background-color: #CCC;
    color: black;
}

.cal tbody .selected a:link,
.cal tbody .selected a:visited,
.cal tbody  .selecteda:hover,
.cal tbody  .selected a:focus,
.cal tbody .selected a:active {
    background-color: blue;
    color: white;
}

    /* @end */



-->
</style>
</head>

<body>

<table class="cal" summary="A calandar style date picker">
<caption>
    <a href="#" class="prev"><</a> January 2008 <a href="#" class="next">></a>
</caption>
<colgroup>
  <col id="sun" />
  <col id="mon" />
  <col id="tue" />
  <col id="wed" />
  <col id="thur" />
  <col id="fri" />
  <col id="sat" />
</colgroup>

<thead>
    <tr>
        <th scope="col">S</th>
        <th scope="col">M</th>
        <th scope="col">T</th>
        <th scope="col">W</th>
        <th scope="col">T</th>
        <th scope="col">F</th>
        <th scope="col">S</th>
    </tr>
</thead>

    <tbody>
        <tr>
            <td>30</td>
            <td>31</td>
            <td><a href="#">1</a></td>
            <td><a href="#">2</a></td>
            <td><a href="#">3</a></td>
            <td><a href="#">4</a></td>
            <td><a href="#">5</a></td>
        </tr>
        <tr>
            <td><a href="#">6</a></td>
            <td><a href="#">7</a></td>
            <td class="selected"><a href="#">8</a></td>
            <td><a href="#">9</a></td>
            <td><a href="#">10</a></td>
            <td><a href="#">11</a></td>
            <td><a href="#">12</a></td>
        </tr>
        <tr>
            <td><a href="#">13</a></td>
            <td><a href="#">14</a></td>
            <td><a href="#">15</a></td>
            <td><a href="#">16</a></td>
            <td><a href="#">17</a></td>
            <td><a href="#">18</a></td>
            <td><a href="#">19</a></td>
        </tr>
        <tr>
            <td><a href="#">20</a></td>
            <td><a href="#">21</a></td>
            <td><a href="#">22</a></td>
            <td><a href="#">23</a></td>
            <td><a href="#">24</a></td>
            <td><a href="#">25</a></td>
            <td><a href="#">26</a></td>
        </tr>
        <tr>
            <td><a href="#">27</a></td>
            <td><a href="#">28</a></td>
            <td><a href="#">29</a></td>
            <td><a href="#">30</a></td>
            <td><a href="#">31</a></td>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

</body>
</html>

表格專有元素
caption(標題)，thead,tbody,tfooter,col,colgroup

2.簡單的表單樣式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Form</title>
<style type="text/css">
<!--

body {
    font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}

form {
  font-size: 1.4em;
    width: 30em;
}


/* fieldset styling */
fieldset {
    margin: 1em 0; /*  space out the fieldsets a little*/
    padding: 1em;
    border : 1px solid #ccc;
}

/* legend styling */
legend {
    font-weight: bold;
}

form div {
    padding: 0.4em 0;
}


/* style for  labels */
label {
    display: block;
}

/* style for required labels */
label .required {
    font-size: 0.75em;
    color:#760000;
}

input {
  width: 20em;
}

textarea {
    width: 100%;
    height: 10em;
}

input.radio, input.submit {
  width: auto;
}

#remember-me .radio {
    margin-right: 1em;
}

/* style form elements on focus */
input[type="text"]:focus, textarea:focus {
    background: #ffc;
}

-->
</style>
</head>

<body>

<form id="comments_form" action="#" method="post">

<fieldset>
    <legend>Your Contact Details</legend>
    <div>
    <label for="author">Name: <em class="required">(Required)</em></label>
    <input name="author" id="author" type="text" />
    </div>
    
    <div>
    <label for="email">Email Address:</label>
    <input name="email" id="email" type="text" />
    </div>
    
    <div>
    <label for="url">Web Address:</label>
    <input name="url" id="url" type="text" />
    </div>
</fieldset>

<fieldset>
    <legend>Comments</legend>
    <div>
    <label for="text">Message: <em class="required">(Required)</em></label>
    <textarea name="text" id="text" cols="20" rows="10"></textarea>
    </div>
</fieldset>

<fieldset id="remember-me">
    <legend>Remember Me</legend>
        <div>
        <label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
        </div>
        
        <div>
        <label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
        </div>
        
</fieldset>

<div>
<input id="submit" class="submit" name="submit" type="submit"/>
</div>


</form>
</body>
</html>

基本格式<div><label></label></div>
label應用樣式display：block；可以實現垂直排列
應用以下樣式可以實現水平排列（label沒有block）

label{
 float:left;
 width:10em;
 cursor:pointer;
}

fieldset,legend

3.復雜的表單樣式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Advanced Form</title>
<style type="text/css">
<!--

body {
    font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}

.clear {
  clear: both;
}

form {
  font-size: 1.4em;
    width: 45em;
}

/* fieldset styling */
fieldset {
    margin: 1em 0; /*  space out the fieldsets a little*/
    padding: 1em;
    border : 1px solid #ccc;
    background-color:#F5F5F5
}

/* legend styling */
legend {
    font-weight: bold;
}

form div {
  position: relative;
    width: 100%;
    padding: 0.4em 0;
    clear: both;
}

/* style for  labels */
label {
    float: left;
    clear: left;
    width: 10em;
}

/* style for required labels */
label .required {
    font-size: 0.83em;
    color:#760000;
}

/* style error messages */
label .feedback {
    position: absolute;
    left: 31em;
  right: 0;
    top: 0.5em;
    font-weight: bold;
    color:#760000;
    padding-left: 20px;
    background: url(img/error.png) no-repeat left top;
}

/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback{
  width: 10em;
}

input {
  width: 20em;
    font-size: inherit;
}

input[type="text"], textarea {
    border-top: 2px solid #999;
    border-left: 2px solid #999;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

input.radio, input.checkbox, input.submit {
  width: auto;
}

/* style form elements on focus */
input:focus, textarea:focus {
    background: #ffc;
}


textarea {
    width: 100%;
    height: 10em;
}

/* Date of Birth form styling */

#monthOfBirthLabel, #yearOfBirthLabel {
  text-indent: -1000em;
    width: 0;
}

#dateOfBirth {
  width: 3em;
    margin-right: 0.5em;
}

#monthOfBirth {
  width: 10em;
    margin-right: 0.5em;
}

#yearOfBirth {
  width: 5em;
}

/* Color form styling */
#favoriteColor {
  margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

#favoriteColor h2 {
  width: 10em;
    float: left;
    font-size: 1em;
    font-weight: normal;
}

#favoriteColor .col {
  width: 8em;
    float: left;
    clear: none;
}

#favoriteColor label {
    float: none;
}

#remember-me .radio {
    margin-right: 1em;
}

/* Button styling */

button {
  width: 200px;
  height: 50px;
  border: 1px solid #989898;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
   background: url(img/button-bg.png) #c5e063 bottom left repeat-x;
  -moz-box-shadow: 2px 2px 2px #ccc;
  -webkit-box-shadow: 2px 2px 2px #ccc;
  box-shadow: 2px 2px 2px #ccc;
   color: #fff;
   font-size: 26px;
   font-weight: bold;
   text-shadow: 1px 1px 1px #666;
}

-->
</style>
</head>

<body>

<form id="comments_form" action="#" method="post">

<fieldset>
    <legend>Your Contact Details</legend>
    <div>
    <label for="author">Name: <em class="required">(Required)</em></label>
    <input name="author" id="author" type="text" />
    </div>
    
    <div>
    <label for="email">Email Address is really, really, really really long: <em class="feedback">Incorrect email address. Please try again.</em></label>
    <input name="email" id="email" type="text" />
    </div>
    
    <div>
    <label for="url">Web Address:</label>
    <input name="url" id="url" type="text" />
    </div>
</fieldset>

<fieldset>
    <legend>Personal Information</legend>
    
    <div>
    <label for="author">Place of Birth: </label>
    <select>
  <option value="USA" selected="selected">USA</option>
  <option value="UK">United Kingdom</option>
  </select>
    </div>
    
    <div>
    <label for="dateOfBirth">Date of Birth:</label>
  <input name="dateOfBirth" id="dateOfBirth" type="text"  />
    
  <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
  <select name="monthOfBirth" id="monthOfBirth">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  </select>
    
  <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
  <input name="yearOfBirth" id="yearOfBirth" type="text" />
    </div>
    
    <fieldset id="favoriteColor">
    <h2>Favorite Color:</h2>
    
    <div class="col">
    <div>
    <label><input class="checkbox" id="red" name="red" type="checkbox" value="red" />red</label>
    </div>
    
    <div>
    <label><input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" />yellow</label>
    </div>
    
    <div>
    <label><input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" />pink</label>
    </div>
    
    <div>
    <label><input class="checkbox" id="green" name="green" type="checkbox" value="green" />green</label>
    </div>
  </div>
    
    <div class="col">
    <div>
    <label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />orange</label>
    </div>
    
    <div>
    <label><input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" />purple</label>
    </div>
    
    <div>
    <label><input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" />blue</label>
    </div>
    
    <div>
    <label><input class="checkbox" id="other" name="other" type="checkbox" value="other" />other</label>
    </div>  
  </div>
    </fieldset>
    

    
</fieldset>

<fieldset>
    <legend>Comments</legend>
    <div>
    <label for="text">Message: <em class="required">(Required)</em></label>
    <textarea name="text" id="text" cols="20" rows="10"></textarea>
    </div>
</fieldset>

<fieldset id="remember-me">
    <legend>Remember Me</legend>
        <div>
        <label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
        </div>
        
        <div>
        <label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
        </div>
        
</fieldset>

<div>
<button type="submit">Book Now ?</button>
</div>

</form>
</body>
</html>

效果

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Bootstrap是什么？ 一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,917評論 3贊 184
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1贊 92
  • 每天一句: 如果你不能打敗對手，那你就加入對手。 一、表單高級 表單字段集 字段級標題 上傳文件框 require...
    EndEvent閱讀 689評論 0贊 0
  • HTML標簽解釋大全 一、HTML標記 標簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,301評論 1贊 41
  • 一座小城，一個小家，在一份普通的工資崗位上奮斗8年，工資增長了300元。你以為我今天要講一個悲傷的故事嗎？不，普通...
    小鹿青青閱讀 259評論 0贊 1