HTML 布局

创建时间:2019.06.09 修改时间:2019.06.09

元素分类

HTML 元素按默认布局形式分为块级元素和内联元素。

如 : <h1>, <p>, <ul>, <table>, <tr>
如 : <b>, <td>, <a>, <img>

<div> 元素和 <span> 元素

<div> 元素和 <span> 元素没有特定的含义和表现形式。

<div> 元素为块级元素,常做为组合其他 HTML 元素的容器,与 CSS 结合可对大的内容块设置样式属性,进行页面整体布局。

如:

<div style="color:#0000FF">
  <h3> 这是一个在  div  元素中的标题。</h3>
  <p> 这是一个在  div  元素中的文本。</p>
</div>

效果如下:

这是一个在 div 元素中的标题。

这是一个在 div 元素中的文本。

<span> 元素为内联元素,常做为文本的容器,与 CSS 结合可对局部文本设置样式属性。

如:

<p> 我的母亲有 <span style="color:blue"> 蓝色 </span> 的眼睛。</p>

效果如下:

我的母亲有 蓝色 的眼睛。

使用 <div> 创建多列布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 去码 (quma.live)</title>
<style>
h1 {
	margin-bottom:0;
}
#container {
	width:500px;
}
#header {
	background-color:#FFA500;
}
#menu {
	background-color:#FFD700;
	height:200px;
	width:100px;
	float:left;
}
#content {
	background-color:#EEEEEE;
	height:200px;
	width:400px;
	float:left;
}
#footer {
	background-color:#FFA500;
	clear:both;
	text-align:center;
}
</style>
</head>
<body>

<div id="container">

	<div id="header"><h1> 网页标题 </h1></div>

	<div id="menu"><b> 菜单 </b><br>HTML<br>CSS<br>JavaScript</div>

	<div id="content"> 网页内容 </div>

	<div id="footer"> 版权  © runoob.com</div>

</div>

</body>
</html>

效果如下: