前言#

在学习CSS的布局之前，需要知道的一点是，不是一种布局，一个测量单位从头用尾，而是视情况使用，结合使用才是最终方案，每个布局和测量单位都有不同应用场景，而非谁淘汰谁，当然这其中会存在一些新方案和旧方案，比如rem和vw布局，在以前的项目中，可能会用到rem，但是现在新项目推荐使用vw，因为rem需要使用js动态计算，而vw是相对于视口计算，少了js，页面性能就更好，所以rem布局可以了解认识使用，但是新项目采用vw方案，理清思路之后，学习第一个布局流式布局，流体布局并不是一个完全独立新知识，所以这里会用一个demo演示，再后续的布局中，也会基于这个修改

仿慕课网首页#

页面结构布局#

基础骨架和reset.css

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>仿慕课网首页-流体布局</title>
7
  <link rel="stylesheet" href="../../../styles/reset.css">
8
</head>
9
<body>
10
  <!-- 头部 -->
11
  <header class="header-layout">头部</header>
12
  <!-- 主体 -->
13
  <div class="main-layout">
14
    <!-- 幻灯片 -->
15
    <div class="slider-layout"></div>
16
    <!-- 免费课程 -->
17
    <div class="course-layout">免费课程</div>
18
    <!-- 实战课程 -->
19
    <div class="course-layout">实战课程</div>
20
  </div>
21
  <!-- 标签栏 -->
22
  <div class="tabbar-layout">标签栏</div>
23
</body>
24
</html>

1
* {
2
  padding: 0;
3
  margin: 0;
4
  /* 防止盒子溢出 */
5
  box-sizing: border-box;
6
  outline: 0;
7
  /* 取消点击的时候高亮 */
8
  -webkit-tap-highlight-color: transparent;
9
}
10
a {
11
  text-decoration: none;
12
}
13
li {
14
  list-style: none;
15
}
16
img {
17
  /* display: block; */
18
  /* 图片铺满容器 */
19
  vertical-align: top;
20
}

布局layout样式

1
.header-layout {
2
  position: fixed;
3
  left: 0;
4
  top: 0;
5
  width: 100%;
6
  height: 48px;
7
  background-color: red;
8
  border-bottom: 1px solid #e8e8e8;
9
}
10

11
.main-layout {
12
  padding: 48px 0 48px 0;
13
}
14

15
.slider-layout {
16
  height: 134px;
17
  background-color: green;
18
  margin-bottom: 20px;
19
}
20

21
.course-layout {
22
  height: 382px;
23
  background-color: gray;
24
  margin-bottom: 10px;
25
}
26

27
.tabbar-layout {
28
  position: fixed;
29
  left: 0;
30
  bottom: 0;
31
  width: 100%;
32
  height: 48px;
33
  background-color: yellow;
34
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
35
}

头部#

1
  <!-- 头部 -->
2
  <header class="header-layout">
3
    <div class="header">
4
      <!-- logo -->
5
      <a href="" class="header-logo">
6
        <img src="../../../public/images/logo.png" alt="logo" class="header-logo-img">
7
      </a>
8
      <!-- 下拉框按钮 -->
9
      <button id="header-toggle" class="header-toggle">
10
        <span class="header-toggle-bar"></span>
11
        <span class="header-toggle-bar"></span>
12
        <span class="header-toggle-bar"></span>
13
      </button>
14
    </div>
15
  </header>

1
.header {
2
  width: 100%;
3
  height: 100%;
4
  background-color: #fff;
5
  padding: 0 20px;
6
}
7

8
.header-logo {
9
  float: left;
10
  height: 100%;
11
}
12

13
.header-logo-img {
14
  height: 30px;
15
  /* 居中=48-9-9-30，总高度48，图30，上外边距9，下外边距刚好也是9 */
16
  margin-top: 9px;
17
}
18

19
.header-toggle {
20
  float: right;
21
  padding: 10px;
22
  background-color: transparent;
23
  border: none;
24
  border-radius: 4px;
25
  margin-top: 4px;
26
}
27

28
.header-toggle-bar {
29
  display: block;
30
  width: 24px;
31
  height: 4px;
32
  background-color: #363636;
33
  border-radius: 2px;
34
}
35

36
.header-toggle-bar + .header-toggle-bar {
37
  margin-top: 4px;
38
}

主体部分#

幻灯片部分

1
 <!-- 幻灯片 -->
2
    <div class="slider-layout">
3
      <img src="../../../public/images/slider/1.jpg" alt="">
4
    </div>

1
 .slider-layout img {
2
      width: 100%;
3
    }

实战免费课程部分

1
    <!-- 免费课程 -->
2
    <div class="course-layout">
3
      <div class="course">
4
        <h2 class="course-title">免费课程</h2>
5
        <ul class="course-list">
6
          <li class="course-item">
7
            <a href="javascript:;">
8
              <p class="course-pic">
9
                <img src="../../../public/images/course_free/1.jpg" alt="" class="course-img">
10
              </p>
11
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
12
              <p class="course-price">免费</p>
13
            </a>
14
          </li>
15
          <li class="course-item">
16
            <a href="javascript:;">
17
              <p class="course-pic">
18
                <img src="../../../public/images/course_free/2.jpg" alt="" class="course-img">
19
              </p>
20
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
21
              <p class="course-price">免费</p>
22
            </a>
23
          </li>
24
          <li class="course-item">
25
            <a href="javascript:;">
26
              <p class="course-pic">
27
                <img src="../../../public/images/course_free/3.jpg" alt="" class="course-img">
28
              </p>
29
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
30
              <p class="course-price">免费</p>
31
            </a>
32
          </li>
33
          <li class="course-item">
34
            <a href="javascript:;">
35
              <p class="course-pic">
36
                <img src="../../../public/images/course_free/4.jpg" alt="" class="course-img">
37
              </p>
38
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
39
              <p class="course-price">免费</p>
40
            </a>
41
          </li>
42
        </ul>
43
      </div>
44
    </div>
45
    <!-- 实战课程 -->
46
    <div class="course-layout">
47
      <div class="course">
48
        <h2 class="course-title">实战课程</h2>
49
        <ul class="course-list">
50
          <li class="course-item">
51
            <a href="javascript:;">
52
              <p class="course-pic">
53
                <img src="../../../public/images/course_coding/1.jpg" alt="" class="course-img">
54
              </p>
55
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
56
              <p class="course-price">实战</p>
57
            </a>
58
          </li>
59
          <li class="course-item">
60
            <a href="javascript:;">
61
              <p class="course-pic">
62
                <img src="../../../public/images/course_coding/2.jpg" alt="" class="course-img">
63
              </p>
64
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
65
              <p class="course-price">实战</p>
66
            </a>
67
          </li>
68
          <li class="course-item">
69
            <a href="javascript:;">
70
              <p class="course-pic">
71
                <img src="../../../public/images/course_coding/3.jpg" alt="" class="course-img">
72
              </p>
73
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
74
              <p class="course-price">实战</p>
75
            </a>
76
          </li>
77
          <li class="course-item">
78
            <a href="javascript:;">
79
              <p class="course-pic">
80
                <img src="../../../public/images/course_coding/4.png" alt="" class="course-img">
81
              </p>
82
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
83
              <p class="course-price">实战</p>
84
            </a>
85
          </li>
86
          <li class="course-item">
87
            <a href="javascript:;">
88
              <p class="course-pic">
89
                <img src="../../../public/images/course_coding/5.png" alt="" class="course-img">
90
              </p>
91
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
92
              <p class="course-price">实战</p>
93
            </a>
94
          </li>
95
          <li class="course-item">
96
            <a href="javascript:;">
97
              <p class="course-pic">
98
                <img src="../../../public/images/course_coding/6.png" alt="" class="course-img">
99
              </p>
100
              <p class="course-name">初始HTML5+CSS3 - 2026升级版</p>
101
              <p class="course-price">实战</p>
102
            </a>
103
          </li>
104
        </ul>
105
      </div>
106
    </div>

1
    .course {
2
      /* 清除浮动 */
3
      overflow: auto;
4
      font-size: 14px;
5
    }
6

7
    .course-title {
8
      width: 100%;
9
      padding: 0 0 10px 20px;
10
      color: #191919;
11
      font-size: 16px;
12
    }
13

14
    .course-list {
15
      padding-right: 20px;
16
    }
17

18
    .course-item {
19
      float: left;
20
      width: 50%;
21
      padding: 0 0 10px 20px;
22
    }
23

24
    .course-pic {
25
      margin-bottom: 6px;
26
    }
27

28
    .course-img {
29
      /* 相对于父容器的100% */
30
      width: 100%;
31
    }
32

33
    .course-name {
34
      height: 40px;
35
      line-height: 20px;
36
      margin-bottom: 4px;
37
      color: #4d4d4d;
38
      /* 多行文字省略 */
39
      overflow: hidden;
40
      text-overflow: ellipsis;
41
      display: -webkit-box;
42
      -webkit-line-clamp: 2;
43
      line-clamp: 2;
44
      -webkit-box-orient: vertical;
45
      white-space: normal !important;
46
      word-wrap: break-word;
47
    }
48

49
    .course-price {
50
      color: #e93b3b;
51
    }

标签栏#

标签栏部分

1
  <!-- 标签栏 -->
2
  <div class="tabbar-layout">
3
    <div class="tabbar">
4
      <a href="javascript:;" class="tabbar-item tabbar-item-active">
5
        <i class="iconfont icon-home">
6
        </i>
7
        <span>首页</span>
8
      </a>
9
      <a href="javascript:;" class="tabbar-item ">
10
        <i class="iconfont icon-search">
11
        </i>
12
        <span>搜索</span>
13
      </a>
14
      <a href="javascript:;" class="tabbar-item ">
15
        <i class="iconfont icon-personal">
16
        </i>
17
        <span>我的</span>
18
      </a>
19
    </div>
20
  </div>

1
.tabbar {
2
  width: 100%;
3
  height: 100%;
4
  background-color: #f6f6f6;
5
  font-size: 14px;
6
}
7

8
.tabbar-item {
9
  float: left;
10
  width: 33.333333%;
11
  height: 100%;
12
  color: #c2cfcc;
13
  text-align: center;
14
  padding-top: 3px;
15
}
16

17
.tabbar-item-active {
18
  background-color: #e7f3f0;
19
  color: #00b38a;
20
}
21

22
.tabbar-item .iconfont {
23
  display: block;
24
  font-size: 20px;
25
}

layout样式#

1
.header-layout {
2
  position: fixed;
3
  left: 0;
4
  top: 0;
5
  width: 100%;
6
  height: 48px;
7
  background-color: red;
8
  border-bottom: 1px solid #e8e8e8;
9
}
10

11
.main-layout {
12
  padding: 48px 0 48px 0;
13
}
14

15
.slider-layout {
16
  /* height: 134px;
17
  background-color: green; */
18
  margin-bottom: 20px;
19
}
20

21
.course-layout {
22
  /* height: 382px;
23
  background-color: gray; */
24
  margin-bottom: 10px;
25
}
26

27
.tabbar-layout {
28
  position: fixed;
29
  left: 0;
30
  bottom: 0;
31
  width: 100%;
32
  height: 48px;
33
  background-color: yellow;
34
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
35
}

总结#

流体布局主要使用%单位布局，不是只能使用%单位布局，也可以使用其他单位，比如px；图片一般只设置宽度或者高度,不要同时设置，这样可以等比例缩放，不失真

音乐

音乐

前言#

仿慕课网首页#

页面结构布局#

头部#

主体部分#

标签栏#

layout样式#

总结#

文章分享

评论区

音乐

CSS3流式布局

前言#

仿慕课网首页#

页面结构布局#

头部#

主体部分#

标签栏#

layout样式#

总结#

文章分享

评论区