高级搜索|网站地图|TAG标签RSS订阅[设为首页] [加入收藏]

电脑爱好者之家

搜索

热门标签:

当前位置: 主页 > 开发资料 > 网页设计教程 > CSS样式表 >

精通CSS.DIV网页样式与布局——表格与表单样式

时间:2012-10-10 18:27来源:网络 作者:yi_zz 点击: 次
表格和表单是网页中非常重要的两个元素，我们这次来说说CSS如何设置表格和表单样式。我们先来看看CSS如何控制表格。 首先表格中的标记：我们看一下代码： [html] view plain copy print ? html head title 年度收入 / title style !-- table{ caption-side:b

表格和表单是网页中非常重要的两个元素，我们这次来说说CSS如何设置表格和表单样式。我们先来看看CSS如何控制表格。

首先表格中的标记：我们看一下代码：

 

[html] view plaincopyprint?
  1. <html>  
  2. <head>  
  3. <title>年度收入</title>  
  4. <style>  
  5. <!--  
  6. table{  
  7.     caption-side:bottom;  
  8. }  
  9. -->  
  10. </style>  
  11.    </head>  
  12. <body>   
  13. <table summary="This table shows the yearly income for years 2004 through 2007" border="1">  
  14.     <caption>年度收入 2010 - 2012</caption>  
  15.     <tr>  
  16.         <th></th>  
  17.         <th scope="col">2004</th>  
  18.         <th scope="col">2005</th>  
  19.         <th scope="col">2006</th>  
  20.         <th scope="col">2007</th>  
  21.     </tr>  
  22.     <tr>  
  23.         <th scope="row">拨款</th>  
  24.         <td>11,980</td>  
  25.         <td>12,650</td>  
  26.         <td>9,700</td>  
  27.         <td>10,600</td>  
  28.     </tr>  
  29.     <tr>  
  30.         <th scope="row">捐款</th>  
  31.         <td>4,780</td>  
  32.         <td>4,989</td>  
  33.         <td>6,700</td>  
  34.         <td>6,590</td>  
  35.     </tr>  
  36.     <tr>  
  37.         <th scope="row">投资</th>  
  38.         <td>8,000</td>  
  39.         <td>8,100</td>  
  40.         <td>8,760</td>  
  41.         <td>8,490</td>  
  42.     </tr>  
  43.     <tr>  
  44.         <th scope="row">募捐</th>  
  45.         <td>3,200</td>  
  46.         <td>3,120</td>  
  47.         <td>3,700</td>  
  48.         <td>4,210</td>  
  49.     </tr>  
  50.     <tr>  
  51.         <th scope="row">销售</th>  
  52.         <td>28,400</td>  
  53.         <td>27,100</td>  
  54.         <td>27,950</td>  
  55.         <td>29,050</td>  
  56.     </tr>  
  57.     <tr>  
  58.         <th scope="row">杂费</th>  
  59.         <td>2,100</td>  
  60.         <td>1,900</td>  
  61.         <td>1,300</td>  
  62.         <td>1,760</td>  
  63.     </tr>  
  64.     <tr>  
  65.         <th scope="row">总计</th>  
  66.         <td>58,460</td>  
  67.         <td>57,859</td>  
  68.         <td>58,110</td>  
  69.         <td>60,700</td>  
  70.     </tr>  
  71. </table>  
  72. </body>  
  73. </html>  


这是一个年度输入的表格，正文部分首先是一个table标记开始表示的是整个表格，一个caption表示的一个表格的标题，tr表示一个表格的行，而th表示的是一个表格的比较重要的第一行，后面th表示表格的竖着的比较重要的那个行，td表格一个一个的单元格，我们看一下效果，便明白。

这些标记：tr、th、td都是组成表格不可缺少的元素。

刚才的表格非常淡雅，我们仅仅只是为了表示表格的标记，那么CSS是如何控制表格的颜色的呢：我们看一下代码

 

[html] view plaincopyprint?
  1. <html>  
  2. <head>  
  3. <title>年度收入</title>  
  4. <style>  
  5. <!--  
  6. body{  
  7.   
  8.     background-color:#ebf5ff;   /* 页面背景色 */  
  9.     margin:0px; padding:4px;  
  10.     text-align:center;          /* 居中对齐（IE有效） */  
  11. }  
  12. .datalist{  
  13.     color:#0046a6;              /* 表格文字颜色 */  
  14.     background-color:#d2e8ff;   /* 表格背景色 */  
  15.     font-family:Arial;          /* 表格字体 */  
  16. }  
  17. .datalist caption{  
  18.     font-size:18px;             /* 标题文字大小 */  
  19.     font-weight:bold;           /* 标题文字粗体 */  
  20. }  
  21. .datalist th{  
  22.     color:#003e7e;              /* 行、列名称颜色 */  
  23.     background-color:#7bb3ff;   /* 行、列名称的背景色 */  
  24. }  
  25. -->  
  26. </style>  
  27.    </head>  
  28. <body>   
  29. <table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist">  
  30.     <caption>年度收入 2008 - 2011</caption>  
  31.     <tr>  
  32.         <th></th>  
  33.         <th scope="col">2008</th>  
  34.         <th scope="col">2009</th>  
  35.         <th scope="col">2010</th>  
  36.         <th scope="col">2011</th>  
  37.     </tr>  
  38.     <tr>  
  39.         <th scope="row">拨款</th>  
  40.         <td>11,980</td>  
  41.         <td>12,650</td>  
  42.         <td>9,700</td>  
  43.         <td>10,600</td>  
  44.     </tr>  
  45.     <tr>  
  46.         <th scope="row">捐款</th>  
  47.         <td>4,780</td>  
  48.         <td>4,989</td>  
  49.         <td>6,700</td>  
  50.         <td>6,590</td>  
  51.     </tr>  
  52.     <tr>  
  53.         <th scope="row">投资</th>  
  54.         <td>8,000</td>  
  55.         <td>8,100</td>  
  56.         <td>8,760</td>  
  57.         <td>8,490</td>  
  58.     </tr>  
  59.     <tr>  
  60.         <th scope="row">募捐</th>  
  61.         <td>3,200</td>  
  62.         <td>3,120</td>  
  63.         <td>3,700</td>  
  64.         <td>4,210</td>  
  65.     </tr>  
  66.     <tr>  
  67.         <th scope="row">销售</th>  
  68.         <td>28,400</td>  
  69.         <td>27,100</td>  
  70.         <td>27,950</td>  
  71.         <td>29,050</td>  
  72.     </tr>  
  73.     <tr>  
  74.         <th scope="row">杂费</th>  
  75.         <td>2,100</td>  
  76.         <td>1,900</td>  
  77.         <td>1,300</td>  
  78.         <td>1,760</td>  
  79.     </tr>  
  80.     <tr>  
  81.         <th scope="row">总计</th>  
  82.         <td>58,460</td>  
  83.         <td>57,859</td>  
  84.         <td>58,110</td>  
  85.         <td>60,700</td>  
  86.     </tr>  
  87. </table>  
  88. </body>  
  89. </html>  

在table这里用一个class=“datalist”来将整个表格的CSS定义出来，body设置了背景颜色以及对齐方式；dataList设置了表格文字颜色、表格背景色以及表格字体；datalist caption设置了标题……我们看一下效果：

对于大量的数据，表格有非常多的行和非常多的列，如果表格的每一行都采用相同的颜色，对于长期面对显示器的人来说，是经常找不到数据的。而隔行变色就能解决这个问题，我们看这个效果：

下面我们看隔行表示显示的代码：

 

正文部分把奇数行和偶数行都写上了。属性值大家自己看，这里不再一一介绍了，值得一提的是这里的altrow,如果设置了这个的属性，那么他将覆盖他父亲的颜色，而是用自己的颜色，这就实现了隔行变色的效果。
那么接下来我们再看看CSS是如何控制表单的呢：代码

<html>
<head>
<title>表单</title>
<style>
<!--
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;
}
textarea {
	width: 200px;
	height: 40px;
	color: #00008B;
	background-color: #ADD8E6;
	border: 1px solid #00008B;
}
-->
</style>
   </head>
<body>
<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>
</body>
</html>

 

正文部分是一个表单，他以form标志开始，其中里边有输入框，有下拉菜单，有单选项，有复选框，有文字的输入框，有按钮，我们看显示的效果：

在CSS中的代码大家自己理解，和之前讲的都是一样的。

我们接下来看像文字一样的按钮

我们先看一下效果：

下面我们看一下代码是如何达到这个效果的，

 

<html>
<head>
<title>像文字一样的按钮</title>
<style>
<!--
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;							/* 边框取消 */
}
-->
</style>
   </head>
<body>
<form method="post">
	请输入您的信息: <input type="text" name="name" id="name" class="txt">
	<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">
</form>
</body>
</html>

 

其实我们的border-bottom设置为1px，其他的border-top、border-left、border-right边框都设置为了0.然后设置一个颜色和背景色就实现了这个按钮。而这个按钮，我们讲四个边框都设置为0，而背景色设置为透明来实现像文字一样的按钮；通过这个我们可以看到，巧妙的使用CSS，能达到许多意想不到的效果。

Excel表格是在office软件中非常受大家欢迎的一个软件，而在网页中我们来模拟。我们先看看这个显示效果：

我们可以像在office里边的excel一样随意的输入东西，而不再有繁琐的什么输入框。下面我们来看一下这个代码：

 

<html>
<head>
<title>直接输入的Excel表格</title>
<style>
<!--
table.formdata{
	border:1px solid #5F6F7E;
	border-collapse:collapse;
	font-family:Arial;
}
table.formdata caption{
	text-align:left;
	padding-bottom:6px;
}
table.formdata th{
	border:1px solid #5F6F7E;
	background-color:#E2E2E2;
	color:#000000px;
	text-align:left;
	font-weight:normal;
	padding:2px 8px 2px 6px;
	margin:0px;
}
table.formdata td{
	margin:0px;
	padding:0px;
	border:1px solid #ABABAB;	/* 单元格边框 */
}
table.formdata input{
	width:100px;
	padding:1px 3px 1px 3px;
	margin:0px;
	border:none;				/* 输入框不要边框 */
	font-family:Arial;
}
.btn{
	border:1px solid #0083f2;
	font-family:Arial;
}
-->
</style>
   </head>
<body>
<form method="post">
<table class="formdata">
<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">硬盘(Hard Disk)</th>
	<td><input type="text" name="harddisk2004" id="harddisk2004"></td>
	<td><input type="text" name="harddisk2005" id="harddisk2005"></td>
	<td><input type="text" name="harddisk2006" id="harddisk2006"></td>
	<td><input type="text" name="harddisk2007" id="harddisk2007"></td>
</tr>
<tr>
	<th scope="row">主板(Mainboard)</th>
	<td><input type="text" name="mainboard2004" id="mainboard2004"></td>
	<td><input type="text" name="mainboard2005" id="mainboard2005"></td>
	<td><input type="text" name="mainboard2006" id="mainboard2006"></td>
	<td><input type="text" name="mainboard2007" id="mainboard2007"></td>
</tr>
<tr>
	<th scope="row">内存条(Memory Disk)</th>
	<td><input type="text" name="memory2004" id="memory2004"></td>
	<td><input type="text" name="memory2005" id="memory2005"></td>
	<td><input type="text" name="memory2006" id="memory2006"></td>
	<td><input type="text" name="memory2007" id="memory2007"></td>
</tr>
<tr>
	<th scope="row">机箱(Case)</th>
	<td><input type="text" name="case2004" id="case2004"></td>
	<td><input type="text" name="case2005" id="case2005"></td>
	<td><input type="text" name="case2006" id="case2006"></td>
	<td><input type="text" name="case2007" id="case2007"></td>
</tr>
<tr>
<th scope="row">电源(Power)</th>
	<td><input type="text" name="power2004" id="power2004"></td>
	<td><input type="text" name="power2005" id="power2005"></td>
	<td><input type="text" name="power2006" id="power2006"></td>
	<td><input type="text" name="power2007" id="power2007"></td>
</tr>
<tr>
	<th scope="row">CPU风扇(CPU Fan)</th>
	<td><input type="text" name="cpufan2004" id="cpufan2004"></td>
	<td><input type="text" name="cpufan2005" id="cpufan2005"></td>
	<td><input type="text" name="cpufan2006" id="cpufan2006"></td>
	<td><input type="text" name="cpufan2007" id="cpufan2007"></td>
</tr>
<tr>
<th scope="row">总计(Total)</th>
	<td><input type="text" name="total2004" id="total2004"></td>
	<td><input type="text" name="total2005" id="total2005"></td>
	<td><input type="text" name="total2006" id="total2006"></td>
	<td><input type="text" name="total2007" id="total2007"></td>
</tr>
</table>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value="Reset All" class="btn"></p>
</form>
</body>
</html>

 

我们说说是如何实现这个效果的思路，首先正文部分是用一个表格来进行搭建，而将表单嵌套在表格里边，每一项都设置一个id，一个name。最后是一个按钮；我们看CSS代码，在表格中，我们将td单元格他的边框设置，而对于input这个文本框，我们将他的border设置为none，那么这样所实现的效果就是输入的边框被取消掉了，而真正取而代之的是表格的边框，从而实现了这么一个小技巧。通过这个实例，我们可以看到，巧妙的设置CSS，能达到很多你意想不到的效果。

(责任编辑：熊猫蜀黍)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
最新评论 进入详细评论页>>
栏目列表
推荐内容
热点内容

Powered by DedeCMS_V57_GBK_SP2 © 2004-2017 DesDev Inc.

Copyright © 2002-2011 ChinaMBS.com 版权所有 Power by DedeCms  蜀ICP备05002197号-5