HTML5 1.7 div元素与布局
1.元素的分类
a.块元素,会产生换行效果,自动与其他元素分离成两行;通常可以作为容器在内部添加其他元素。
如:h1~h6,hr,ul,ol,p,table
b.内部元素,不会产生换行效果
如:b,i,br,img
2.div元素与布局
a.div是通用的块元素,内部可以包含其他元素包括其他div元素。并且可以通过css设置样式
A
<!DOCTYPE html>
< html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>例7</title>
</head>
<body>
<div style=“width:100%;height:708px;”>
<div style=”background:green;width:100%;height:10%“>我是标题</div>
<div style=”background:blue;width:20%;height:80%; float=left;>我是导航栏</div>
<div style=”background:red;width:80%;height:80%; float=left;>我是内联框架</div>
<div style=”background:yellow;width:100%;height:10%; float=left;>我是尾部</div>
</div>
</body>
</html>
B
<!DOCTYPE html>
< html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>例7</title>
<style type=”text/css“>
#div1{style=“width:100%;height:708px;”}
#div1{style=”background:green;width:100%;height:10%“}
#div1{style=”background:blue;width:20%;height:80%; float=left;“}
#div1{style=”background:red;width:80%;height:80%; float=left;“}
#div1{style=”background:yellow;width:100%;height:10%; float=left;}
</style>
</head>
<body>
<div id=”div1”>
<div id=”div2“>我是标题</div>
<div id=”div3“>我是导航栏</div>
<div id=”div4“>我是内联框架</div>
<div id=”“div5“>我是尾部</div>
</div>
</body>
</html>
c
<!DOCTYPE html>
< html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>例7</title>
<style type=”text/css“>
.class1{background:red}
#div1{style=“width:100%;height:708px;”}
#div1{style=”background:green;width:100%;height:10%“}
#div1{style=”background:blue;width:20%;height:80%; float=left;“}
#div1{style=”background:red;width:80%;height:80%; float=left;“}
#div1{style=”background:yellow;width:100%;height:10%; float=left;}
</style>
</head>
<body>
<div id=”div1”>
<div id=”div2“>我是标题</div>
<div id=”div3“>我是导航栏</div>
<div id=”div4“>我是内联框架</div>
<div id=”“div5“>我是尾部</div>
</div>
<b title="我可以加粗文字">我是b标签</b>
<bdo dir="rtl">文字走向</bdo>
<p dir="rtl">我是段落1234567889</p>
</body>
</html>