简历表页面的制作
第1關：簡歷表頁面的結構設計
任務描述
本關任務：通過表格的相關標簽制作一個簡單的簡歷表。
相關知識
為了完成本關任務，你需要掌握：1.表格標簽及其屬性設置，2.項目表頭單元格標簽和數據單元格標簽，3.單元格合并的方法。
表格標簽及其屬性設置
在HTML網頁中，所有的元素都是通過標簽定義的，要想創建表格，就需要使用表格相關的標簽。基本語法格式如下：
1.<table>標簽的屬性
2.<tr>標簽的屬性
3.<td>標簽的屬性
4.<th>標簽的屬性
<th></th>標簽用來設置表頭，其文本默認加粗居中顯示。
表格單元格的合并
1.水平方向單元格的合并
將兩個或多個水平方向的單元格合并，可以在th或td標簽中使用colspan屬性來設置，屬性的取值為合并的單元格的數目。 用法示例： 示例如下：
2.垂直方向單元格的合并
將兩個或多個垂直方向的單元格合并，可以在th或td標簽中使用rowspan屬性來設置，屬性的取值為合并的單元格的數目。 用法示例：
編程要求
任務描述效果圖如下：
根據任務描述的效果圖，在 Begin-End 區域內補充代碼，創建一個7行5列的表格，具體要求如下： 1.將第1行的5個單元格合并，單元格中的內容為簡歷表，設置類名為“one two” 2.第2行的第1和第3個單元格中的文本分別為“姓名”和“民族”，類名設置為“one”；第2、4列單元格中無文本，也不設置類名；第5個單元格中文本為“照片”，并將該單元格與其下方的5個單元格合并。 3.第3-6行除了文本內容的變化外，單元格結構與第2行類似，且類名均為“one”。 5.第7行第1個單元格中文本為“目前所在地”，類名設置為“one”，將第2個單元格右側的4個單元格合并。
測試說明
補充代碼后，請點擊測評，平臺會對你編寫的代碼進行測試，如果正確則完成闖關任務。
?
第2關：簡歷表頁面的樣式設計
任務描述
本關任務：美化簡歷表頁面。
相關知識
為了完成本關任務，你需要掌握：1.CSS控制表格樣式
CSS控制表格樣式
除了表格標簽自帶的屬性外，還可用CSS的邊框、寬高、顏色等來控制表格樣式。此外，CSS中還提供了表格專用屬性，以便控制表格樣式。
1.CSS控制表格邊框
CSS代碼如下所示：
2.CSS控制表格邊距
CSS代碼如下所示：
3.CSS控制單元格寬高
CSS代碼如下所示：
編程要求
根據任務描述提示的目標效果，在右側編輯器補充代碼，具體要求如下： 1.設置table的邊框為1像素、實線、且顏色為#ccc。 2.設置table的寬度高度分別為600像素和40像素。 3.用兩個參數設置外邊距：上下為0像素、左右居中。 4.運用border-collapse屬性將表格的雙邊框合并為一個單一邊框。 5.設置table中字體大小為14像素。
測試說明
補充代碼后，請點擊測評，平臺會對你編寫的代碼進行測試，如果正確則完成闖關任務。
?
<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡歷表</title> <!-- ********* Begin ********* --> <style type="text/css"> table{border:1px solid #ccc ; /*設置table的邊框*/width:600px;height:40px ;margin:0 auto;border-collapse:collapse;font-size:14px} td{width:80px;border:1px solid #ccc;} .one{background:#eee;} .two{text-align:center;font-size:20px;font-weight:bold;} </style> <!-- ********* End ********* --> </head> <body> <table><tr><td colspan=5 class="one two">簡歷表</td></tr><tr><td class="one">姓名</td><td></td><td class="one">民族</td><td></td><td rowspan=5>照片</td></tr><tr><td class="one">籍貫</td><td></td><td class="one">身高</td><td></td></tr><tr><td class="one">婚姻狀況</td><td></td><td class="one">電子郵件</td><td></td></tr><tr><td class="one">聯系電話</td><td></td><td class="one">QQ號碼</td><td></td></tr><tr><td class="one">出生年月</td><td></td><td class="one">國籍</td><td></td></tr><tr ><td class="one">目前所在地</td><td colspan=4></td></tr> </table> </body> </html>總結
- 上一篇： 失物招领网站
- 下一篇： EUV光刻技术如何为功率半导体提供动力