HTML---布局(详解)

文章目录

  • 网页布局常用标签
  • 网页布局实例
    • 实例1:用div实现:
    • 实例2:用table实现


我们在完成老师布置的前端html任务时,往往布局是最关键的,我们必须先从宏观上把握页面大致的构成,通过标签先确定下页面总体有那些东西,将整体框架写好,之后才是对各个部分进行细致的填充。

网页布局常用标签

  • div:是块级元素,它可用于组合其他 HTML 元素的容器,它没有确切的含义,天生是用来进行页面布局的,除此之外,由于它属于块级元素,浏览器会在其前后进行换行。
  • table:是表格元素,每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等,这样也给我们提供了很好的容器进行页面布局。

网页布局实例

先给出目标页面大致样式:
HTML---布局(详解)_第1张图片

实例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顶部实现:

效果图:
HTML---布局(详解)_第2张图片

关键字解释:
background-color设置的是背景颜色,一般用在块级元素中
text-align设置的是块级元素中的文本位置,不可用在span标签中,无作用

4.2中间部分实现:

效果图:
HTML---布局(详解)_第3张图片

关键字解释:
list-style: none;设置的是列表不显示格式,所以列表前端无.
float:left;设置的是块级元素左浮动,这里的左边部分设置的是左浮动,右边部分设置的是右浮动。
值得注意:的是,这里的两个部分设置的宽和高是经过计算的,因为整体宽是500px,所以左右两部分的宽和为500px

4.3底部实现:
效果图:
HTML---布局(详解)_第4张图片

以上就是一步一步进行的布局实现,一定要从大到小进行设计和完善。

实例2:用table实现

具体代码为:


<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>HTMLli>
						<li>CSSli>
						<li>JavaScriptli>
					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—表格合并详解》

你可能感兴趣的:(HTML/CSS,html,前端,css3)