web前端-综合应用案例-简历表页面的制作-educoder
生活随笔
收集整理的這篇文章主要介紹了
web前端-综合应用案例-简历表页面的制作-educoder
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第1關:簡歷表頁面的結構設計
<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡歷表</title> </head> <body> <!-- ********* Begin ********* --> <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> <!-- ********* 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>總結
以上是生活随笔為你收集整理的web前端-综合应用案例-简历表页面的制作-educoder的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 操作系统文件管理实验代码
- 下一篇: CSS完整