プロジェクト: (フロントエンド部分) 黄石港区のさまざまなコミュニティの人数をカウントするためのナビゲーションディレクトリテーブルを作成する_html/css

1. テーブルのスタイルをデザインする

目標: テーブルの幅、フォント、背景色などを定義します。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>黄石港区各类人数统计</title> 6     <style type="text/css"> 7         table.hovertable { 8             font-family: verdana,arial,sans-serif; 9             font-size:11px;10             color:#333333;11             border-width: 1px;12             border-color: #999999;13             border-collapse: collapse;14         }15         table.hovertable th {16             background-color:#c3dde0;17             border-width: 1px;18             padding: 8px;19             border-style: solid;20             border-color: #a9c6c9;21         }22         table.hovertable tr {23             background-color:#d4e3e5;24         }25         table.hovertable td {26             border-width: 1px;27             padding: 8px;28             border-style: solid;29             border-color: #a9c6c9;30         }31     </style>32 </head>

ログイン後にコピー

知識の拡張:
1. font-family:

CSS では、font-family はページフォントを定義するために使用され、通常 3 ～ 4 が定義されます (例: font-family: verdana、arial、helvetica、サンセリフ ; ）。最初のものが最も優先されます。このようにして、Web ページにアクセスするコンピュータに定義した最初のフォントがインストールされていない場合は、2 番目のフォントが使用され、以下同様になります。どちらも見つからない場合は、ブラウザのデフォルトフォントを使用して Web ページが表示されます。一般的に推奨されるフォント: Heilongjiang、Songti、Microsoft Yahei、Arial、Helvetica、sans-serif。

2. HTML5 テーブルの使用:

Table

Description

テーブルの本体を定義しますテーブルのフッターを定義するテーブルの列属性を定義する


Def初期化テーブル

テーブルのタイトルを定義します
		テーブルのヘッダーを定義します

の行を定義しますテーブル
< ;td>	テーブルのセルを定義します

テーブルのヘッダーを定義します

3. CSS ボーダースタイルプロパティ:

4つのボーダーのスタイルを設定します

最も予測不可能な境界線スタイルは二重です。これは、2 つの線の幅に、border-width 値に等しい 2 つの線の間のスペースを加えたものとして定義されます。ただし、CSS 仕様では、一方の線が他方の線よりも太いのか、両方の線が同じ太さであるべきなのか、また、線の間のスペースが線よりも太いのかどうかについては規定されていません。これらはすべてユーザーエージェントによって決定され、クリエイティブはこの決定に影響を与えません。

4. border-collapse: Collapse:

テーブルのマージされたボーダーモデルを設定します

2. テーブルの効果をデザインします

目標: マウスを特定の場所に移動したときに、テーブルのヘッダーを太字にします。行を選択すると、その行の色が変更され、マウスを離すと元の色に戻ります。

 1 <body bgcolor="#9999FF"> 2     <div class="head"> 3         <hr /> 4         <h1 align="center" >黄石港区各类人数统计</h1> 5         <hr /> 6     </div> 7     <div class="center"> 8         <table class="hovertable"> 9             <tr>10                 <th>社区</th><th>民主党派</th><th>无党派</th><th>党外知识分子</th><th>宗教人士</th><th>少数民族流动人口</th>11                 <th>少数民族常住人口</th><th>非公有制经济人士</th><th>新的社会阶层人士</th><th>出国和归国留学人员</th><th>港澳同胞（家属）</th>12                 <th>台湾同胞（家属）</th><th>华侨/归侨/侨眷</th>13             </tr>14             <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">15                 <td><a href="#">江北社区</a></td><td></td><td></td><td></td><td></td>16                 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>17             </tr>18             <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">19                 <td><a href="#">天方社区</a></td><td></td><td></td><td></td><td></td><td></td>20                 <td></td><td></td><td></td><td></td><td></td><td></td><td></td>21             </tr>22             <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">23                 <td><a href="#">天虹社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>24                 <td></td><td></td><td></td><td></td><td></td><td></td>25             </tr>26             <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">27                 <td><a href="#">大码头社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>28                 <td></td><td></td><td></td><td></td><td></td><td></td>29             </tr>30             <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">31                 <td><a href="#">老虎头社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>32                 <td></td><td></td><td></td><td></td><td></td><td></td>33             </tr>34             <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">35                 <td><a href="#">锁前社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>36                 <td></td><td></td><td></td><td></td><td></td><td></td>37             </tr>38             <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">39                 <td><a href="#">花湖社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>40                 <td></td><td></td><td></td><td></td><td></td><td></td>41             </tr>42         </table>43     </div>44 </body>45 </html>

ログイン後にコピー

知識の拡張:

1. JavaScript の onmouseover および onmouseout イベント:

onmouseover は、ユーザーがマウスを要素内に移動したときにトリガーされるイベントです。そしてonmouseoverで呼び出される関数を実行します。

onmouseout ユーザーがマウスを要素から遠ざけるとトリガーされるイベント。そしてonmouseoutという関数を実行します。

次の 2 つのイベントを使用して、HTML の背景色または背景画像を変更できます。例:

(1) 画像間で変換するには、onmouseout onmouseover を使用します:

1 <imagesrc="img1"onmouseover="this.src='img2'"onmouseout="this.src='img1'">

ログイン後にコピー

(2) onmouseover onmouseout を変更するにはテキストの背景色:

1 <div width="100" height="100" onmouseover="style.backgroundColor='#fff'"2 onmouseout="style.backgroundColor='#bbb'" bgcolor="#bbb">文字</div>

ログイン後にコピー

(3) onmouseover onmouseout テキストを背景画像に変更:

1 <div width="100" height="100" onMouseOver="this.background='1.gif'"2 onMouseOut="this.background='2.gif'" background="2.gif">文字</div>3 <image src="img1" onmouseover="this.src='img2'" onmouseout="this.src='img1'">

ログイン後にコピー

3. エフェクトを完成します

2. マウスを置くと効果: