浮动定位技术制作简单页面 - HTML 代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>浮动定位技术制作简单页面</title>
	<style>
		.container {
			width: 80%;
			margin: 0 auto;
		}
		.header {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
		.navbar {
			background-color: #f1f1f1;
			overflow: hidden;
			padding: 10px;
		}
		.navbar a {
			float: left;
			display: block;
			color: #333;
			text-align: center;
			padding: 10px;
			text-decoration: none;
		}
		.navbar a:hover {
			background-color: #ddd;
			color: #333;
		}
		.content {
			float: left;
			width: 70%;
			padding: 10px;
		}
		.sidebar {
			float: right;
			width: 30%;
			padding: 10px;
		}
		.footer {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
			clear: both;
		}
	</style>
</head>
<body>
	<div class='container'>
		<div class='header'>
			<h1>我的网站</h1>
		</div>
		<div class='navbar'>
			<a href='#'>首页</a>
			<a href='#'>关于我们</a>
			<a href='#'>服务</a>
			<a href='#'>联系我们</a>
		</div>
		<div class='content'>
			<h2>欢迎来到我的网站</h2>
			<p>这是一个基于浮动定位技术制作的简单页面，用于演示如何使用浮动定位技术布局。</p>
			<p>浮动定位技术是一种常用的布局方式，可以用来实现多栏布局、响应式布局等。它通过将元素向左或向右浮动，让其脱离正常的文档流，从而实现布局的自由度。</p>
			<p>本页面使用了浮动定位技术来实现导航栏、侧边栏和主要内容的布局。你可以通过调整浮动方向、宽度和位置来实现不同的布局效果。</p>
		</div>
		<div class='sidebar'>
			<h3>侧边栏</h3>
			<p>这是一个示例侧边栏，可以用来展示一些相关的信息、广告或其他内容。</p>
		</div>
		<div class='footer'>
			<p>版权所有 &copy; 2021 我的网站</p>
		</div>
	</div>
</body>
</html>