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

最新推荐文章于 2024-07-03 20:29:42 发布

思索与猫

最新推荐文章于 2024-07-03 20:29:42 发布

阅读量119

点赞数

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

本文链接：https://blog.csdn.net/qq_28997735/article/details/97593622

版权

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

9 篇文章 0 订阅

订阅专栏

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可以制作更精美漂亮的布局。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

思索与猫

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML学习笔记七】页面布局

1.div元素div是html标签之一，div具有分割内容作用，div与CSS样式可让网页实现各种样式效果。实例：<!DOCTYPE html><html> <head> <meta charset = "utf-8"> <title>页面布局</title> </head> <body...
复制链接

扫一扫