<!DOCTYPE html>
<html>
<head>
<title>HTML布局示例</title>
<style>
/* 定义一个容器，使用flex布局 */
.container {
display: flex;
height: 100vh; /* 设置容器高度为视口高度 */
}
/* 左侧栏样式 */
.sidebar {
width: 200px;
background-color: #f4f4f4;
padding: 20px;
}
/* 主内容区样式 */
.main-content {
flex-grow: 1; /* 让主内容区占据剩余空间 */
padding: 20px;
background-color: #ffffff;
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 左侧栏 -->
<div class="sidebar">
<h3>导航栏</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!-- 主内容区 -->
<div class="main-content">
<h1>欢迎来到我们的网站</h1>
<p>这是一个简单的HTML布局示例，展示了如何使用Flexbox创建一个两栏布局。</p>
</div>
</div>
</body>
</html><div class="container">），里面有两个子元素：左侧栏（<div class="sidebar">）和主内容区（<div class="main-content">）。.container设置为display: flex，使它的子元素在水平方向上排列。.sidebar固定宽度为200px，而.main-content通过flex-grow: 1属性自动扩展以填充剩余的空间。100vh作为容器的高度，整个布局会根据浏览器窗口的高度调整大小。上一篇：html 标签作用
下一篇：html网站
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站