1.構(gòu)建內(nèi)容豐富的網(wǎng)頁
本項目的任務(wù)是為“觀鳥網(wǎng)”的主頁添加結(jié)構(gòu)化的元素,使其可以進行布局設(shè)計。需要添加的有:
頁眉(<header>),應(yīng)充滿頁面寬度,并包含網(wǎng)站主標題、網(wǎng)站 logo 和導航欄菜單" />
時間:2023-09-29 08:00:02 | 來源:網(wǎng)站運營
時間:2023-09-29 08:00:02 來源:網(wǎng)站運營
HTML學習案例練習:<header>
),應(yīng)充滿頁面寬度,并包含網(wǎng)站主標題、網(wǎng)站 logo 和導航欄菜單。樣式生效后標題和 logo 應(yīng)顯示在在兩邊,導航欄在它們下方。<main>
),應(yīng)有兩欄,其中主區(qū)域顯示歡迎信息,側(cè)邊欄包含一些縮略圖。<footer>
),包含版權(quán)信息和鳴謝。<link>
元素把現(xiàn)成的 CSS 文件引入頁面。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>觀鳥網(wǎng)</title> <link href="https://fonts.googleapis.com/css?family=Long+Cang|Noto+Sans+SC:300" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> </head> <body><header> <h1>觀鳥網(wǎng)</h1> <img src="dove.png" alt="一張鴿子剪影圖片"></header><nav> <ul> <li><span>主頁</span></li> <li><a href="#">開始</a></li> <li><a href="#">圖片</a></li> <li><a href="#">設(shè)備</a></li> <li><a href="#">論壇</a></li> </ul></nav><main><article> <h2>歡迎</h2> <p>歡迎訪問觀鳥網(wǎng)虛擬站點。如果這是一個真實的網(wǎng)站,那么它就是觀鳥愛好者的理想聚集地。無論你是一名期望學習觀鳥知識的新手,還是一位希望分享體會、經(jīng)驗和圖片的觀鳥老手。</p> <p>時不我待!趕快帶齊裝備,關(guān)上電腦,去擁抱美麗的大自然吧!</p></article><aside> <h2>收藏照片</h2> <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="一只體型小巧的鳥,羽毛藍綠色,爪黑白相間,黑色的喙細且鋒利。點擊縮略圖查看完整照片。"></a> <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="一只美麗的孔雀的上半身圖片,它的頸上覆蓋藍色的羽毛,有淺色的喙和藍色的冠。點擊縮略圖查看完整照片。"></a> <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="一只大鳥的上半身圖片,羽毛白色,淺色的喙細長而彎曲。點擊縮略圖查看完整照片。"></a> <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="一只成年鵜鶘,羽毛大多為白色,背部和腹部有少許黑色羽毛,又長又直的喙呈黃色,喙的下方有一個喉囊可以暫時儲存食物。點擊縮略圖查看完整照片。"></a></aside></main><footer> <p>本虛擬站點遵守 CC0 協(xié)議,所有內(nèi)容均可任意修改和復(fù)用。原始版本由 Chris Mills 于 2016 年編寫。Roy Tian 于 2019 年漢化。</p> <p><a href="http://game-icons.net/lorc/originals/dove.html">鴿子圖標</a> 由 Lorc 繪制。</p></footer></body></html>
由于文章字數(shù)有限,所以不添加到該文章中。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title >太陽系行星數(shù)據(jù)</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>太陽系行星數(shù)據(jù)</h1><table><caption>太陽系中行星的一些數(shù)據(jù)。(資料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">NASA 行星數(shù)據(jù) - 公制</a>,圖片取自<a href="https://www.nasa.gov/multimedia/imagegallery/">NASA 照片庫</a>。)</caption> <colgroup> <col span="2"> <col style="border: 2px solid black"> <col span="10"> </colgroup> <thead> <tr> <th colspan="2"> </th> <th>名字</th> <th>質(zhì)量 (10<sup>24</sup>kg)</th> <th>直徑 (km)</th> <th>密度 (kg/m<sup>3</sup>)</th> <th>重力 (m/s<sup>2</sup>)</th> <th>天長 (hours)</th> <th>與太陽距離 (10<sup>6</sup>km)</th> <th>平均溫度 (°C)</th> <th>衛(wèi)星數(shù)量</th> <th>備注</th> </tr> </thead> <tbody> <tr> <td colspan="2" rowspan="4">類地行星</td> <td>水星</td> <td>0.330</td> <td>4,879</td> <td>5427</td> <td>3.7</td> <td>4222.6</td> <td>57.9</td> <td>167</td> <td>0</td> <td>與太陽最近</td> </tr> <tr> <td>金星</td> <td>4.87</td> <td>12,104</td> <td>5243</td> <td>8.9</td> <td>2802.0</td> <td>108.2</td> <td>464</td> <td>0</td> <td> </td> </tr> <tr> <td>地球</td> <td>5.97</td> <td>12,756</td> <td>5514</td> <td>9.8</td> <td>24.0 </td> <td>149.6</td> <td>15</td> <td>1</td> <td>我們的世界</td> </tr> <tr> <td>火星</td> <td>0.642</td> <td>6,792</td> <td>3933</td> <td>3.7</td> <td>24.7</td> <td>227.9</td> <td>-65</td> <td>2</td> <td>紅色星球</td> </tr> <tr> <td colspan="1" rowspan="4">類木行星</td> <td colspan="1" rowspan="2">氣巨星</td> <td>木星</td> <td>1898</td> <td>142,984</td> <td>1326</td> <td>23.1</td> <td>9.9</td> <td>778.6</td> <td>-110</td> <td>67</td> <td>太陽系最大</td> </tr> <tr> <td>土星</td> <td>568</td> <td>120,536</td> <td>687</td> <td>9.0</td> <td>10.7</td> <td>1433.5</td> <td>-140</td> <td>62</td> <td></td> </tr> <tr> <td colspan="1" rowspan="2">冰巨星</td> <td>天王星</td> <td>86.8</td> <td>51,118</td> <td>1271</td> <td>8.7</td> <td>17.2</td> <td>2872.5</td> <td>-195 </td> <td>27</td> <td></td> </tr> <tr> <td>海王星</td> <td>102</td> <td>49,528</td> <td>1638</td> <td>11.0</td> <td>16.1</td> <td>4495.1</td> <td>-200</td> <td>14</td> <td></td> </tr> <tr> <td colspan="2" rowspan="1">矮巨星</td> <td>冥王星</td> <td>0.0146</td> <td>2,370</td> <td>2095</td> <td>0.7</td> <td>153.3</td> <td>5906.4</td> <td>-225</td> <td>5</td> <td>2006年降格,但 <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存爭議</a>.</td> </tr> </tbody> <tfoot> </tfoot> </table> </body></html>
關(guān)鍵詞:練習,學習
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。