20210316web前端

HTML5框架

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动与定位</title>
<style type="text/css">
.header,.aside,.main,.footer{
	background-color:pink;
	border:1px solid yellow;
	}
.header{
	height:100px;
}
.aside,.main{
	height:200px;
}
.aside{
	width:200px;
	float:left;
}
.main{
	margin-left:202px;
}
.footer{
	height:50px;
}
.float-div{
	background-color:paleturquoise;
	border:1px solid yellow;
	width:100px;
	height:100px;
	position:absolute;
	top:160px;
	left:500px;
}

</style>
</head>

<body>
<header class="header">header</header>
<aside class="aside">aside</aside>
<section class="main">section</section>
<footer class="footer">footer</footer>
<div class="float-div">floatdiv</div>
</body>
</html>
posted @ 2021-03-16 17:18  忆清鸣  阅读(54)  评论(0)    收藏  举报