css-页面布局

作者：System 时间：2024年08月13日分类：所有,css 字数：857

这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。

要使用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>Flexbox Layout Example</title>
<style>
  .container {
    display: flex; /* 指定为Flexbox布局 */
    height: 100vh; /* 使用视口高度 */
  }
 
  .sidebar {
    flex: 0 0 200px; /* 不伸缩，固定宽度200px */
    background-color: #f2f2f2; /* 侧边栏背景色 */
  }
 
  .main-content {
    flex: 1; /* 伸缩区域，占据剩余空间 */
    background-color: #ffffff; /* 主内容区背景色 */
    overflow: auto; /* 长内容时自动出现滚动条 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="main-content">Main Content</div>
</div>
</body>
</html>

这个例子创建了一个具有侧边栏和主内容区的页面布局。侧边栏宽度固定为200px，主内容区自动占据剩余空间，并在内容超出时显示滚动条。这是一个简洁而有效的Flexbox布局示例。

css-页面布局

评论已关闭

推荐阅读