JavaWeb02-HTML篇筆記（一）
阿新 • • 發佈：2018-04-28
Java1.1 案例二：使用DIV+CSS布局註冊頁面:1.1.1 需求：
使用DIV+CSS的方式完成註冊頁面的布局:
1.1.2 分析:1.1.2.1 技術分析：
【CSS中的盒子模型】
? 內邊距：padding.
? 邊框：border
? 外邊距：margin
使用DIV+CSS的方式完成註冊頁面的布局:
1.1.2 分析:1.1.2.1 技術分析：
【CSS中的盒子模型】
? 內邊距：padding.
? 邊框：border
? 外邊距：margin
【CSS中的定位】
position屬性設置定位：
* relative:相對定位
* absolute:絕對定位
使用另外兩個屬性:left,top1.1.2.2 步驟分析：
【步驟一】創建一個html頁面
【步驟二】創建一個整體的DIV
【步驟三】在整體DIV中創建5個DIV.
【步驟四】為每個DIV添加所屬的內容.
1.1.3 代碼實現:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面</title> <style> div{ border:1px solid blue; } .bodyDiv{ width:90%; } .bodyDiv > div{ width:100%; } .logoDiv{ width:33%; height:50px; float:left; } .clear{ clear:both; } ul li{ display:inline; } </style> </head> <body> <!--整體DIV--> <div class="bodyDiv"> <div> <div class="logoDiv"> <img src="../img/logo2.png" height="50"/> </div> <div class="logoDiv"> <img src="../img/header.png" height="50"/> </div> <div class="logoDiv" style="margin-top:0px;padding-top:10px;height:40px;"> <a href="">登錄</a> <a href="">註冊</a> <a href="">購物車</a> </div> <div class="clear"></div> </div> <div style="height:50px;background-color: black;color:white;font-size: 20px;"> <ul > <li>首頁</li> <li>首頁</li> <li>首頁</li> <li>首頁</li> </ul> </div> <div style="height:500px;background-image: url(../img/regist_bg.jpg);"> <div style="border:5px solid gray;background-color:white;position:absolute;left:350px;top:160px;width:600px;"> <form> <table border="0" width="100%" cellspacing="15"> <tr> <td>用戶名</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密碼</td> <td><input type="password" name="password"></td> </tr> <tr> <td>確認密碼</td> <td><input type="password" name="repassword"></td> </tr> <tr> <td>性別</td> <td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td> </tr> <tr> <td>籍貫</td> <td> <select name="province"> <option>-請選擇-</option> </select> <select name="city"> <option>-請選擇-</option> </select> </td> </tr> <tr> <td>愛好</td> <td> <input type="checkbox" name="hobby" value="籃球" />籃球 <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="排球" />排球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 </td> </tr> <tr> <td>郵箱</td> <td><input type="text" name="email"></td> </tr> <tr> <td colspan="2"><input type="submit" value="註冊"></td> </tr> </table> </form> </div> </div> <div> <img src="../img/footer.jpg" width="100%"/> </div> <div> <center> 關於我們 聯系我們 招賢納士 法律聲明 友情鏈接 支付方式 配送方式 服務聲明 廣告聲明 <br/> Copyright ? 2005-2016 傳智商城 版權所有 </center> </div> </div> </body> </html>
1.1.4 總結：1.1.4.1 超鏈接的偽類
JavaWeb02-HTML篇筆記（一）