【郑州校区】JavaWeb02-HTML篇笔记（二）

本帖最后由谷粒姐姐于 2018-4-28 11:22 编辑

1.1 案例二：使用DIV+CSS布局注册页面:1.1.1 需求：

使用DIV+CSS的方式完成注册页面的布局:

1.1.2 分析:1.1.2.1 技术分析：

【CSS中的盒子模型】

Ø 内边距：padding.

Ø 边框：border

Ø 外边距：margin

【CSS中的定位】

[AppleScript] 纯文本查看 复制代码

position属性设置定位：
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top

1.1.2.2 步骤分析：

【步骤一】创建一个html页面

【步骤二】创建一个整体的DIV

【步骤三】在整体DIV中创建5个DIV.

【步骤四】为每个DIV添加所属的内容.

1.1.3 代码实现:

[AppleScript] 纯文本查看 复制代码

<!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篇笔记（二）

0 个回复