我们在完成老师布置的前端html任务时,往往布局是最关键的,我们必须先从宏观上把握页面大致的构成,通过标签先确定下页面总体有那些东西,将整体框架写好,之后才是对各个部分进行细致的填充。
网页布局常用标签
- div:是块级元素,它可用于组合其他 HTML 元素的容器,它没有确切的含义,天生是用来进行页面布局的,除此之外,由于它属于块级元素,浏览器会在其前后进行换行。
- table:是表格元素,每个表格均有若干行(由
<tr>
标签定义),每行被分割为若干单元格(由<td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等,这样也给我们提供了很好的容器进行页面布局。
网页布局实例
先给出目标页面大致样式:
实例1:用div实现:
1.首先肯定是在一个大的div内实现
2.其次,可以明显发现该页面分为上中下三个大部分,中间部分又包含两个部分
3.进行大致的框架实现:
<body>
<!-- 整体 -->
<div>
<!-- 顶部 -->
<div id="top">
</div>
<!-- 中间部分 -->
<div id="middle">
<div id="middle-left">
</div>
<div id="middle-right">
</div>
</div>
<!-- 底部 -->
<div id="bottom">
</div>
</div>
</body>
4.完善各个部分:
4.1顶部实现:
效果图:
关键字解释:
background-color
设置的是背景颜色,一般用在块级元素中
text-align
设置的是块级元素中的文本位置,不可用在span标签中,无作用
4.2中间部分实现:
效果图:
关键字解释:
list-style: none;
设置的是列表不显示格式,所以列表前端无.
float:left;
设置的是块级元素左浮动,这里的左边部分设置的是左浮动,右边部分设置的是右浮动。
值得注意
:的是,这里的两个部分设置的宽和高是经过计算的,因为整体宽是500px,所以左右两部分的宽和为500px
4.3底部实现:
效果图:
以上就是一步一步进行的布局实现,一定要从大到小进行设计和完善。
实例2:用table实现
具体代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<!-- 整体 -->
<table width="500px">
<!-- 顶部实现 -->
<tr>
<td colspan="2" style="background-color:#FFA500; text-align: center;">
<h1>主要的网页标题</h1>
</td>
</tr>
<!-- 中间部分实现 -->
<tr>
<td style="background-color:#FFD700;width:200px;vertical-align:top;">
<ul style="list-style: none;">
<li>菜单</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</td>
<td style="background-color:#eeeeee;height:200px;width:300px;vertical-align:top;text-align: center;">
内容在这里</td>
</tr>
<!-- 底部实现 -->
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
@好好学习</td>
</tr>
</table>
</body>
</html>
关键字解释:
colspan="2"
表示在该行进行两列合并
vertical-align:top;
设置表格内所有内容的位置在顶部
注意:
在用表格进行页面布局的时候,需要大致的计算出那些部分进行合并。
总结:
即使可以使用 HTML 表格来创建漂亮的布局(前提是使用好表格的合并,手动狗头),但设计表格的目的是呈现表格化数据——表格不是布局工具。
通常情况下,使用div进行页面布局的更多一点,想要进一步了解表格合并内容的可以参看我的另一篇文章《HTML—表格合并详解》