CSS学习之盒子模型简单的布局

最新推荐文章于 2024-07-22 08:55:10 发布

playboy-jordan

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量163

点赞数

分类专栏： # CSS教程文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106817963

版权

CSS教程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>盒子模型简单的布局</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
		/*设置div的基础样式*/
			div{
				width: 300px;
				height: 300px;
			}
		/*设置header和footer的样式*/
			#header,#footer{
				width: 650px;
				margin: auto;
				margin-top: 20px;
			}
		/*设置子div的样式*/
			#div01{
				border: solid 1px orange;
				float: left;
				margin-right: 20px;
			}
			#div02{
				border: solid 1px blueviolet;
				float: left;
			}
			#div03{
				border: solid 1px #4791FF;
				float: left;
				margin-right: 20px;
			}
			#div04{
				border: solid 1px coral;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="header">
				<div id="div01">
					我是div01
				</div>
				<div id="div02">
					我是div02
				</div>
		</div>
		
		<div id="footer">
			<div id="div03">
				我是div03
			</div>
			<div id="div04">
				我是div04
			</div>
		</div>
		
	</body>
</html>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

playboy-jordan

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习之盒子模型简单的布局

<html> <head> <title>盒子模型简单的布局</title> <meta charset="UTF-8"/> <style type="text/css"> /*设置div的基础样式*/ div{ width: 300px; height: 300px; } /*设置header和footer的样式*/ #header,#footer{ width: 650
复制链接

扫一扫