當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端-综合应用案例-简历表页面的制作-educoder

發布時間：2024/3/12 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端-综合应用案例-简历表页面的制作-educoder 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第1關：簡歷表頁面的結構設計

<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡歷表</title> </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>

第2關：簡歷表頁面的樣式設計

<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡歷表</title>  <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>  </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>

總結

以上是生活随笔為你收集整理的web前端-综合应用案例-简历表页面的制作-educoder的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。