HTML教程 HTML教程HTML是什么HTML 代码编辑器HTML 基础标签HTML 元素HTML 属性HTML 标题HTML 段落HTML 文本格式化HTML CSSHTML 头部HTML链接HTML 图像HTML 区块和行内元素HTML 表格HTML 列表HTML 引用和定义元素HTML 计算机代码元素HTML 布局HTML 框架HTML 脚本/JavaScript

HTML 布局

一个html页面由一个或者多个块部分组合而成的,以下我来讲几个常见的页面布局。其最经典的就是"国"字布局,叫法可能会有所不同。在"国"字布局的基础下适当的增加或者减少就会演变成其它类型布局。

布局类型

1.“国字”型布局

其页面的最上部分一般放置网站的标志和导航栏或Banner广告,在左侧和右侧放二级导航菜单等,页面中间主要放置网站的主要内容,最下部分一般放置网站的版权信息和联系方式等。

98397d37487df8825c1b4ed86df0e369_720w.jpg

2.T型布局

其实T型布局可以理解为“国字”型布局去掉右侧内容和页脚内容

66378d815d8cf03644f9c2841d71fce2_720w.jpg

3.标题正文型

标题正文型可以理解为“国字”型布局去掉右侧内容和页脚内容,再去掉左侧内容。

a6cbc4f0590f2c29e347c3edd121ba72_r.jpg

实现HTML 布局-使用<div>标签

<div>是常用布局标签,而且推荐使用<div>进行布局,对搜索引擎较为友好。下面使用的四个div来创建多列布局

gaitubao_微信图片编辑_20200427112301 (1).jpg

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>炫代码(www.xuandaima.com)</title>
<style>
#tou {
    background-color:rgb(0,0,155);
    color:white;
    text-align:center;
    padding:5px;
}
#zuo {
    line-height:30px;
    background-color:#eeffee;
    height:300px;
    width:200px;
    float:left;
    padding:5px;        
}
#zhong {
    width:350px;
    float:left;
    padding:10px;    
}
#jiao {
    background-color:rgb(0,0,155);
    color:white;
    clear:both;
    text-align:center;
   padding:5px;    
}
</style>
</head>

<body>

<div id="tou">
<h1>页面头部:可放网站logo、导航栏、横幅广告...</h1>
</div>

<div id="zuo">
左侧:<br>
导航菜单<br>
其他<br>
</div>

<div id="zhong">
<h2>内容</h2>
<p>
我是一段文字.
</p>
<p>
我是一段文字.我是一段文字.我是一段文字.
</p>
</div>

<div id="jiao">
页面脚部:版权信息、联系方式、其他
</div>
</body>
</html>

div布局

实现HTML 布局-使用<table>标签

<table>是一种简单布局方式,简单布局可用,但是如果是复杂的页面,比如说有个块下面还嵌套很多小块,嵌套比较多,代码不好理解,和样式使用比较复杂。还有对搜索引擎优化不友好。

gaitubao_微信图片编辑_20200427112301 (1).jpg

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>炫代码(www.xuandaima.com)</title>
<style>
#tou {
    background-color:rgb(0,0,155);
    color:white;
    text-align:center;
    padding:5px;
}
#zuo {
    line-height:30px;
    background-color:#eeffee;
    height:300px;
    width:200px;
    padding:5px;        
}
#zhong {
    width:350px;
    padding:10px;    
}
#jiao {
    background-color:rgb(0,0,155);
    color:white;
    clear:both;
    text-align:center;
   padding:5px;    
}
</style>
</head>

<body>

  <table width="700" border="0">
<tr>
<td colspan="2" id="tou">
<h1>页面头部:可放网站logo、导航栏、横幅广告...</h1>
</td>
</tr>

<tr>
<td id="zuo">
左侧:<br>
导航菜单<br>
其他<br>
</td>
<td id="zhong">
<h2>内容</h2>
<p>
我是一段文字.
</p>
<p>
我是一段文字.我是一段文字.我是一段文字.
</p>
</tr>

<tr >
<td colspan="2" id="jiao">
页面脚部:版权信息、联系方式、其他
</tr>
</table>
</body>
</html>

table布局

布局相关标签

标签描述
<div>定义文档区块,块级(block-level)
<table>定义表格区块,用来组合文档中的行或列元素。