任務(wù)5：綜合案例教學課件_第1頁
任務(wù)5：綜合案例教學課件_第2頁
任務(wù)5：綜合案例教學課件_第3頁
任務(wù)5：綜合案例教學課件_第4頁
任務(wù)5：綜合案例教學課件_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

Web前端開發(fā)技術(shù)授課教師：楊建興項目七：表格和表單任務(wù)5綜合案例掌握表格的組成，并能夠熟練創(chuàng)建表格能夠應(yīng)用CSS控制表格的顯示樣式掌握表單的構(gòu)成，并能熟練創(chuàng)建表單能夠應(yīng)用CSS控制表單的顯示樣式目標/TARGET01030204目標項目描述：請應(yīng)用表格和表單，制作一個新員工信息登記的網(wǎng)頁，其效果如右圖所示。綜合案例：新員工信息登記網(wǎng)頁制作應(yīng)用HTML的表格和表單，完成新員工信息登記網(wǎng)頁制作任務(wù)主要知識點表格以及表格組成元素表單以及表單組成元素CSS控制表格CSS控制表單form表單縱向th標簽textarea控件caption標簽裝飾用的插入圖片submit類型input控件select控件單行文本輸入框radio類型input控件checkbox類型input控件table表格網(wǎng)頁所用背景顏色colspan屬性跨列制作基礎(chǔ)頁面步驟1：<head><metacharset="utf-8"><title>新員工信息登記表</title><linktype="text/css"rel="stylesheet"href="css/info.css"></head>制作基礎(chǔ)頁面步驟1：<formclass="employee_form"action="#"method="post">......</form><table><caption>新員工信息登記表</caption><tr><th>姓名</th><td><inputtype="text"name="username"required/></td></tr><tr>.......</tr></table>

制作基礎(chǔ)頁面步驟1：<table><tr><th>性別</th><td><inputtype="radio"name="gender"value="male"checked="checked"/>男<inputtype="radio"name="gender"value="female"/>女</td></tr>......</table>

制作基礎(chǔ)頁面步驟1：<table><tr><th>手機</th><td><inputtype="text"name="mobile"required/></td></tr><tr><th>郵箱</th><td><inputtype="text"name="email"required/></td></tr>......</table>

制作基礎(chǔ)頁面步驟1：<table>......<tr><th>愛好</th><td><inputtype="checkbox"name="hobby[]"value="film"/>看電影<inputtype="checkbox"name="hobby[]"value="music"checked="checked"/>聽音樂<inputtype="checkbox"name="hobby[]"value="travel"checked="checked"/>旅游<inputtype="checkbox"name="hobby[]"value="sport"/>運動</td></tr>......</table>

制作基礎(chǔ)頁面步驟1：<table>......<tr><th>住址</th><td><inputtype="text"name="address"required/></td></tr>......</table>

制作基礎(chǔ)頁面步驟1：<table>......<tr><th>部門</th><td><select><optionname="department"selected="selected"value="rd">----------研發(fā)部----------</option><optionname="department"value="office">辦公室</option><optionname="department"value="sales">銷售部</option><optionname="department"value="marketing">市場部</option></select></td></tr>......</table>

制作基礎(chǔ)頁面步驟1：<table>......<tr><th>備注</th><td><textareaname="notes"cols="3"rows="5"></textarea></td></tr><tr><td><buttonclass="submit"type="reset">重置</button><buttonclass="submit"type="submit">提交</button></td></tr>......</table>

使用css控制表單步驟2：

body{background-color:beige;}.employee_form{position:absolute;/*絕對定位*/top:20%;left:45%;background-color:lightblue;}使用css控制表格步驟4：

table{border-collapse:collapse;}table,td,th{border:1pxsolidblack;}控制表單步驟3：

table{border-collapse:collapse;}table,td,th{border:1pxsolidblack;}

<tr><tdcolspan="2"><buttonclass="submit"type="reset">重置</button><buttonclass="submit"type="submit">提交</button></td></tr>使用css控制表格步驟4：

.common{display:inline-block;text-align:center;border:0px;border-color:#000000;}使用css控制表格步驟4：.commontr,.commontd{height:50px;}.commonth{width:70px;}.commonselect{height:25px;}.commoninput{padding:5px8px;display:inline-block;text-align:center;}.commontextarea{padding:8px;width:260px;}使用css控制表格步驟4：.commoninput,.commontextarea{background:#fffurl(../images/attention.png)no-repeat98%center;border:1pxsolid#aaa;box-shadow:0px0px3px#ccc,010px15px#eeeinset;border-radius:2px;transition:padding.25s;}使用css控制表格步驟4：.commoninput:focus,.commontextarea:focus{background:#fff;border:5pxsolidlightblue;box-shadow:003px#aaa;padding-right:70px;}使用css控制表格步驟4：button.submit{background-color:#68b12f;color:white;font-weight:bold;/*粗體*/padding:6px20px;/*內(nèi)邊距*/}button.submit:hover{opacity:.65;cursor:pointer;color:black;}button.submit:active{border:1pxsolid#20911e;box-shadow:0010px5px#356b0binset;}使用css控制表格步驟4：<caption>新員工信息登記表</caption><caption><h2>新員工信息登記表</h2></caption>使用css控制表格

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論