页面布局与规划
div布局
div是Web标准中一种新的布局方式,它已经逐渐替代传统的表格( table )布局。
div布局的优势比表格布局更多,具体表现为结构与表现相分离,代码简洁、利于搜索,方便后期维护和修改。
(1)首先,将页面在整体上用
标记进行分块。
(2)其次,使用css对各版块进行定位。
(3 )再次,在各版块中添加相应的内容,实现局部布局。
(2)其次,使用css对各版块进行定位。
(3 )再次,在各版块中添加相应的内容,实现局部布局。
注意:可能出现浮动塌陷
div高级:
通过float定位和绝对定位两种方式实现多栏式页面布局。和绝对定位两种方式实现多栏式页面布局。
流式布局是页面默认布局方式,是其他方式布局的基础,表格布局我们不在使用,取而代之的是DIV布局,DIV布局是目前最为流行布局方式,需要大家作为重点掌握。
例子:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container div.background {
width: 988px;
height: 637x;
background-image: url(./QQ图片20210105075558.jpg);
}
#container div.background div.form {
background-color: #22252e;
color: white;
width: 485px;
float: left;
margin-top: 150px;
margin-left: 220px;
padding: 40px;
}
#container div.background div.form p.zhanghao {
text-align: center;
font-size: 26px;
}
#container div.background div.form p {
margin-bottom: 15px;
font-size: 14px;
}
#container div.background div.form input {
width: 470px;
height: 32px;
background-color: #0f1014;
color: white;
margin-bottom: 20px;
border: 1px solid #58595e;
padding-left: 10px;
}
#container div.background div.form input.submit {
width: 480px;
background-color: #0f86ca;
color: white;
border: 1px solid #1fa5d8;
}
#container div.background div.form input.button {
width: 480px;
border: 1px solid #0f86ca;
color: #3b9aec;
}
#container div.background div.form a {
text-decoration: none;
color: #0f86ca;
}
</style>
</head>
<body>
<div id="container">
<div class="background">
<div class="form">
<form action="" method="post">
<p class="zhanghao">创建账号</p>
<p>创建暴雪游戏通行证,开启您的冒险旅程。</p>
<input type="text" name="" id="" placeholder="身份证号码"><br>
<input type="text" name="" id="" placeholder="姓名"><br>
<input type="email" name="" id="" placeholder="电子邮箱"><br>
<input type="password" name="" id="" placeholder="密码"><br>
<input type="submit" value="免费注册暴雪游戏通行证" class="submit"><br>
<input type="button" value="已经有通行证了?" class="button">
<p>点击“免费注册暴雪游戏通行证”即表示我同意并接受<a href="">暴雪战网最终用户许可协议</a>。</p>
</form>
</div>
</div>
</div>
</body>
</html>
展示: