2021.4.17笔记 div和table布局

最新推荐文章于 2024-04-23 15:16:45 发布

是吃货不是贝爷

最新推荐文章于 2024-04-23 15:16:45 发布

阅读量106

点赞数

分类专栏： HTML 文章标签： html 前端 web

本文链接：https://blog.csdn.net/q4451728/article/details/115800749

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>div网页布局</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			#container{
				width: 100%;
				height: 950px;
				background-color: aqua;
			}
			#content_header{
				width: 100%;
				height: 10%;
				background-color: blue;
			}
			#content_menu{
				width: 50%;
				height: 80%;
				background-color: bisque;
				float: left;
			}
			#content_list{
				width: 50%;
				height: 80%;
				background-color: cadetblue;
				float: left;
			}
			#content_footer{
				width: 100%;
				height: 10%;
				background-color: aquamarine;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="content_header">我是头部</div>
			<div id="content_menu">我是左边</div>
			<div id="content_list">我是右边</div>
			<div id="content_footer">我是底部</div>
		</div>
	</body>
</html>

table

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>table网页布局</title>
	</head>
	<body marginheight="0px" marginwidth="0px">
		<table height="950px" width="100%">
			<tr>
				<td colspan="2" width="100%" height="10%" style="background-color: aqua;">我是头部</td>
			</tr>
			<tr>
				<td width="30%" height="80%" style="background-color: beige;">我是左边</td>
				<td width="70%" height="80%" style="background-color: pink;">我是右边</td>
			</tr>
			<tr>
				<td width="100%" height="10%" style="background-color: blue;" colspan="2">我是底部</td>
			</tr>
		</table>
	</body>
</html>