Heim  >  Artikel  >  Web-Frontend  >  精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose

精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:141564Durchsuche

        表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预览一下该博文主要讲解哪些CSS的基础知识:

         

        首先我们的首先表格中的标记,代码和运行效果如下所示:

        

<span style="font-size:18px;"><title>年度收入</title>
<style><!--table{	caption-side:bottom;}--></style>    <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>	<tr>		<th scope="row">捐款</th>		<td>4,780</td>		<td>4,989</td>		<td>6,700</td>		<td>6,590</td>	</tr>	<tr>		<th scope="row">投资</th>		<td>8,000</td>		<td>8,100</td>		<td>8,760</td>		<td>8,490</td>	</tr>	<tr>		<th scope="row">募捐</th>		<td>3,200</td>		<td>3,120</td>		<td>3,700</td>		<td>4,210</td>	</tr>	<tr>		<th scope="row">销售</th>		<td>28,400</td>		<td>27,100</td>		<td>27,950</td>		<td>29,050</td>	</tr>	<tr>		<th scope="row">杂费</th>		<td>2,100</td>		<td>1,900</td>		<td>1,300</td>		<td>1,760</td>	</tr>	<tr>		<th scope="row">总计</th>		<td>58,460</td>		<td>57,859</td>		<td>58,110</td>		<td>60,700</td>	</tr>
</table></span>
        运行效果如下所示:

         

         这是一个年度输入的表格,正文部分首先是一个table标记开始表示的是整个表格,一个caption表示的一个表格的标题,tr表示一个表格的行,而th表示的是一个表格的比较重要的第一行,后面th表示表格的竖着的比较重要的那个行,td表格一个一个的单元格,运行效果如上图所示。这些标记:tr、th、td都是组成表格不可缺少的元素。刚才的表格非常淡雅,我们仅仅只是为了表示表格的标记,那么CSS是如何控制表格的颜色的呢?看我们接下来的例子代码和运行效果:

       

<span style="font-size:18px;"><title>年度收入</title>
<style><!--body{	background-color:#ebf5ff;	/* 页面背景色 */	margin:0px; padding:4px;	text-align:center;			/* 居中对齐(IE有效) */}.datalist{	color:#0046a6;				/* 表格文字颜色 */	background-color:#d2e8ff;	/* 表格背景色 */	font-family:Arial;			/* 表格字体 */}.datalist caption{	font-size:18px;				/* 标题文字大小 */	font-weight:bold;			/* 标题文字粗体 */}.datalist th{	color:#003e7e;				/* 行、列名称颜色 */	background-color:#7bb3ff;	/* 行、列名称的背景色 */}--></style>    <table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist">	<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>	<tr>		<th scope="row">捐款</th>		<td>4,780</td>		<td>4,989</td>		<td>6,700</td>		<td>6,590</td>	</tr>	<tr>		<th scope="row">投资</th>		<td>8,000</td>		<td>8,100</td>		<td>8,760</td>		<td>8,490</td>	</tr>	<tr>		<th scope="row">募捐</th>		<td>3,200</td>		<td>3,120</td>		<td>3,700</td>		<td>4,210</td>	</tr>	<tr>		<th scope="row">销售</th>		<td>28,400</td>		<td>27,100</td>		<td>27,950</td>		<td>29,050</td>	</tr>	<tr>		<th scope="row">杂费</th>		<td>2,100</td>		<td>1,900</td>		<td>1,300</td>		<td>1,760</td>	</tr>	<tr>		<th scope="row">总计</th>		<td>58,460</td>		<td>57,859</td>		<td>58,110</td>		<td>60,700</td>	</tr>
</table></span>
         运行效果如下:

         

        分析上面的代码我们可以看出,在table这里用一个class=“datalist”来将整个表格的CSS定义出来,body设置了背景颜色以及对齐方式;dataList设置了表格文字颜色、表格背景色以及表格字体;datalist caption设置了标题,就看到了我们上述的效果,对于大量的数据,表格有非常多的行和非常多的列,如果表格的每一行都采用相同的颜色,不便于数据的查找。而隔行变色就能解决这个问题,看下面的例子代码和运行效果:

       

<span style="font-size:18px;"><title>Member List</title>
<style><!--.datalist{	border:1px solid #0058a3;	/* 表格边框 */	font-family:Arial;	border-collapse:collapse;	/* 边框重叠 */	background-color:#eaf5ff;	/* 表格背景色 */	font-size:14px;}.datalist caption{	padding-bottom:5px;	font:bold 1.4em;	text-align:left;}.datalist th{	border:1px solid #0058a3;	/* 行名称边框 */	background-color:#4bacff;	/* 行名称背景色 */	color:#FFFFFF;				/* 行名称颜色 */	font-weight:bold;	padding-top:4px; padding-bottom:4px;	padding-left:12px; padding-right:12px;	text-align:center;}.datalist td{	border:1px solid #0058a3;	/* 单元格边框 */	text-align:left;	padding-top:4px; padding-bottom:4px;	padding-left:10px; padding-right:10px;}.datalist tr.altrow{	background-color:#c7e5ff;	/* 隔行变色 */}--></style>    <table class="datalist" summary="list of members in EE Studay">	<caption>Member List</caption>	<tr>		<th scope="col">Name</th>		<th scope="col">Class</th>		<th scope="col">Birthday</th>		<th scope="col">Constellation</th>		<th scope="col">Mobile</th>	</tr>	<tr>					<!-- 奇数行 -->		<td>isaac</td>		<td>W13</td>		<td>Jun 24th</td>		<td>Cancer</td>		<td>1118159</td>	</tr>	<tr class="altrow">		<!-- 偶数行 -->		<td>girlwing</td>		<td>W210</td>		<td>Sep 16th</td>		<td>Virgo</td>		<td>1307994</td>	</tr>	<tr>					<!-- 奇数行 -->		<td>tastestory</td>		<td>W15</td>		<td>Nov 29th</td>		<td>Sagittarius</td>		<td>1095245</td>	</tr>	<tr class="altrow">		<!-- 偶数行 -->		<td>lovehate</td>		<td>W47</td>		<td>Sep 5th</td>		<td>Virgo</td>		<td>6098017</td>	</tr>	<tr>					<!-- 奇数行 -->		<td>slepox</td>		<td>W19</td>		<td>Nov 18th</td>		<td>Scorpio</td>		<td>0658635</td>	</tr>	<tr class="altrow">		<!-- 偶数行 -->		<td>smartlau</td>		<td>W19</td>		<td>Dec 30th</td>		<td>Capricorn</td>		<td>0006621</td>	</tr>	<tr>					<!-- 奇数行 -->		<td>whaler</td>		<td>W19</td>		<td>Jan 18th</td>		<td>Capricorn</td>		<td>1851918</td>	</tr>	<tr class="altrow">		<!-- 偶数行 -->		<td>shenhuanyan</td>		<td>W25</td>		<td>Jan 31th</td>		<td>Aquarius</td>		<td>0621827</td>	</tr>	<tr>					<!-- 奇数行 -->		<td>tuonene</td>		<td>W210</td>		<td>Nov 26th</td>		<td>Sagittarius</td>		<td>0091704</td>	</tr>	<tr class="altrow">		<!-- 偶数行 -->		<td>ArthurRivers</td>		<td>W91</td>		<td>Feb 26th</td>		<td>Pisces</td>		<td>0468357</td>	</tr>	<tr>					<!-- 奇数行 -->		<td>reconzansp</td>		<td>W09</td>		<td>Oct 13th</td>		<td>Libra</td>		<td>3643041</td>	</tr>	<tr class="altrow">		<!-- 偶数行 -->		<td>linear</td>		<td>W86</td>		<td>Aug 18th</td>		<td>Leo</td>		<td>6398341</td>	</tr>	<tr>					<!-- 奇数行 -->		<td>laopiao</td>		<td>W41</td>		<td>May 17th</td>		<td>Taurus</td>		<td>1254004</td>	</tr>	<tr class="altrow">		<!-- 偶数行 -->		<td>dovecho</td>		<td>W19</td>		<td>Dec 9th</td>		<td>Sagittarius</td>		<td>1892013</td>	</tr>	<tr>					<!-- 奇数行 -->		<td>shanghen</td>		<td>W42</td>		<td>May 24th</td>		<td>Gemini</td>		<td>1544254</td>	</tr>	<tr class="altrow">		<!-- 偶数行 -->		<td>venessawj</td>		<td>W45</td>		<td>Apr 1st</td>		<td>Aries</td>		<td>1523753</td>	</tr>	<tr>					<!-- 奇数行 -->		<td>lightyear</td>		<td>W311</td>		<td>Mar 23th</td>		<td>Aries</td>		<td>1002908</td>	</tr>
</table></span>
        运行效果如下:

        

        分析一下上面的代码,正文部分把奇数行和偶数行都写上了,属性值大家都可以看出来,值得一提的是这里的altrow,如果设置了这个的属性,那么他将覆盖其他颜色,而是用自己的颜色,这就实现了隔行变色的效果。那么接下来我们再看看CSS是如何控制表单的呢?例子代码和运行效果如下所示:

<span style="font-size:18px;"><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>   <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></span>
        运行效果如下所示:

        
        分析一下上面例子,正文部分是一个表单,他以form标志开始,其中里边有输入框,有下拉菜单,有单选项,有复选框,有文字的输入框,有按钮,运行效果如上图所示,我们接下来看像文字一样的按钮,我们来看一下例子代码和运行效果:

<span style="font-size:18px;"><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>   <form method="post">	请输入您的信息: <input type="text" name="name" id="name" class="txt">	<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">
</form></span>
        运行效果如下所示:

        

       分析一下上面的例子,在上面的例子中,我们把border-bottom设置为1px,其她的border-top、border-left、border-right边框都设置为了0.然后设置一个颜色和背景色就实现了像文字一样的按钮。而这个按钮,我们讲四个边框都设置为0,而背景色设置为透明来实现像文字一样的按钮;通过这个我们可以看到,巧妙的使用CSS,能带给我们很多惊喜。Excel表格是在office软件中非常受大家欢迎的一个软件,而在网页中我们来模拟。在我们的CSS中,我们可以像在office里边的excel一样随意的输入东西,而不再有繁琐的什么输入框。下面我们来看一下例子代码和运行效果:

<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>   
公司销售统计表 2004~2007
2004 2005 2006 2007
硬盘(Hard Disk)
主板(Mainboard)
内存条(Memory Disk)
机箱(Case)
电源(Power)
CPU风扇(CPU Fan)
总计(Total)

        运行效果如下所示:

        
       小编寄语:该博文,小编主要简单的总结了CSS中关于如何设置表格和表单样式的相关知识点,主要讲解了六个方面的小知识,包括表格中的标记,表格中的颜色,隔行变色,表单中的元素,文字按钮,小试牛刀也就是模仿office做了一个可以编写的Excel表格,其中有一个小例子,就是模仿office中的Excel做一个可以编辑的表格,首先正文部分是用一个表格来进行搭建,而将表单嵌套在表格里边,每一项都设置一个id,一个name。最后是一个按钮;我们看CSS代码,在表格中,我们将td单元格他的边框设置,而对于input这个文本框,我们将他的border设置为none,那么这样所实现的效果就是输入的边框被取消掉了,而真正取而代之的是表格的边框,从而实现了这么一个小技巧。通过这个实例,我们可以看到,巧妙的设置CSS,能达到很多你意想不到的效果。BS学习,未完待续......

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn