Educoder -- Web程序设计基础2021秋--简历表页面的制作
生活随笔
收集整理的這篇文章主要介紹了
Educoder -- Web程序设计基础2021秋--简历表页面的制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 第1關： 簡歷表頁面的結構設計
- 1、 編程要求
- 2、 代碼展示
- 第2關： 簡歷表頁面的樣式設計
- 1、 編程要求
- 2、 代碼展示
第1關： 簡歷表頁面的結構設計
1、 編程要求
根據任務描述的效果圖，在 Begin-End 區域內補充代碼，創建一個7行5列的表格，具體要求如下：
- 將第1行的5個單元格合并，單元格中的內容為簡歷表，設置類名為“one two”
- 第2行的第1和第3個單元格中的文本分別為“姓名”和“民族”，類名設置為“one”；第2、4列單元格中無文本，也不設置類名；第5個單元格中文本為“照片”，并將該單元格與其下方的5個單元格合并。
- 第3-6行除了文本內容的變化外，單元格結構與第2行類似，且類名均為“one”。
- 第7行第1個單元格中文本為“目前所在地”，類名設置為“one”，將第2個單元格右側的4個單元格合并。
2、 代碼展示
<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡歷表</title> </head> <body> <!-- ********* Begin ********* --><style>.one {background-color: #eeeeee;}td {width: 500px;border: 1px solid #cccccc;}.two {text-align: center;}</style><table cellspacing="0" cellspadding="0" style="border: 1px solid #cccccc"><th><td colspan="5" class="one two"><strong>簡歷表</strong></td></th><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> <!-- ********* End ********* --> </body> </html>第2關： 簡歷表頁面的樣式設計
1、 編程要求
根據任務描述提示的目標效果，在右側編輯器補充代碼，具體要求如下：
- 設置table的邊框為1像素、實線、且顏色為#ccc。
- 設置table的寬度高度分別為600像素和40像素。
- 用兩個參數設置外邊距：上下為0像素、左右居中。
- 運用border-collapse屬性將表格的雙邊框合并為一個單一邊框。
- 設置table中字體大小為14像素。
2、 代碼展示
<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡歷表</title> <!-- ********* Begin ********* --> <style type="text/css"> table{border: apx 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>總結
以上是生活随笔為你收集整理的Educoder -- Web程序设计基础2021秋--简历表页面的制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nn.Sequential与nn.Mod
- 下一篇： Kafka生产者与消费者详解