css制作固定模板
使用CSS创建固定模板
固定模板通常指具有固定头部、底部或侧边栏的布局结构。以下是几种常见实现方法：
固定头部和底部
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial;
}
.header {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background: #333;
color: white;
text-align: center;
line-height: 60px;
}
.content {
margin-top: 60px;
margin-bottom: 60px;
padding: 20px;
height: calc(100vh - 140px);
overflow-y: auto;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background: #333;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="header">头部区域</div>
<div class="content">主要内容区域</div>
<div class="footer">底部区域</div>
</body>
</html>固定侧边栏布局
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 100vh;
background: #333;
color: white;
}
.main-content {
margin-left: 200px;
padding: 20px;
}
</style>
</head>
<body>
<div class="sidebar">侧边栏</div>
<div class="main-content">主要内容区域</div>
</body>
</html>使用CSS Grid创建固定模板
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100vh;
}
header {
grid-row: 1;
background: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
grid-row: 2;
padding: 20px;
}
footer {
grid-row: 3;
background: #333;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>头部区域</header>
<main>主要内容区域</main>
<footer>底部区域</footer>
</body>
</html>响应式固定模板
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial;
}
.container {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 250px;
background: #333;
color: white;
position: fixed;
height: 100vh;
}
.content {
margin-left: 250px;
padding: 20px;
flex: 1;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.content {
margin-left: 0;
}
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">侧边栏</div>
<div class="content">主要内容区域</div>
</div>
</body>
</html>关键CSS属性说明
position: fixed- 使元素固定在视口中top/bottom/left/right- 控制固定元素的位置calc()- 用于动态计算尺寸vh- 视口高度单位grid- CSS网格布局flex- 弹性盒布局@media- 响应式设计媒体查询
这些方法可以根据具体需求组合使用，创建出各种固定布局模板。
