响应式网页设计笔记

1. 准备工作

1.1 google字体下载

到google font官网下载要用的字体，可以用cdn的方式导入，也可以下载下来放在项目目录的fonts目录下导入

  1. cdn导入

    <!-- google fonts Montserrat -->
<link
  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap"
  rel="stylesheet"
/>

  2. 本地保存

    先在css中用@font-face声明字体

    @font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

    然后再在要用该字体的地方用font-family属性即可

    * {
  font-family: "Montserrat", sans-serif;
  padding: 0;
  margin: 0;
}

1.2 scss编译成css

使用一个简单易用的scss编译器scout-app，下载地址：https://scout-app.io/

2. 导航栏

2.1 导航栏html框架

<body>
  <header>
    <nav class="container">
      <a href="#">
        <img src="img/logo.png" />
      </a>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </header>
</body>

2.2 预定义基本标签的样式

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

* {
  font-family: "Montserrat", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; // 平滑过渡
}

ul {
  list-style: none; // 去掉无序列表前面的点点
}

a {
  text-decoration: none; // 将 a 标签的下划线去除
}

h2 {
  font-weight: 500;
  font-size: 36px;
  color: #283d50;
  margin-bottom: 60px;
}

h3 {
  color: #444;
  font-size: 24px;
  margin-bottom: 20px;
}

h4 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #283d50;
}

2.3 导航栏固定以及添加阴影

// nav
header {
  height: 79px;
  position: fixed; // 固定导航栏 -- 无论滚动条怎么滑动，导航栏都不会消失
  width: 100%; // 任何宽度比例下导航栏都要保持铺满显示屏 方便响应式设计
  z-index: 3;
  background-color: #fff;
  // 参数: X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.3);  // rgba 的第四个参数是不透明度 越大越不透明 0 则为透明
}

2.4 菜单响应式

// nav
header {
  height: 79px;
  position: fixed; // 固定导航栏 -- 无论滚动条怎么滑动，导航栏都不会消失
  width: 100%; // 任何宽度比例下导航栏都要保持铺满显示屏 方便响应式设计
  z-index: 3;
  background-color: #fff;
  // 参数: X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.3); // rgba 的第四个参数是不透明度 越大越不透明 0 则为透明

  nav {
    display: flex;
    align-items: center;
    padding: 25px 10px; // 上下 25px 左右 10px

    img {
      height: 25px; // 只设定图片的高度或者宽度能够等比例缩放
    }

    ul {
      /**
       * 导航栏响应式的灵魂所在！！！
       * 菜单设置为不显示 然后用媒体查询来根据 viewport 的宽度
       * 来更新 ul 的显示状态
       */
      display: none;
      @media (min-width: 800px) {
        // viewport 宽度大于等于 800px 时改为 flex 布局
        display: flex;
        // 菜单要靠在右边 所以用 flex-end
        justify-content: flex-end;
        /**
         * flex: flex-grow flex-shrink flex-basis
         * flex-grow: 给单独元素设置 值越大 则其所占比例越大
         *            这里设置为 1 就是为了让菜单铺满整个导航栏
         *            如果不设置为 1 则会和 logo 一起自适应元素大小占据导航栏
        */
        flex: 1;
      }
    }
  }
}

使用scss的好处就是能够嵌套css选择器，并且能够写类似C语言的双斜线注释和多行注释

这里flex如果设置为0，效果如下

flex设置为0的效果

而设置为1，则效果如下，具体原因注释中已经说明

flex设置为1的效果

2.5 使用辅助工具类让导航栏的内容有外边距并居中

<nav>标签上设置了一个辅助类class="container"，container的作用就是让元素能够有一定的外边距并且水平居中显示

// utility classes

// 让导航栏能够有一定的外边距并且水平居中显示
.container {
  max-width: 1140px;
  margin: 0 auto;
}

2.6 修改菜单内的a标签样式

a {
  color: var(--menu-font-color);
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px;
  margin-left: 15px;
}

--menu-font-color是一个定义在header标签选择器内的变量

header {
  --menu-font-color: #004289;
}

2.7 完成效果

宽度大于`800px`时的导航栏
宽度小于800px时导航栏的宽度

当前阶段的全部代码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- google fonts Montserrat -->
    <!-- <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    /> -->
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
      integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <nav class="container">
        <a href="#">
          <img src="img/logo.png" />
        </a>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

style.scss

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

* {
  font-family: "Montserrat", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; // 平滑过渡
}

ul {
  list-style: none; // 去掉无序列表前面的点点
}

a {
  text-decoration: none; // 将 a 标签的下划线去除
}

h2 {
  font-weight: 500;
  font-size: 36px;
  color: #283d50;
  margin-bottom: 60px;
}

h3 {
  color: #444;
  font-size: 24px;
  margin-bottom: 20px;
}

h4 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #283d50;
}

// nav
header {
  --menu-font-color: #004289;

  height: 79px;
  position: fixed; // 固定导航栏 -- 无论滚动条怎么滑动，导航栏都不会消失
  width: 100%; // 任何宽度比例下导航栏都要保持铺满显示屏 方便响应式设计
  z-index: 3;
  background-color: #fff;
  // 参数: X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.3); // rgba 的第四个参数是不透明度 越大越不透明 0 则为透明

  nav {
    display: flex;
    align-items: center;
    padding: 25px 10px; // 上下 25px 左右 10px

    img {
      height: 25px; // 只设定图片的高度或者宽度能够等比例缩放
    }

    ul {
      /**
       * 导航栏响应式的灵魂所在！！！
       * 菜单设置为不显示 然后用媒体查询来根据 viewport 的宽度
       * 来更新 ul 的显示状态
       */
      display: none;
      @media (min-width: 800px) {
        // viewport 宽度大于等于 800px 时改为 flex 布局
        display: flex;
        // 菜单要靠在右边 所以用 flex-end
        justify-content: flex-end;
        /**
         * flex: flex-grow flex-shrink flex-basis
         * flex-grow: 给单独元素设置 值越大 则其所占比例越大
         *            这里设置为 1 就是为了让菜单铺满整个导航栏
         *            如果不设置为 1 则会和 logo 一起自适应元素大小占据导航栏
        */
        flex: 1;
      }

      a {
        color: var(--menu-font-color);
        font-size: 14px;
        font-weight: 500;
        padding: 0 15px;
        margin-left: 15px;
      }
    }
  }
}

// utility classes

// 让导航栏能够有一定的外边距并且水平居中显示
.container {
  max-width: 1140px;
  margin: 0 auto;
}

3. Hero介绍页

3.1 Hero html框架

<!-- Hero -->
<section class="hero">
  <div class="container flex-row">
    <div class="left">
      <h2>
        We provide<br /><span><u>solutions</u></span
        ><br />
        for your business!
      </h2>
      <div class="buttons">
        <a href="#" class="btn">Get Started</a>
        <a href="#" class="btn btn-light">Our Services</a>
      </div>
    </div>
    <img src="img/intro-img.svg" alt="" />
  </div>
</section>

class=left样式是为了让文字和按钮在左边，而图片在右边，由于section只是个普通的块级元素，所以其内部的元素都是垂直排列，为了使其左右排列，要使用flex布局，考虑到flex布局经常会用，所以创建一个工具类样式flex-row，并且btn和btn-light也是工具类样式，只要用到按钮就可以套用这个样式

3.2 工具类样式

flex-row

// flex 布局样式
.flex-row {
  display: flex;
}

btn

// 按钮样式
.btn {
  cursor: pointer;
  display: inline-block;
  color: var(--btn-font-color);
  background-color: var(--btn-bg-color);
  border-radius: 45px;
  padding: 14px 40px;
  font-weight: 700;
  border: 2px solid var(--btn-border-color);
  transition: 500ms ease all;

  &:hover {
    background-color: var(--btn-hover-bg-color);
    border-color: var(--btn-hover-border-color);
  }
}

btn-light

// 颜色和 btn 相反 其他都一样
.btn-light {
  background-color: var(--btn-hover-bg-color);
  border-color: var(--btn-hover-border-color);

  &:hover {
    background-color: var(--btn-bg-color);
    border-color: var(--btn-border-color);
  }
}

3.3 引入hero背景图片

.hero {
  padding: 150px 0;
  // center bottom 是 background-position 能让图片水平居中垂直贴进容器底部
  background: url("/img/intro-bg.png") center bottom no-repeat;
  background-size: cover; // 让图片铺满容器
}

3.4 hero在移动端以column显示

PC端时可以让.left和img水平显示，而移动端由于宽度有限，所以要让其内容变为垂直显示，即把flex布局的方向改为column，以移动端优先，先设计移动端的样式，然后加上媒体查询调整PC端的样式

由于这里涉及到的flex布局方式的改变仅限于.hero中的元素，所以应当在.hero选择器的内部嵌套处理

以下所有样式都是以移动端优先，pc端的单独在媒体查询中编写

// hero

.hero {
  ...

  .flex-row {
    // 移动端的 flex-direction 应以 column 显示
    flex-direction: column;
    align-items: center;
    padding: 0 32px;
    gap: 32px; // 用来设置网格行与列之间的间隙
    @media (min-width: 1000px) {
      // pc 端以 row 显示
      flex-direction: row;
    }
  }
}

3.5 hero移动端的字体

// hero

.hero {
  ...

  h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 32px;
    text-align: center;
    @media (min-width: 1000px) {
      text-align: initial;
      font-size: 48px;
    }
  }
}

3.6 移动端图片和信息垂直显示

// hero

.hero {
  ...

  .left {
    flex: 1;
    order: 2; // 移动端中文字和按钮放在图片的下面显示
    justify-content: center;
    align-items: center;
    @media (min-width: 1000px) {
      order: 1; // pc端中文字和按钮在图片左边显示
    }
  }

  img {
    display: flex;
    flex: 1;
    order: 1;
    width: 80%;
    @media (min-width: 1000px) {
      order: 2;
    }
  }
}

3.7 移动端hero按钮水平居中

// hero

.hero {
  ...

  .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    @media (min-width: 1000px) {
      flex-direction: row;
    }

    .btn {
      text-align: center;
      width: 200px;
      margin-bottom: 16px;
      @media (min-width: 1000px) {
        margin-right: 16px;
      }
    }
  }
}

3.8 完成效果

Hero介绍页PC端
Hero介绍页移动端

当前阶段的全部代码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- google fonts Montserrat -->
    <!-- <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    /> -->
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
      integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- Nav -->
    <header>
      <nav class="container">
        <a href="#">
          <img src="img/logo.png" />
        </a>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>
    <!-- Hero -->
    <section class="hero">
      <div class="container flex-row">
        <div class="left">
          <h2>
            We provide<br /><span><u>solutions</u></span
            ><br />
            for your business!
          </h2>
          <div class="buttons">
            <a href="#" class="btn">Get Started</a>
            <a href="#" class="btn btn-light">Our Services</a>
          </div>
        </div>
        <img src="img/intro-img.svg" alt="" />
      </div>
    </section>
  </body>
</html>

style.scss

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

* {
  font-family: "Montserrat", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; // 平滑过渡
}

ul {
  list-style: none; // 去掉无序列表前面的点点
}

a {
  text-decoration: none; // 将 a 标签的下划线去除
}

h2 {
  font-weight: 500;
  font-size: 36px;
  color: #283d50;
  margin-bottom: 60px;
}

h3 {
  color: #444;
  font-size: 24px;
  margin-bottom: 20px;
}

h4 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #283d50;
}

:root {
  /* menu var */
  --menu-font-color: #004289; // 菜单栏字体的颜色
  /* btn var */
  --btn-font-color: #fff; // 按钮中的字体颜色
  --btn-bg-color: #0071f9; // 按钮背景颜色
  --btn-hover-bg-color: transparent; // 按钮 hover 时的背景颜色
  --btn-border-color: transparent; // 按钮边框颜色
  --btn-hover-border-color: #fff; // 按钮 hover 时边框颜色
}

// nav
header {
  height: 79px;
  position: fixed; // 固定导航栏 -- 无论滚动条怎么滑动，导航栏都不会消失
  width: 100%; // 任何宽度比例下导航栏都要保持铺满显示屏 方便响应式设计
  z-index: 3;
  background-color: #fff;
  // 参数: X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.3); // rgba 的第四个参数是不透明度 越大越不透明 0 则为透明

  nav {
    display: flex;
    align-items: center;
    padding: 25px 10px; // 上下 25px 左右 10px

    img {
      height: 25px; // 只设定图片的高度或者宽度能够等比例缩放
    }

    ul {
      /**
       * 导航栏响应式的灵魂所在！！！
       * 菜单设置为不显示 然后用媒体查询来根据 viewport 的宽度
       * 来更新 ul 的显示状态
       */
      display: none;
      @media (min-width: 800px) {
        // viewport 宽度大于等于 800px 时改为 flex 布局
        display: flex;
        // 菜单要靠在右边 所以用 flex-end
        justify-content: flex-end;
        /**
         * flex: flex-grow flex-shrink flex-basis
         * flex-grow: 给单独元素设置 值越大 则其所占比例越大
         *            这里设置为 1 就是为了让菜单铺满整个导航栏
         *            如果不设置为 1 则会和 logo 一起自适应元素大小占据导航栏
        */
        flex: 1;
      }

      a {
        color: var(--menu-font-color);
        font-size: 14px;
        font-weight: 500;
        padding: 0 15px;
        margin-left: 15px;
      }
    }
  }
}

// hero

.hero {
  display: flex;
  justify-content: center;
  padding: 150px 0;
  // center bottom 是 background-position 能让图片水平居中垂直贴进容器底部
  background: url("/img/intro-bg.png") center bottom no-repeat;
  background-size: cover; // 让图片铺满容器

  .flex-row {
    // 移动端的 flex-direction 应以 column 显示
    flex-direction: column;
    align-items: center;
    padding: 0 32px;
    gap: 32px; // 用来设置网格行与列之间的间隙
    @media (min-width: 1000px) {
      // pc 端以 row 显示
      flex-direction: row;
    }
  }

  h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 32px;
    text-align: center;
    @media (min-width: 1000px) {
      text-align: initial;
      font-size: 48px;
    }
  }

  .left {
    flex: 1;
    order: 2; // 移动端中文字和按钮放在图片的下面显示
    justify-content: center;
    align-items: center;
    @media (min-width: 1000px) {
      order: 1; // pc端中文字和按钮在图片左边显示
    }
  }

  img {
    display: flex;
    flex: 1;
    order: 1;
    width: 80%;
    @media (min-width: 1000px) {
      order: 2;
    }
  }

  .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    @media (min-width: 1000px) {
      flex-direction: row;
    }

    .btn {
      text-align: center;
      width: 200px;
      margin-bottom: 16px;
      @media (min-width: 1000px) {
        margin-right: 16px;
      }
    }
  }
}

// utility classes

// 让容器能够有一定的外边距并且水平居中显示
.container {
  max-width: 1140px;
  margin: 0 auto;
}

// flex 布局样式
.flex-row {
  display: flex;
}

// 按钮样式
.btn {
  cursor: pointer;
  display: inline-block;
  color: var(--btn-font-color);
  background-color: var(--btn-bg-color);
  border-radius: 45px;
  padding: 14px 40px;
  font-weight: 700;
  border: 2px solid var(--btn-border-color);
  transition: 500ms ease all;

  &:hover {
    background-color: var(--btn-hover-bg-color);
    border-color: var(--btn-hover-border-color);
  }
}

// 颜色和 btn 相反 其他都一样
.btn-light {
  background-color: var(--btn-hover-bg-color);
  border-color: var(--btn-hover-border-color);

  &:hover {
    background-color: var(--btn-bg-color);
    border-color: var(--btn-border-color);
  }
}

4. About us

4.1 About us html框架

<!-- About us -->
<section class="about about-1">
  <div class="container">
    <h2>About us</h2>
    <div class="flex-row">
      <div class="left">
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Necessitatibus libero facere repellendus ipsum distinctio velit
          voluptatibus. Amet quam eligendi impedit cum, nam id inventore
          quibusdam neque eos, quae voluptatibus qui.
        </p>
        <!-- Title #1 -->
        <div class="flex-row">
          <i class="fas fa-bullhorn"></i>
          <div class="info">
            <h4>Title #1</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
              error molestias, magni laborum recusandae voluptatem.
            </p>
          </div>
        </div>
        <!-- Title #2 -->
        <div class="flex-row">
          <i class="fas fa-bullhorn"></i>
          <div class="info">
            <h4>Title #1</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
              error molestias, magni laborum recusandae voluptatem.
            </p>
          </div>
        </div>
        <!-- Title #3 -->
        <div class="flex-row">
          <i class="fas fa-bullhorn"></i>
          <div class="info">
            <h4>Title #1</h4>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
              error molestias, magni laborum recusandae voluptatem.
            </p>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="img/about-img.svg" alt="" />
      </div>
      <!-- <img src="" alt=""> -->
    </div>
  </div>
</section>
<section class="about about-2">
  <div class="container flex-row">
    <div class="left">
      <img src="img/about-extra-1.svg" alt="" />
    </div>
    <div class="right">
      <h3>About us secondary content title</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo maxime
        repudiandae praesentium? Incidunt delectus molestiae ipsum? Deleniti
        in rem sequi.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam
        harum inventore impedit voluptatum fugit eos. Qui unde soluta quis
        voluptatem?
      </p>
    </div>
  </div>
</section>
<section class="about about-3">
  <div class="container flex-row">
    <div class="left">
      <h3>About us secondary content title</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam
        voluptas porro voluptatum saepe molestiae ullam ut nobis assumenda
        sapiente repudiandae.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
        tempore dolorum labore accusantium ducimus nesciunt quos architecto
        id dolorem eum?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eos
        illum odit ratione cum similique magnam atque culpa consequuntur
        iusto!
      </p>
    </div>
    <div class="right">
      <img src="img/about-extra-2.svg" alt="" />
    </div>
  </div>
</section>

4.2 基本布局样式

// about us

.about {
  img {
    width: 60%;
    @media (min-width: 900px) {
      width: 100%;
    }
  }

  h2 {
    text-align: center;
  }

  p {
    line-height: 1.7;
  }

  .flex-row {
    gap: 50px;
    flex-direction: column;
    @media (min-width: 900px) {
      flex-direction: row;
    }
  }

  .left,
  .right {
    flex: 1; // 让左右空间铺满且各占一半
  }
}

4.3 宽度减小到500px以下时纵向显示

// about us

.about {
  ...

  // 对 about-1 中的文本格式进行调整
  .left {
    .flex-row {
      flex-direction: column; // 宽度不够时纵向水平居中显示
      align-items: center;
      gap: 0; // 将 left 区域内的图标和文本之间的间距移除
      @media (min-width: 500px) {
        flex-direction: row; // 宽度足够时横向显示
      }
    }
  }
}

4.4 调节info中的文本格式

// about us

.about {
  ...

  // 对 about-1 中的文本格式进行调整
  .left {
    ...

    .info {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      @media (min-width: 500px) {
        margin-top: 0;
        align-items: initial;
      }

      p {
        color: #444;
        font-size: 14px;
      }
    }
  }
}

4.5 图标样式

// about us

.about {
  ...

  // 对 about-1 中的文本格式进行调整
  .left {
    ...

    i {
      // 图标垂直水平居中
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
      height: 70px;
      border: 2px solid var(--menu-font-color);
      border-radius: 50%;
      transition: 500ms ease all;
      color: var(--menu-font-color);
      font-size: 24px;
      @media (min-width: 500px) {
        margin-right: 16px;
      }
        
      &:hover {
        background-color: var(--icon-color);
        border-color: transparent;
        color: #fff;
      }
    }
  }
}

4.6 about-1样式

要让.about-1中的文本在纵向排列时水平居中显示

.about-1 {
  .left {
    text-align: center;
    @media (min-width: 500px) {
      text-align: initial;
    }
  }
}

4.7 about-1和about-3样式

让.about-1和.about-3中的图片在纵向排列时水平居中显示

.about-1,
.about-3 {
  .right {
    display: flex;
    justify-content: center;
    @media (min-width: 900px) {
      align-items: start;
    }
  }
}

4.8 about-2样式

让.about-2在水平排列时，图片排在文本前面，而垂直排列时，图片排在文本后面

// 纵向排列时 让图片排在文本下面 -- 改变 order
.about-2 {
  .left {
    order: 2;
    display: flex;
    justify-content: center;
    @media (min-width: 900px) {
      order: 1;
      align-items: start;
    }
  }

  .right {
    order: 1;
    @media (min-width: 900px) {
      order: 2;
    }
  }
}

.about-2,
.about-3 {
  p {
    margin-bottom: 20px;
  }
}

4.9 multiple section styles

给具有相同class的类设置的样式放在该区域中，如这里有三个about样式，就将它们的共同样式都写在该区域里

共同样式为内边距

// multiple section styles

.about {
  padding: 50px 20px;
  @media (min-width: 900px) {
    padding: 100px 20px;
  }
}

4.10 完成效果

About us PC端 1
About us PC端 2
About us PC端 3
About us 移动端 1_1
About us 移动端 1_2
About us 移动端 2
About us 移动端 3

当前阶段的全部代码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- google fonts Montserrat -->
    <!-- <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    /> -->
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
      integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- Nav -->
    <header>
      <nav class="container">
        <a href="#">
          <img src="img/logo.png" />
        </a>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>
    <!-- Hero -->
    <section class="hero">
      <div class="container flex-row">
        <div class="left">
          <h2>
            We provide<br /><span><u>solutions</u></span
            ><br />
            for your business!
          </h2>
          <div class="buttons">
            <a href="#" class="btn">Get Started</a>
            <a href="#" class="btn btn-light">Our Services</a>
          </div>
        </div>
        <img src="img/intro-img.svg" alt="" />
      </div>
    </section>
    <!-- About us -->
    <section class="about about-1">
      <div class="container">
        <h2>About us</h2>
        <div class="flex-row">
          <div class="left">
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Necessitatibus libero facere repellendus ipsum distinctio velit
              voluptatibus. Amet quam eligendi impedit cum, nam id inventore
              quibusdam neque eos, quae voluptatibus qui.
            </p>
            <!-- Title #1 -->
            <div class="flex-row">
              <i class="fas fa-bullhorn"></i>
              <div class="info">
                <h4>Title #1</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
                  error molestias, magni laborum recusandae voluptatem.
                </p>
              </div>
            </div>
            <!-- Title #2 -->
            <div class="flex-row">
              <i class="fas fa-balance-scale"></i>
              <div class="info">
                <h4>Title #1</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
                  error molestias, magni laborum recusandae voluptatem.
                </p>
              </div>
            </div>
            <!-- Title #3 -->
            <div class="flex-row">
              <i class="fas fa-globe"></i>
              <div class="info">
                <h4>Title #1</h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
                  error molestias, magni laborum recusandae voluptatem.
                </p>
              </div>
            </div>
          </div>
          <div class="right">
            <img src="img/about-img.svg" alt="" />
          </div>
        </div>
      </div>
    </section>
    <section class="about about-2">
      <div class="container flex-row">
        <div class="left">
          <img src="img/about-extra-1.svg" alt="" />
        </div>
        <div class="right">
          <h3>About us secondary content title</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo maxime
            repudiandae praesentium? Incidunt delectus molestiae ipsum? Deleniti
            in rem sequi.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam
            harum inventore impedit voluptatum fugit eos. Qui unde soluta quis
            voluptatem?
          </p>
        </div>
      </div>
    </section>
    <section class="about about-3">
      <div class="container flex-row">
        <div class="left">
          <h3>About us secondary content title</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam
            voluptas porro voluptatum saepe molestiae ullam ut nobis assumenda
            sapiente repudiandae.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
            tempore dolorum labore accusantium ducimus nesciunt quos architecto
            id dolorem eum?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eos
            illum odit ratione cum similique magnam atque culpa consequuntur
            iusto!
          </p>
        </div>
        <div class="right">
          <img src="img/about-extra-2.svg" alt="" />
        </div>
      </div>
    </section>
  </body>
</html>

style.scss

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

* {
  font-family: "Montserrat", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; // 平滑过渡
}

ul {
  list-style: none; // 去掉无序列表前面的点点
}

a {
  text-decoration: none; // 将 a 标签的下划线去除
}

h2 {
  font-weight: 500;
  font-size: 36px;
  color: #283d50;
  margin-bottom: 60px;
}

h3 {
  color: #444;
  font-size: 24px;
  margin-bottom: 20px;
}

h4 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #283d50;
}

:root {
  /* menu var */
  --menu-font-color: #004289; // 菜单栏字体的颜色
  /* btn var */
  --btn-font-color: #fff; // 按钮中的字体颜色
  --btn-bg-color: #0071f9; // 按钮背景颜色
  --btn-hover-bg-color: transparent; // 按钮 hover 时的背景颜色
  --btn-border-color: transparent; // 按钮边框颜色
  --btn-hover-border-color: #fff; // 按钮 hover 时边框颜色
  /* about us var */
  --icon-color: #007bff;
}

// multiple section styles

.about {
  padding: 50px 20px;
  @media (min-width: 900px) {
    padding: 100px 20px;
  }
}

// nav
header {
  height: 79px;
  position: fixed; // 固定导航栏 -- 无论滚动条怎么滑动，导航栏都不会消失
  width: 100%; // 任何宽度比例下导航栏都要保持铺满显示屏 方便响应式设计
  z-index: 3;
  background-color: #fff;
  // 参数: X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.3); // rgba 的第四个参数是不透明度 越大越不透明 0 则为透明

  nav {
    display: flex;
    align-items: center;
    padding: 25px 10px; // 上下 25px 左右 10px

    img {
      height: 25px; // 只设定图片的高度或者宽度能够等比例缩放
    }

    ul {
      /**
       * 导航栏响应式的灵魂所在！！！
       * 菜单设置为不显示 然后用媒体查询来根据 viewport 的宽度
       * 来更新 ul 的显示状态
       */
      display: none;
      @media (min-width: 800px) {
        // viewport 宽度大于等于 800px 时改为 flex 布局
        display: flex;
        // 菜单要靠在右边 所以用 flex-end
        justify-content: flex-end;
        /**
         * flex: flex-grow flex-shrink flex-basis
         * flex-grow: 给单独元素设置 值越大 则其所占比例越大
         *            这里设置为 1 就是为了让菜单铺满整个导航栏
         *            如果不设置为 1 则会和 logo 一起自适应元素大小占据导航栏
        */
        flex: 1;
      }

      a {
        color: var(--menu-font-color);
        font-size: 14px;
        font-weight: 500;
        padding: 0 15px;
        margin-left: 15px;
      }
    }
  }
}

// hero

.hero {
  display: flex;
  justify-content: center;
  padding: 150px 0;
  // center bottom 是 background-position 能让图片水平居中垂直贴进容器底部
  background: url("/img/intro-bg.png") center bottom no-repeat;
  background-size: cover; // 让图片铺满容器

  .flex-row {
    // 移动端的 flex-direction 应以 column 显示
    flex-direction: column;
    align-items: center;
    padding: 0 32px;
    gap: 32px; // 用来设置网格行与列之间的间隙
    @media (min-width: 1000px) {
      // pc 端以 row 显示
      flex-direction: row;
    }
  }

  h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 32px;
    text-align: center;
    @media (min-width: 1000px) {
      text-align: initial;
      font-size: 48px;
    }
  }

  .left {
    flex: 1;
    order: 2; // 移动端中文字和按钮放在图片的下面显示
    justify-content: center;
    align-items: center;
    @media (min-width: 1000px) {
      order: 1; // pc端中文字和按钮在图片左边显示
    }
  }

  img {
    display: flex;
    flex: 1;
    order: 1;
    width: 50%;
    @media (min-width: 1000px) {
      order: 2;
    }
  }

  .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    @media (min-width: 1000px) {
      flex-direction: row;
    }

    .btn {
      text-align: center;
      width: 200px;
      margin-bottom: 16px;
      @media (min-width: 1000px) {
        margin-right: 16px;
      }
    }
  }
}

// about us

.about {
  img {
    width: 60%;
    @media (min-width: 900px) {
      width: 100%;
    }
  }

  h2 {
    text-align: center;
  }

  p {
    line-height: 1.7;
  }

  .flex-row {
    gap: 50px;
    flex-direction: column;
    @media (min-width: 900px) {
      flex-direction: row;
    }
  }

  .left,
  .right {
    flex: 1; // 让左右空间铺满且各占一半
  }

  // 对 about-1 中的文本格式进行调整
  .left {
    .flex-row {
      flex-direction: column; // 宽度不够时纵向水平居中显示
      align-items: center;
      gap: 0; // 将 left 区域内的图标和文本之间的间距移除
      margin-top: 32px;
      @media (min-width: 500px) {
        flex-direction: row; // 宽度足够时横向显示
      }
    }

    .info {
      flex: 1; // 将 .info 的 flex 占比设为 1 才能让图标正常显示
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      @media (min-width: 500px) {
        margin-top: 0;
        align-items: initial;
      }

      p {
        color: #444;
        font-size: 14px;
      }
    }

    i {
      // 图标垂直水平居中
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
      height: 70px;
      border: 2px solid var(--icon-color);
      border-radius: 50%;
      transition: 500ms ease all;
      color: var(--icon-color);
      font-size: 24px;
      @media (min-width: 500px) {
        margin-right: 16px;
      }

      &:hover {
        background-color: var(--icon-color);
        border-color: transparent;
        color: #fff;
      }
    }
  }
}

.about-1 {
  .left {
    text-align: center;
    @media (min-width: 500px) {
      text-align: initial;
    }
  }
}

.about-1,
.about-3 {
  .right {
    display: flex;
    justify-content: center;
    @media (min-width: 900px) {
      align-items: start;
    }
  }
}

// 纵向排列时 让图片排在文本下面 -- 改变 order
.about-2 {
  .left {
    order: 2;
    display: flex;
    justify-content: center;
    @media (min-width: 900px) {
      order: 1;
      align-items: start;
    }
  }

  .right {
    order: 1;
    @media (min-width: 900px) {
      order: 2;
    }
  }
}

.about-2,
.about-3 {
  p {
    margin-bottom: 20px;
  }
}

// utility classes

// 让容器能够有一定的外边距并且水平居中显示
.container {
  max-width: 1140px;
  margin: 0 auto;
}

// flex 布局样式
.flex-row {
  display: flex;
}

// 按钮样式
.btn {
  cursor: pointer;
  display: inline-block;
  color: var(--btn-font-color);
  background-color: var(--btn-bg-color);
  border-radius: 45px;
  padding: 14px 40px;
  font-weight: 700;
  border: 2px solid var(--btn-border-color);
  transition: 500ms ease all;

  &:hover {
    background-color: var(--btn-hover-bg-color);
    border-color: var(--btn-hover-border-color);
  }
}

// 颜色和 btn 相反 其他都一样
.btn-light {
  background-color: var(--btn-hover-bg-color);
  border-color: var(--btn-hover-border-color);

  &:hover {
    background-color: var(--btn-bg-color);
    border-color: var(--btn-border-color);
  }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,053评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,527评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,779评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,685评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,699评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,609评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,989评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,654评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,890评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,394评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,976评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2赞 342

推荐阅读更多精彩内容

  • 页面布局
    本文主要讲述页面布局样式方面涉及的知识点，更全面的对CSS相应的技术进行归类、整理、说明，没有特别详细的技术要点说...
    Joel_zh阅读 832评论 0赞 1
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,304评论 2赞 66
  • 响应式 - 笔记
    笔记参考自《响应式Web设计：HTML5和CSS3实践》，2013年出版内容说不上最新。如下是全书的章的目录：第 ...
    于晓鱼阅读 915评论 0赞 1
  • 一个前端的矢量网页世界
    我是一个前端程序员，我有一个梦想，我希望我的网页在不同的显示器上表现一致，我很任性，我不喜欢用什么雪碧图去设置po...
    靠谱男青年奖得主阅读 4,751评论 17赞 164
  • 前端开发人员必看：改进网页设计的具体步骤
    我注意到很多网页开发人员都在费劲的进行设计，他们认为他们没有天生的设计天赋和不知道什么看起来很好，他们从头开始创作...
    phpCN中文网阅读 615评论 0赞 0