【HTML学习笔记七】页面布局

思索与猫

于 2019-07-28 04:42:53 发布

阅读量144

点赞数

分类专栏： HTML学习笔记文章标签： HTML 学习笔记

本文链接：https://blog.youkuaiyun.com/qq_28997735/article/details/97593622

版权

HTML学习笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍HTML中的div元素及其在网页布局中的应用。通过CSS样式，div能够实现复杂的页面布局，如顶部标题、左侧菜单、主要内容区和底部信息。文章包含了一个具体的布局实例，展示了如何使用div和CSS创建清晰的网页结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.div元素

div是html标签之一，div具有分割内容作用，div与CSS样式可让网页实现各种样式效果。
实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title>页面布局</title>
	</head>
	<body>
		<div id = "container" style = "width:500px">
			<div id = "top" style = "background-color:yellow" align = "center">
				<h1>标题</h1>
			</div>
			<div id = "menu" style = "background-color:red;height:200px;width:100px;float:left">
				<ol>
					<li>雪碧</li>
					<li>可乐</li>
					<li>芬达</li>
				</ol>
			</div>
			<div id = "content" style = "background-color:green;height:200px;width:400px;float:left">
				<p>正文</p>
			</div>
			<div id = "bottom" style = "background-color:blue">
				<p>底部</p>
			</div>
		</div>
	</body>
</html>

结果：
在这里插入图片描述
注意： HTML5中已不再支持 <div> align 属性，请使用 CSS 替代。
注意： 使用表格同样也可以创建布局，但最号用来呈现数据。
注意： 配合CSS可以制作更精美漂亮的布局。