WEB前端网页设计 CSS 网页布局
warning:
这篇文章距离上次修改已过438天，其中的内容可能已经有所变动。
在CSS中实现一个简单的网页布局，可以使用CSS Flexbox或Grid布局系统。以下是一个使用Flexbox布局的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Layout</title>
<style>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
background: #f2f2f2;
padding: 1em;
text-align: center;
}
main {
flex: 1;
padding: 2em;
}
.content {
display: flex;
justify-content: space-around;
}
.sidebar {
width: 20%;
background: #e0e0e0;
padding: 1em;
}
.main-content {
width: 60%;
padding: 1em;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<main>
<div class="content">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
</main>
<footer>Footer</footer>
</div>
</body>
</html>这个示例创建了一个带有头部、尾部、侧边栏和主要内容区的简单网页布局。头部和尾部占据固定的空间，主要内容区左右被侧边栏包围。通过Flexbox的flex-direction: column属性，容器内的子元素以列的形式排列，flex: 1使得main区域可以根据可用空间自动伸缩。
评论已关闭