8小时学会HTML开发（二）
2017-01-25 本文已影响29人
小北风sky
完成田字格布局
- 第一步
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>田字格布局</title>
<style>
#a {
width: 100px;
height: 100px;
background: red;
/*float: left;*/
}
#b {
width: 100px;
height: 100px;
background: blue;
/*float: left;*/
}
#c {
width: 100px;
height: 100px;
background: green;
clear/*: left;
float: left;*/
}
#d {
width: 100px;
height: 100px;
/* background: gray;
float: left;*/
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</body>
</html>
效果如下：
CB4FD376-1B6C-48EA-80F0-C501358F6A3B.png
2.第二步：添加浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>田字格布局</title>
<style>
#a {
width: 100px;
height: 100px;
background: red;
float: left;
}
#b {
width: 100px;
height: 100px;
background: blue;
float: left;
}
#c {
width: 100px;
height: 100px;
background: green;
/*clear: left;*/
float: left;
}
#d {
width: 100px;
height: 100px;
background: gray;
float: left;
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</body>
</html>
效果如下：
F5C49857-DFEA-49CA-94D5-4194E55721CC.png
3.第三步：只移除c的浮动效果，再为c添加浮动
D9824B60-0956-40B4-8B6B-75737CB3927D.png
效果如下：
F3121043-25DA-4412-8216-BE88FDB83508.png
如果父div中，2个子div是浮动的，父div的高度有没有被子div撑起来，父div是多高？
没有被子div撑起来，父div高度为0.
- 未设置浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#fatherDiv {
background: gray;
}
#childDiv1 {
width: 200px;
height: 200px;
background: red;
/*float: left;*/
}
#childDiv2 {
width: 200px;
height: 200px;
background: green;
/*float: left;*/
}
/*#childDiv3 {
background: blue;
clear: both;
}*/
</style>
</head>
<body>
<div id="fatherDiv">
<div id="childDiv1">childDiv1</div>
<div id="childDiv2">childDiv2</div>
<!-- <div id="childDiv3">childDiv3</div> -->
</div>
</body>
</html>
效果如下：
C0930A2D-F756-4FD7-9658-3FE0AE437965.png
- 设置浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#fatherDiv {
background: gray;
}
#childDiv1 {
width: 200px;
height: 200px;
background: red;
float: left;
}
#childDiv2 {
width: 200px;
height: 200px;
background: green;
float: left;
}
/*#childDiv3 {
background: blue;
clear: both;
}*/
</style>
</head>
<body>
<div id="fatherDiv">
<div id="childDiv1">childDiv1</div>
<div id="childDiv2">childDiv2</div>
<!-- <div id="childDiv3">childDiv3</div> -->
</div>
</body>
</html>
效果如下：
D1760E0B-865F-41CC-A555-0153A9C147A4.png
说到底，这就是没有清除浮动的问题
完成如下网页的布局
1.分析：
2F365C50-8FC8-426E-ABB3-3FE7AE8D30BE.png
2.代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>完成首页布局</title>
<style>
#container {
width: 1200px;
}
#header {
height: 150px;
background: red;
}
#main {
height: 300px;
background: green;
}
#lside {
width: 800px;
height: 300px;
background: orange;
float: left;
}
#a {
width: 400px;
height: 150px;
background: yellow;
float: left;
}
#b {
width: 400px;
height: 150px;
background: pink;
float: left;
}
#c {
width: 400px;
height: 150px;
background: green;
clear: left;
float: left;
}
#d {
width: 400px;
height: 150px;
background: white;
float: left;
}
#rside {
width: 400px;
height: 300px;
background: gray;
float: right;
}
#e {
width: 400px;
height: 150px;
background: orange;
}
#f {
width: 400px;
height: 150px;
background: gray;
}
#footer {
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="lside">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</div>
<div id="rside">
<div id="e">e</div>
<div id="f">f</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
3.效果图
89C8098E-4A67-4CD5-9F85-B5BB45EA1612.png
易犯错误
1.不加doctype
导致低版本ie解析效果不一样
2.id为数字
3.文件编码与charset不一致
代码地址：https://github.com/xiaobeifeng/Eight-hours-to-learn-HTML-development-Source-Code
