div+css (5)

 

                                                 设置表格和表单的样式

一、表格的标记

<table summary="This table shows the yearly income for years 2004 through 2007" border="1">

       <caption>年度收入 2004 - 2007</caption>

       <tr>

              <th></th>

              <th scope="col">2004</th>

              <th scope="col">2005</th>

              <th scope="col">2006</th>

              <th scope="col">2007</th>

       </tr>

       <tr>

              <th scope="row">拨款</th>

              <td>11,980</td>

              <td>12,650</td>

              <td>9,700</td>

              <td>10,600</td>

       </tr>

</table>

 

备注：tr 是行 而 td和th是列，第一行的列用th,每行的第一列也可以用th。

 

二、表格的颜色：

body{

       background-color:#ebf5ff;     /* 页面背景色 */

       margin:0px; padding:4px;

       text-align:center;                   /* 居中对齐（IE有效） */

}

.datalist{

       color:#0046a6;                            /* 表格文字颜色 */

       background-color:#d2e8ff;    /* 表格背景色 */

                         /* 表格字体 */

}

.datalist caption{

       font-size:18px;                            /* 标题文字大小 */

       font-weight:bold;                  /* 标题文字粗体 */

}

.datalist th{

       color:#003e7e;                            /* 行、列名称颜色 */

       background-color:#7bb3ff;    /* 行、列名称的背景色 */

}

 

只要表格在引用的时候标明 class=”datalist”就可以了。行和列会继承过去。

三、表格的边框

border:1px solid #429fff;       /* 表格边框 */

 

四、隔行变色：

.datalist tr.altrow{

       background-color:#c7e5ff;    /* 隔行变色 */

}

引用的时候

<tr class="altrow">              <!-- 偶数行 -->

 

五、CSS与表单

控制页面

form {

       border: 1px dotted #AAAAAA;

       padding: 3px 6px 3px 6px;

       margin:0px;

       font:14px Arial;

}

所有输入框

input {

       color: #00008B;

       background-color: #ADD8E6;

       border: 1px solid #00008B;

}

控制选择框

select {

       width: 80px;

       color: #00008B;

       background-color: #ADD8E6;

       border: 1px solid #00008B;

}

 

引用

<form method="post">

<p>请输入您的姓名:<br><input type="text" name="name" id="name"></p>

<p>请选择你最喜欢的颜色:<br>

<select name="color" id="color">

       <option value="red">红</option>

       <option value="green">绿</option>

       <option value="blue">蓝</option>

       <option value="yellow">黄</option>

       <option value="cyan">青</option>

       <option value="purple">紫</option>

</select></p>

<p>请问你的性别:<br>

       <input type="radio" name="sex" id="male" value="male">男<br>

       <input type="radio" name="sex" id="female" value="female">女</p>

<p>你喜欢做些什么:<br>

       <input type="checkbox" name="hobby" id="book" value="book">看书

       <input type="checkbox" name="hobby" id="net" value="net">上网

       <input type="checkbox" name="hobby" id="sleep" value="sleep">睡觉</p>

<p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>

<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p>

</form>

 

输入框和按钮的边框取消

CSS代码:

body{

       background-color:#daeeff;                   /* 页面背景色 */

}

form{

       margin:0px; padding:0px;

       font:14px;

}

input{

       font:14px Arial;

}

.txt{

       border-bottom:1px solid #005aa7; /* 下划线效果 */

       color:#005aa7;

       border-top:0px; border-left:0px;

       border-right:0px;

       background-color:transparent;             /* 背景色透明 */

}

.btn{

       background-color:transparent;             /* 背景色透明 */

       border:0px;                                               /* 边框取消 */

}

 

引用：

<form method="post">

       请输入您的信息: <input type="text" name="name" id="name" class="txt">

       <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">

</form>