Css进阶练习(实现抽屉网样式布局)

抽屉网是一种常见的网页布局，可以用 CSS 实现。下面是一个简单的实现方法：

HTML 结构：

<div class="container">
  <div class="content">
    <!-- 网页主体内容 -->
  </div>
  <div class="drawer">
    <!-- 抽屉内容 -->
  </div>
</div>

CSS 样式：

.container {
  display: flex;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.content {
  flex: 1; /* 设置主体内容占据剩余空间 */
  overflow: auto; /* 设置滚动条 */
}

.drawer {
  width: 320px; /* 设置抽屉宽度 */
  background-color: #f0f0f0; /* 设置抽屉背景色 */
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2); /* 设置抽屉阴影 */
  transition: transform 0.3s ease-out; /* 设置过渡效果 */
  transform: translateX(-100%); /* 设置初始位置 */
}

.drawer.active {
  transform: translateX(0); /* 设置展开后位置 */
}

JavaScript 代码：

var container = document.querySelector('.container');
var drawer = document.querySelector('.drawer');

function toggleDrawer() {
  drawer.classList.toggle('active'); /* 切换抽屉的展开/关闭状态 */
}

container.addEventListener('click', function(event) {
  if (event.target === container) {
    toggleDrawer(); /* 点击容器展开/关闭抽屉 */
  }
});

这样就完成了一个简单的抽屉网布局。当点击容器时，抽屉会展开或关闭。你可以根据自己的需求进一步美化样式，添加更多功能。