html布局之< div>和< table>布局笔记

原创 PHP笔记  2017-03-18 17:30  阅读 902 views 次

html网页一般都会把要展现的元素放到多个列或行中,像报纸排版那样。<div> 或者 <table> 元素就可以实现这样的多列或多行。说到布局就少不了css了,css用来控制html元素输出的样式。

1、<div>元素布局

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html布局_PHP笔记</title>
</head>
<body>
<div style="width:500px;">
<div style="background-color:red;height:70px;">我是网页头部</div>
<div style="height:450px;">
<div style="background-color: #FFFAF0;width:100px;height:450px;float:left;">
我是网页主体1
</div>
<div style="background-color:#FFEFDB;width:300px;height:450px;float:left;">
我是网页主体2
</div>
<div style="background-color:#FFF68F;width:100px;height:450px;float:left;">
我是网页主体3
</div>
</div>
<div style="background-color:red;height:50px;">我是网页尾部</div>
</div>
</body>
</html>

运行结果:

说明:实例中使用了css,如果要了解css相关知识,请移步到:css笔记目录

2、<table>表格布局

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html布局_PHP笔记</title>
</head>
<body>
<table width="500px"><!--没有style属性,但有width属性-->
<tr><td style="background-color:red;height:70px;">我是网页头部</td></tr>
<tr style="height:450px;">
<td style="background-color: #FFFAF0;width:100px;height:450px;float:left;">
我是网页主体1
</td>
<td style="background-color:#FFEFDB;width:300px;height:450px;float:left;">
我是网页主体2
</td>
<td style="background-color:#FFF68F;width:90px;height:450px;float:left;">
我是网页主体3
</td>
</tr>
<tr><td style="background-color:red;height:50px;">我是网页尾部</td></tr>
</div>
</table>
</html>

运行结果:

说明:虽然我们可以使用html表格来实现div布局效果,但是table标签是不建议使用来布局的,它的用途是用来显示表格的,比如网页中的课程表、成绩表等就是用的html table标签。

本文地址:https://www.ggbiji.com/html-layout.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情