使用DIV+CSS完成註冊頁面的優化 需求分析 由於我們的註冊頁面也是用table佈局的,存在與首頁同樣的問題,所以我們需要使用div+css對我們的註冊頁面進行美化 技術分析 CSS的盒子模型: 萬物皆盒子 內邊距: padding top padding right padding bottom ...
使用DIV+CSS完成註冊頁面的優化
需求分析
由於我們的註冊頁面也是用table佈局的,存在與首頁同樣的問題,所以我們需要使用div+css對我們的註冊頁面進行美化
技術分析
CSS的盒子模型: 萬物皆盒子
內邊距:
padding-top
padding-right
padding-bottom
padding-left
padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 順時針的方向
外邊距:
margin-top
margin-right
margin-bottom
margin-left
CSS絕對定位:
position: absolute
top: 控制距離頂部的位置
left: 控制距離左邊的位置
步驟分析
- 總共是5部分
- 第一部分是LOGO部分
- 第二部分是導航菜單
- 第三部分是註冊部分
- 第四部分是FOOTER圖片
- 第五部分是一堆超鏈接
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<!--
1. 總共是5部分
2. 第一部分是LOGO部分
3. 第二部分是導航菜單
4. 第三部分是註冊部分
5. 第四部分是FOOTER圖片
6. 第五部分是一堆超鏈接
-->
<div>
<!--2. 第一部分是LOGO部分-->
<div>
<div class="logo">
<img src="../img/logo2.png" />
</div>
<div class="logo">
<img src="../img/header.png" />
</div>
<div class="logo">
<a href="#">登錄</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動-->
<div style="clear: both;"></div>
<!--3. 第二部分是導航菜單-->
<div style="background-color: black; height: 50px;">
<a href="#" class="amenu">首頁</a>
<a href="#" class="amenu">手機數位</a>
<a href="#" class="amenu">電腦辦公</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">香煙酒水</a>
</div>
<!--4. 第三部分是註冊部分-->
<div style="background: url(../image/regist_bg.jpg);height: 500px;">
<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">會員註冊</font>USER REGISTER</td>
</tr>
<tr>
<td>用戶名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>確認密碼:</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email:</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>性別:</td>
<td><input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女
<input type="radio" name="sex"/> 妖
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="date"/></td>
</tr>
<tr>
<td>驗證碼:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="註冊"/></td>
</tr>
</table>
</div>
</div>
<!--5. 第四部分是FOOTER圖片-->
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--9. 第四部分: 放一堆超鏈接-->
<div style="text-align: center;">
<a href="#">關於我們</a>
<a href="#">聯繫我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務聲明</a>
<a href="#">廣告聲明</a>
<br />
Copyright © 2005-2016 傳智商城 版權所有
</div>
</div>
</body>
</html>
