CSS+DIV Web ページのスタイルとレイアウト設定フォームと tables_html/css_WEB-ITnose に精通している

单 表 フォームとフォームは Web ページの 2 つの非常に重要な要素です。 前回のブログでは CSS ページの背景設定について簡単に紹介しましたが、今日は引き続き CSS の設定方法について説明します。私たちの CSS 表格和表单、首先、来看一张思维导図、通过图简单的预览一下该博文主讲解哪これらCSSの基底知識识：

首先我们的第一表格中の标记、代コードおよび行效結果如下示:

re re re re re re re ： ： ： ： ： ： ： :

これは、まず、全体を表す表マークから始まります。 table、CAPTION で表されるテーブルのタイトル、TR はテーブルの行を表し、th はテーブルのより重要な最初の行を表し、th はテーブルのより重要な垂直行を表します。セルを 1 つずつ追加すると、動作効果は上図のようになります。これらのタグ: tr、th、td はすべてテーブルを構成する必須の要素です。先ほどのテーブルは非常にエレガントです。では、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>

実行中の効果は次のとおりです:

上記のコードを分析すると、テーブルで CSS を定義するために class="datalist" が使用されていることがわかります。表全体の本文は背景色と配置を設定し、dataList は表のテキストの色、表の背景色、表のフォントを設定します。大量のデータについては、上記の効果がわかります。テーブルの行が多すぎると、テーブルの各行に同じ色が使用され、データを見つけるのが不便になります。代替ラインの色を変更すると、次のコードを確認します他の色を覆い、独自の色を使用することで、色が交互になる効果が得られます。それでは、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>

実行効果は次のとおりです。

上記の例を分析すると、フォームマークで始まり、入力があります。内部にはラジオ オプション、チェック ボックス、テキスト入力ボックス、ボタンがあります。 実行中のエフェクトは上の図のとおりです。 テキストのように見えるボタンを見てみましょう。コード例と実行効果:

<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>

Run 効果は次のとおりです:

上記の例では、border-bottom を 1px に設定し、もう 1 つの border-top、border- を分析します。左と右の境界線はすべて 0 に設定されます。次に、色と背景色を設定して、テキストのようなボタンを実現します。このボタンでは、4 つの境界線をすべて 0 に設定し、背景色を透明に設定してテキストのようなボタンを実現しました。これにより、CSS を賢く使用することで多くの驚きがもたらされることがわかります。オフィスソフトの中でも人気の高いExcelスプレッドシートをWebページ上でシミュレーションしてみます。 CSS では、煩雑な入力ボックスを必要とせず、オフィスの Excel と同じように自由に入力できます。サンプルコードと実行効果を見てみましょう:

<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>

実行効果は次のとおりです:

： 语 寄 寄: このブログ投稿は主に CSS でフォ​​ームとフォーム スタイルを設定する方法に関する関連する知識ポイントをまとめたもので、表内のマーク、表内の色、インターレース行などの 6 つの小さな知識を主に説明しています。色、フォーム内の要素、テキスト ボタンを変更するための小さなテストとして、Office を模倣して編集可能な Excel テーブルを作成するという小さな例があります。まず、Office で Excel を模倣して編集可能なテーブルを作成します。テキスト部分 テーブルで構築されており、テーブル内にフォームが入れ子になっており、各項目にIDと名前が設定されています。最後にボタンがあります。CSS コードを見てみましょう。表では td セルの境界線を設定し、入力テキスト ボックスの境界線をなしに設定しているため、得られる効果は入力境界線です。をキャンセルしてテーブルの枠線に置き換えるという、ちょっとした工夫が実現しました。この例を通して、CSS を賢く設定すると、多くの予期せぬ効果が得られることがわかります。 BSの勉強、続きます...