JavaWeb02-HTML篇笔记（二）

czbkzmj

于 2018-05-14 10:40:08 发布

阅读量120

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/czbkzmj/article/details/80306526

版权

JAVA 专栏收录该内容

476 篇文章 1 订阅

订阅专栏

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

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

1.1.2 分析: 1.1.2.1 技术分析：

【CSS中的盒子模型】

Ø 内边距：padding.

Ø 边框：border

Ø 外边距：margin

【CSS中的定位】

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

1

2

3

4

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

1.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 超链接的伪类

czbkzmj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb02-HTML篇笔记（二）

1.1 案例二：使用DIV+CSS布局注册页面:1.1.1 需求：使用DIV+CSS的方式完成注册页面的布局:1.1.2 分析:1.1.2.1 技术分析：【CSS中的盒子模型】Ø 内边距：padding.Ø 边框：borderØ 外边距：margin【CSS中的定位】[AppleScript] 纯文本查看复制代码?1234position属性设置定位：* relative:相对定位* absol...
复制链接

扫一扫

专栏目录