HTML 页面布局案例及代码。
以下是一个简单的HTML页面布局示例，使用了HTML5和CSS进行页面结构的定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局案例</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
margin: 15px 200px;
line-height: 2em;
}
.sidebar {
float: right;
width: 200px;
background-color: #f2f2f2;
padding: 15px;
margin-left: -200px;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h1>我的网站</h1>
</div>
<div class="content">
<h2>主要内容</h2>
<p>这里是主要内容区域...</p>
</div>
<div class="sidebar">
<h2>侧边栏</h2>
<p>这里是侧边栏内容...</p>
</div>
<div class="footer">
<p>版权所有 © 2023</p>
</div>
</body>
</html>这个示例展示了一个典型的三栏布局，其中头部(".header")、内容(".content")、侧边栏(".sidebar")和底部(".footer")是页面的主要构成部分。同时，示例中包含了CSS样式，用于控制各个区域的样式和布局。这个简单的布局可以作为学习者创建自己网页布局的起点。
评论已关闭