[HTML]Web前端开发技术10（HTMLCSSJavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS+DIV页面布局</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
.content {
margin-top: 50px;
padding: 10px;
}
.sidebar {
float: left;
width: 200px;
height: calc(100vh - 50px);
background-color: #f2f2f2;
padding: 10px;
overflow: auto;
}
.main-content {
margin-left: 210px; /* 宽度为200px + 10px边距 */
height: calc(100vh - 50px);
background-color: #fff;
padding: 10px;
overflow: auto;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="header">
<h1>页头</h1>
</div>
<div class="content">
<div class="sidebar">
<h2>侧边栏</h2>
<p>侧边栏内容...</p>
</div>
<div class="main-content">
<h2>主要内容</h2>
<p>主要内容区域...</p>
</div>
</div>
<div class="footer">
<h1>页脚</h1>
</div>
</body>
</html>这个代码实例展示了如何使用CSS创建一个固定头部和底部的布局，并且使用DIV元素来构建一个两栏的主要内容区域。侧边栏使用了固定宽度并且能够在高度上自适应屏幕，主要内容区域则根据侧边栏宽度进行了适当的偏移。在这个简单的例子中，我们也看到了如何使用CSS的calc()函数来进行计算，以便于实现更复杂的布局。
评论已关闭