用grid布局画考拉，轻松搞定！

前端

2024-01-23 14:10:14

前言

在这个信息爆炸的时代，人们对视觉效果的要求越来越高，简单的文字已经不能满足人们的需求了。网页设计也随之发生变化，从早期的table布局，到后来的flex布局，再到现在的grid布局，布局方式越来越丰富，越来越灵活。

grid布局简介

grid布局又叫网格布局，是一种新的CSS模型，grid布局是将一个页面通过行和列划分成几个主要的区域，定义这些区域的大小和位置，然后将元素放入这些区域中。grid布局的优势在于：

易于使用：grid布局的语法非常简单，即使是初学者也可以轻松掌握。
强大的布局功能：grid布局提供了丰富的布局功能，可以轻松地创建复杂的布局。
响应式布局：grid布局是响应式的，这意味着它可以在不同的设备上自动调整布局。

使用grid布局画考拉

现在我们开始使用grid布局来创建一只可爱的考拉吧！

首先，我们需要创建一个HTML文件，并在其中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>考拉</h1>
    </div>
    <div class="body">
      <div class="head"></div>
      <div class="body"></div>
      <div class="arms"></div>
      <div class="legs"></div>
    </div>
    <div class="footer">
      <p>版权所有 © 2023</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

接下来，我们需要创建一个CSS文件，并在其中添加以下代码：

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器 */
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

/* 头部 */
.header {
  grid-row: 1;
  text-align: center;
}

/* 正文 */
.body {
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

/* 头部 */
.head {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background-color: #666;
  border-radius: 50%;
}

/* 身体 */
.body {
  grid-column: 1 / 5;
  grid-row: 3 / 5;
  background-color: #888;
  border-radius: 10px;
}

/* 手臂 */
.arms {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  background-color: #444;
  border-radius: 10px;
}

/* 腿 */
.legs {
  grid-column: 3 / 5;
  grid-row: 4 / 6;
  background-color: #444;
  border-radius: 10px;
}

/* 页脚 */
.footer {
  grid-row: 3;
  text-align: center;
}

最后，我们需要创建一个JavaScript文件，并在其中添加以下代码：

// 获取元素
const head = document.querySelector('.head');
const body = document.querySelector('.body');
const arms = document.querySelector('.arms');
const legs = document.querySelector('.legs');

// 添加事件监听器
head.addEventListener('click', function() {
  body.classList.toggle('active');
  arms.classList.toggle('active');
  legs.classList.toggle('active');
});