使用浮动定位技术制作简单网页 - HTML 示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>使用浮动定位技术制作简单网页 - HTML 示例</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
		.header {
			background-color: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
		}
		.navbar {
			background-color: #f2f2f2;
			height: 50px;
			padding: 10px;
			overflow: hidden;
		}
		.navbar a {
			float: left;
			display: block;
			color: #333;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			font-size: 17px;
		}
		.navbar a:hover {
			background-color: #ddd;
			color: #333;
		}
		.sidebar {
			background-color: #f2f2f2;
			float: left;
			width: 20%;
			padding: 20px;
			box-sizing: border-box;
		}
		.content {
			float: left;
			width: 80%;
			padding: 20px;
			box-sizing: border-box;
		}
		.footer {
			background-color: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
			clear: both;
		}
	</style>
</head>
<body>
	<div class='header'>
		<h1>欢迎来到我的网站</h1>
	</div>
	<div class='navbar'>
		<a href='#'>首页</a>
		<a href='#'>关于我们</a>
		<a href='#'>联系我们</a>
		<a href='#'>文章</a>
	</div>
	<div class='sidebar'>
		<h3>侧边栏</h3>
		<p>这是侧边栏的内容</p>
		<p>这是侧边栏的内容</p>
		<p>这是侧边栏的内容</p>
	</div>
	<div class='content'>
		<h2>欢迎来到我的网站</h2>
		<p>这是我的网站的内容</p>
		<p>这是我的网站的内容</p>
		<p>这是我的网站的内容</p>
	</div>
	<div class='footer'>
		<p>版权所有 &copy; 2021</p>
	</div>
</body>
</html>