HTML制作简易个人简历(表单)
生活随笔
收集整理的這篇文章主要介紹了
HTML制作简易个人简历(表单)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
《個人簡歷》練習效果圖如下:
說明:“個人簡歷”是居于桌面中央
制作步驟:
1、表格標題居于第一行并加粗,添加外邊框(邊框寬度隨自己定),代碼如下:
<tr><th><b> 個人簡歷</b></th></tr><table border="1"> <tr>2、制作表格第一行(包括照片欄),代碼如下:
<tr><form><td width="160"height="30">姓名</td><td ><input type="text"name="姓名"></td> <td width="160"height="30">性別</td><td ><input type="text"name="性別"></td><td width="160"height="30">出生年月</td><td><input type="text"name="出生年月"></td><td rowspan="4"width="120"height="30"><input type="file"></td></form> </tr>說明:因為表單文本字段的默認寬度是 20 個字符?,所以為了看著舒服^_^,我把表單的寬度設為160,高設為30.照片列是跨四行,所以rowspan="4",寬和高可以自己去匹配。
3、二三行一樣,第四行注意“畢業學校”和他的對應的文本字段是跨列的,代碼如下:
<tr><form><td width="160"height="30">專業</td><td ><input type="text"name="專業"></td><td colspan="2">畢業學校</td><td colspan="2"><input type="text"name="畢業學校"></td> </form> </tr>4、 “特長、技能或愛好”行是橫穿整行的,所以應用表格,代碼如下:
<tr><td colspan="8">技能、特長或愛好</td> </tr>5、“時間”、“單位”、“經歷”列和其對應的文本單元的代碼如下:
<tr><form><td width="160"height="30">時間</td><td colspan="2">單位</td><td colspan="6">經歷</td></form> </tr> <tr><form><td><input type="text"name="時間"></td><td colspan="2"><input type="text"name="單位"></td><td colspan="6"><input type="text"name="經歷"></td></form> </tr>6、后面基本沒什么難處,運行后情況如下:
?
我們需要文本文字居中及消除表單文本字段中的內方框,代碼如下:
<style>body{text-align:center} </style><style>input{border:0px;width:90%;} </style>不足之處:無法檢測性別、出生年月、Email、聯系電話等輸入是否符合規范,還需加強。
完整代碼如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ge ren jian li </title><!--文字居中--><style>body{text-align:center}</style><!--消除表單內方框--><style>input{border:0px;width:90%;}</style></head> <body><tr><th><b> 個人簡歷</b></th></tr><table border="1"><tr><form><td width="160"height="30">姓名</td><td ><input type="text"name="姓名"></td> <td width="160"height="30">性別</td><td ><input type="text"name="性別"></td><td width="160"height="30">出生年月</td><td><input type="text"name="出生年月"></td><td rowspan="4"width="120"height="30"><input type="file"></td></form></tr><tr><form><td width="160"height="30">民族</td><td ><input type="text"name="民族"></td> <td width="160"height="30">政治面貌</td><td ><input type="text"name="政治面貌"></td><td width="160"height="30">身高</td><td><input type="text"name="身高"></td></form></tr> <tr><form><td width="160"height="30">學制</td><td ><input type="text"name="學制"></td><td width="160"height="30">學歷</td><td ><input type="text"name="學歷"></td><td width="160"height="30">戶籍</td><td><input type="text"name="戶籍"></td></form></tr><tr><form><td width="160"height="30">專業</td><td ><input type="text"name="專業"></td><td colspan="2">畢業學校</td><td colspan="2"><input type="text"name="畢業學校"></td> </form></tr><tr><td colspan="8">技能、特長或愛好</td></tr><tr><form><td width="160"height="30">外語等級</td><td colspan="2"><input type="text"name="外語等級"></td><td width="160"height="30">計算機</td><td colspan="4"><input type="text"name="計算機"></td> </form></tr><tr><td colspan="8">個人履歷</td></tr><tr><form><td width="160"height="30">時間</td><td colspan="2">單位</td><td colspan="6">經歷</td></form></tr><tr><form><td><input type="text"name="時間"></td><td colspan="2"><input type="text"name="單位"></td><td colspan="6"><input type="text"name="經歷"></td></form></tr><tr><form><td><input type="text"name="時間"></td><td colspan="2"><input type="text"name="單位"></td><td colspan="6"><input type="text"name="經歷"></td></form></tr><tr><form><td><input type="text"name="時間"></td><td colspan="2"><input type="text"name="單位"></td><td colspan="6"><input type="text"name="經歷"></td></form></tr><tr><td colspan="8">聯系方式</td></tr><tr><form><td width="160"height="30">Email</td><td colspan="2"><input type="email"name="Email"></td><td width="160"height="30">聯系電話</td><td colspan="4"><input type="number"name="聯系電話"></td></form></tr><tr><form><td width="160"height="30">通信地址</td><td colspan="2"><input type="text"name="通信地址"></td><td width="160"height="30">郵編</td><td colspan="4"><input type="text"name="郵編"></td></form></tr><tr><td colspan="8">自我評價</td></tr> </body> </html>?
?
總結
以上是生活随笔為你收集整理的HTML制作简易个人简历(表单)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基于ip tunnel连接不同三个不同网
- 下一篇: Excel宏脚本