1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!-- 经典的表格布局 -->
<table width="960" cellpadding="0" cellspacing="0" border="0" align="center">
  <!-- 顶部导航 -->
  <tr>
    <td colspan="2" class="header">
      <img src="logo.png" alt="网站Logo">
      <font size="5" face="Arial" color="white">我的网站</font>
    </td>
  </tr>

  <!-- 主内容区 -->
  <tr>
    <!-- 左侧边栏 -->
    <td width="200" class="sidebar" valign="top">
      <a href="/"><font color="blue">首页</font></a><br>
      <a href="/about"><font color="blue">关于我们</font></a><br>
      <a href="/products"><font color="blue">产品中心</font></a>
    </td>

    <!-- 主内容 -->
    <td width="760" class="content" valign="top">
      <h1><font size="6" color="#333">欢迎访问我们的网站</font></h1>
      <p>
        <font size="4" face="Times New Roman" color="#666">
          这是网站的主要内容...
        </font>
      </p>
    </td>
  </tr>

  <!-- 底部 -->
  <tr>
    <td colspan="2" class="footer">
      <font size="3" color="gray">版权所有 2003-2006</font>
    </td>
  </tr>
</table>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<style>
  table.layout {
    width: 960px;
    margin: 0 auto;
    border-collapse: collapse;
  }

  td.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    text-align: center;
  }

  td.sidebar {
    width: 200px;
    background: #f5f5f5;
    vertical-align: top;
    padding: 15px;
  }

  td.sidebar a {
    display: block;
    padding: 8px 0;
    color: #3498db;
    text-decoration: none;
  }

  td.sidebar a:hover {
    text-decoration: underline;
  }

  td.content {
    padding: 20px;
    vertical-align: top;
  }

  td.footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 15px;
  }
</style>

<table class="layout">
  <tr>
    <td colspan="2" class="header">
      <h1>🎉 我的网站</h1>
    </td>
  </tr>
  <tr>
    <td class="sidebar">
      <nav>
        <a href="/">首页</a>
        <a href="/about">关于我们</a>
        <a href="/products">产品中心</a>
        <a href="/contact">联系方式</a>
      </nav>
    </td>
    <td class="content">
      <h2>欢迎访问</h2>
      <p>这里是网站的主要内容区域...</p>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="footer">
      <p>&copy; 2006 版权所有</p>
    </td>
  </tr>
</table>

1
2
3
4
5
6

/* float 的"本职工作" */
img.illustration {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<style>
  /* 清除浮动的影响 */
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  .container {
    width: 960px;
    margin: 0 auto;
  }

  .sidebar {
    float: left;     /* 飘到左边 */
    width: 250px;
    background: #f0f0f0;
    padding: 20px;
  }

  .content {
    float: left;     /* 也飘到左边，这样就和 sidebar 并排了 */
    width: 710px;    /* 960 - 250 = 710，刚好填满 */
    padding: 20px;
  }

  .footer {
    clear: both;     /* 清除浮动，不然会飘上去 */
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="container clearfix">
  <aside class="sidebar">
    <h3>侧边栏</h3>
    <ul>
      <li>导航项 1</li>
      <li>导航项 2</li>
      <li>导航项 3</li>
    </ul>
  </aside>

  <main class="content">
    <h1>主内容区</h1>
    <p>这里是网页的主要内容...</p>
  </main>
</div>

<footer class="footer">
  <p>页脚内容</p>
</footer>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/* ========== 两栏布局 ========== */
.layout-two-col {
  max-width: 1200px;
  margin: 0 auto;
}

.layout-two-col .col-sidebar {
  float: left;
  width: 25%;
  padding: 20px;
  background: #f8f9fa;
  box-sizing: border-box;
}

.layout-two-col .col-main {
  float: right;
  width: 75%;
  padding: 20px;
  box-sizing: border-box;
}

.layout-two-col::after {
  content: "";
  display: table;
  clear: both;
}

/* ========== 三栏布局 ========== */
.layout-three-col {
  max-width: 1200px;
  margin: 0 auto;
}

.layout-three-col .col-left {
  float: left;
  width: 20%;
}

.layout-three-col .col-center {
  float: left;
  width: 60%;
}

.layout-three-col .col-right {
  float: right;
  width: 20%;
}

.layout-three-col .col-left,
.layout-three-col .col-center,
.layout-three-col .col-right {
  padding: 20px;
  box-sizing: border-box;
}

/* 通用清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* 原始版 clearfix（2004年） */
.clearfix {
  clear: both;
}

/* 改进版 clearfix（2006年）—— 解决父元素高度坍塌 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 现代版 clearfix（2010年后）—— micro clearfix */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* 还可以给需要浮动的元素加 overflow: hidden; 来触发 BFC */
.bfc-wrapper {
  overflow: hidden;  /* 触发块级格式化上下文，清除内部浮动 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

/* ========== 固定导航栏 ========== */
.navbar {
  position: fixed;  /* 相对于视口固定 */
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;  /* 确保在最上层 */
}

/* 占位，防止内容被固定导航遮挡 */
body {
  padding-top: 60px;
}

/* ========== 绝对定位：弹窗 ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);  /* 半透明黑色遮罩 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-box {
  position: relative;  /* 相对于父元素定位 */
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  border: none;
  background: #f0f0f0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
}

/* ========== 相对定位：微调 ========== */
.icon-wrapper {
  position: relative;
  display: inline-block;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4757;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
}

/* ========== 堆叠顺序（z-index） ========== */
.layer-1 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.layer-2 {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;  /* 数值越大，越在上面 */
}

.layer-3 {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 3;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!-- 弹窗完整示例 -->
<div class="modal-overlay">
  <div class="modal-box">
    <button class="modal-close">&times;</button>
    <h2>登录</h2>
    <form>
      <input type="text" placeholder="用户名">
      <input type="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/* Flex 容器和 Flex 项目 */
.flex-container {
  display: flex;  /* 开启 Flexbox */

  /* 主轴方向（默认从左到右） */
  flex-direction: row;         /* row | row-reverse | column | column-reverse */

  /* 是否换行（默认不换行） */
  flex-wrap: wrap;             /* nowrap | wrap | wrap-reverse */

  /* 主轴对齐方式 */
  justify-content: space-between;  /* flex-start | flex-end | center | space-between | space-around | space-evenly */

  /* 侧轴对齐方式 */
  align-items: center;             /* flex-start | flex-end | center | stretch | baseline */

  /* 多行内容对齐方式（换行后生效） */
  align-content: space-between;     /* flex-start | flex-end | center | space-between | space-around | stretch */
}

.flex-item {
  /* 项目放大比例（默认 0，不放大） */
  flex-grow: 1;

  /* 项目缩小比例（默认 1，可缩小） */
  flex-shrink: 0;

  /* 项目基准宽度 */
  flex-basis: auto;

  /* 简写：flex: grow shrink basis */
  flex: 1;        /* flex: 1 1 0% */
  flex: 0 0 200px; /* 固定宽度，不放大不缩小 */

  /* 单独设置对齐方式（覆盖容器 align-items） */
  align-self: flex-end;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

/* ========== 经典导航栏 ========== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 70px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
}

.nav-links {
  display: flex;
  gap: 30px;  /* 项目之间的间距 */
}

.nav-links a {
  text-decoration: none;
  color: #333;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #3498db;
}

/* ========== 卡片网格（自动换行） ========== */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card {
  flex: 1 1 300px;  /* 最小 300px，尽量填满，自动换行 */
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========== 圣杯布局 ========== */
.holy-grail {
  display: flex;
  height: 100vh;
}

.holy-grail header {
  flex: 0 0 60px;  /* 不放大，不缩小，固定 60px */
}

.holy-grail .sidebar-left,
.holy-grail .sidebar-right {
  flex: 0 0 200px;
}

.holy-grail main {
  flex: 1;  /* 占据所有剩余空间 */
  overflow: auto;  /* 内容超出可滚动 */
}

.holy-grail footer {
  flex: 0 0 60px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* 水平居中 */
.center-horizontal {
  display: flex;
  justify-content: center;
}

/* 垂直居中 */
.center-vertical {
  display: flex;
  align-items: center;
}

/* 水平垂直居中 */
.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 如果只有一个项目，这是最简单的写法 */
.single-element {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/* 定义网格容器 */
.grid-container {
  display: grid;

  /* 定义列（3列，每列 1fr 等宽） */
  grid-template-columns: 1fr 1fr 1fr;

  /* 定义行（自动行高） */
  grid-template-rows: auto;

  /* 行列间距 */
  gap: 20px;

  /* 简写：repeat(次数, 值) */
  grid-template-columns: repeat(3, 1fr);

  /* 更有意思的写法 */
  grid-template-columns: 200px 1fr 200px;  /* 左右固定，中间自适应 */
  grid-template-columns: minmax(200px, 1fr) 1fr 1fr;  /* 最小200px，最大平分 */
}

/* grid-item 网格项目 */
.grid-item {
  /* 占据第1列到第3列（列的 1 号线到 4 号线） */
  grid-column: 1 / 3;

  /* 占据第2行到第4行 */
  grid-row: 2 / 4;

  /* 简写：grid-area */
  grid-area: 1 / 1 / 3 / 3;  /* row-start / col-start / row-end / col-end */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

/* ========== 页面整体布局 ========== */
.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 70px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  height: 100vh;
  gap: 0;
}

.page-layout header {
  grid-area: header;
  background: #3498db;
  color: white;
}

.page-layout .sidebar {
  grid-area: sidebar;
  background: #f8f9fa;
  padding: 20px;
}

.page-layout main {
  grid-area: main;
  padding: 20px;
  overflow-y: auto;  /* 内容区可滚动 */
}

.page-layout footer {
  grid-area: footer;
  background: #333;
  color: white;
}

/* ========== 响应式网格 ========== */
.auto-fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.auto-fit-grid .card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 自动根据容器宽度计算列数，每个卡片最小280px */
}

/* ========== 经典 12 栏网格系统 ========== */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }  /* 1/3 宽度 */
.col-6 { grid-column: span 6; }  /* 1/2 宽度 */
.col-8 { grid-column: span 8; }  /* 2/3 宽度 */
.col-12 { grid-column: span 12; } /* 100% 宽度 */

/* 响应式断点 */
@media (max-width: 768px) {
  .col-3, .col-4, .col-6, .col-8 {
    grid-column: span 12;  /* 手机上全部占满 */
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/* ========== 宫格照片墙 ========== */
/* 注意：这里的"瀑布流"效果实际上是多行多列网格，
   不是真正的 masonry 布局（masonry 需要 grid-template-rows: masonry，
   目前仅 Firefox 135+ 支持） */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 10px;
}

.masonry-grid .item:nth-child(1) { grid-row: span 2; }
.masonry-grid .item:nth-child(4) { grid-column: span 2; }
.masonry-grid .item:nth-child(6) { grid-row: span 2; }

/* ========== 表格效果的 Grid 实现 ========== */
.data-table {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
}

.header-row {
  display: contents;  /* 不生成包裹元素，直接使用子元素 */
}

.header-row > * {
  background: #3498db;
  color: white;
  padding: 12px;
  font-weight: bold;
}

.data-row {
  display: contents;
}

.data-row > * {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/* 方式1：在 CSS 文件中使用 @media */
.container {
  width: 100%;
  padding: 15px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 970px;
    padding: 30px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/* 方式2：引入外部 CSS 文件 */
<link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css">
<link rel="stylesheet" media="screen and (min-width: 769px)" href="desktop.css">

/* 方式3：在 link 标签中直接写媒体查询 */
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px) and (max-width: 1024px)">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* 移动优先的断点设计 */

/* 小手机 */
@media (min-width: 375px) { /* iPhone SE */ }

/* 大手机 */
@media (min-width: 414px) { /* iPhone XR */ }

/* 平板竖屏 */
@media (min-width: 768px) { /* iPad */ }

/* 平板横屏 */
@media (min-width: 1024px) { /* iPad Pro */ }

/* 桌面显示器 */
@media (min-width: 1280px) { /* 笔记本 */ }

/* 大桌面 */
@media (min-width: 1536px) { /* 27寸显示器 */ }

/* 常用简写断点 */
@media (min-width: 640px) { /* 手机到平板 */ }
@media (min-width: 768px) { /* 平板 */ }
@media (min-width: 1024px) { /* 小桌面 */ }
@media (min-width: 1280px) { /* 大桌面 */ }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

/* ========== 响应式页面模板 ========== */

/* 基础样式（移动端默认） */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background: #333;
  color: white;
  padding: 15px;
  order: 1;  /* 移动端导航在上 */
}

.nav {
  display: none;  /* 移动端默认隐藏导航 */
}

.main {
  flex: 1;
  padding: 15px;
  order: 2;
}

.footer {
  background: #f5f5f5;
  padding: 15px;
  order: 3;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .nav {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: #444;
    order: 0;  /* 平板导航在最上 */
  }

  .nav a {
    color: white;
    text-decoration: none;
  }

  .main {
    padding: 30px;
  }
}

/* 桌面及以上 */
@media (min-width: 1024px) {
  .page {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .header {
    width: 100%;
  }

  .nav {
    width: 250px;
    flex-direction: column;
    display: flex;
  }

  .main {
    flex: 1;
    order: 1;
  }

  .footer {
    width: 100%;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* 想象你要修改主题色，发现要改 100 处 */
.button-primary {
  background-color: #3498db;  /* 第1处 */
  color: white;
}

.card-header {
  background-color: #3498db;  /* 第2处 */
}

.nav-link:hover {
  background-color: #3498db;  /* 第3处 */
}

.badge {
  background-color: #3498db;  /* 第4处 */
}

/* ...还有96处 */

.product-manager {
  color: #3498db;  /* 第100处，想死 */
}

/* 然后客户说：蓝色太丑，换成紫色 */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 你想实现： */
<!-- 如果是管理员，显示红色标签；如果是普通用户，显示蓝色标签 -->

/* CSS：对不起，我不会 if/else */

/* 只能这样： */
.admin .badge {
  background-color: #e74c3c;
}

.user .badge {
  background-color: #3498db;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* 同样的样式要写 N 遍 */
.card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modal {
  padding: 20px;  /* 重复代码开始 */
  border-radius: 8px;  /* 重复代码 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* 重复代码结束 */
}

.popover {
  padding: 20px;  /* 又要写一遍 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tooltip {
  padding: 20px;  /* 崩溃边缘 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* 想把相关的样式放在一起，但 CSS 不支持嵌套 */
.nav {
  background: #333;
}

.nav .nav-item {
  display: inline-block;
}

.nav .nav-item .nav-link {
  color: white;
  text-decoration: none;
}

.nav .nav-item .nav-link:hover {
  color: #3498db;
}

/* 完全没有层级感，很难一眼看出结构 */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* Sass 语法（缩进风格，已经过时） */
.nav
  background: #333
  .nav-item
    display: inline-block
    .nav-link
      color: white
      &:hover
        color: #3498db

/* SCSS 语法（推荐，和 CSS 几乎一样） */
.nav {
  background: #333;

  .nav-item {
    display: inline-block;

    .nav-link {
      color: white;

      &:hover {
        color: #3498db;
      }
    }
  }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

/* ========== 1. 变量 ========== */
$primary-color: #3498db;
$font-stack: "Helvetica Neue", sans-serif;
$spacing-unit: 20px;
$border-radius: 8px;

.button {
  background-color: $primary-color;
  font-family: $font-stack;
  padding: $spacing-unit;
  border-radius: $border-radius;
}

/* 修改变量，全局生效 */
$primary-color: #9b59b6;  /* 改成紫色 */

/* ========== 2. 嵌套 ========== */
.navbar {
  background: #333;
  padding: 15px 30px;

  .nav-list {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;

    .nav-item {
      position: relative;

      .nav-link {
        color: white;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background 0.2s;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }

        &.active {
          background: $primary-color;
        }
      }

      /* 嵌套中使用 & 引用父选择器 */
      &:first-child .nav-link {
        padding-left: 0;
      }
    }
  }
}

/* ========== 3. Mixin（可重用的样式块） ========== */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin card($padding: 20px, $radius: 8px) {
  padding: $padding;
  border-radius: $radius;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 使用 Mixin */
.modal {
  @include flex-center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.card {
  @include card(25px, 12px);  /* 传入参数 */
}

.simple-card {
  @include card();  /* 使用默认参数 */
}

/* ========== 4. 继承（@extend） ========== */
.message {
  padding: 15px 20px;
  border-radius: 6px;
  border: 1px solid;
}

.message-success {
  @extend .message;
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.message-error {
  @extend .message;
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.message-warning {
  @extend .message;
  background: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

/* ========== 5. 运算 ========== */
$base-size: 16px;
$scale: 1.25;

h1 { font-size: $base-size * $scale * $scale * $scale; }  /* 31.25px */
h2 { font-size: $base-size * $scale * $scale; }           /* 25px */
h3 { font-size: $base-size * $scale; }                     /* 20px */
h4 { font-size: $base-size; }                              /* 16px */

/* ========== 6. 条件语句和循环 ========== */

/* 条件 */
@mixin button-style($type) {
  @if $type == primary {
    background: #3498db;
    color: white;
  } @else if $type == danger {
    background: #e74c3c;
    color: white;
  } @else if $type == outline {
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
  } @else {
    background: #95a5a6;
    color: white;
  }
}

.btn {
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;

  &.btn-primary { @include button-style(primary); }
  &.btn-danger { @include button-style(danger); }
  &.btn-outline { @include button-style(outline); }
  &.btn-default { @include button-style(default); }
}

/* 循环 */
@for $i from 1 through 12 {
  .col-#{$i} {
    width: calc(100% / 12 * #{$i});
  }
}

/* each 遍历 */
$colors: (primary: #3498db, danger: #e74c3c, success: #2ecc71, warning: #f39c12);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }

  .bg-#{$name} {
    background-color: $color;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 编译后，上述 Sass 代码会变成标准的 CSS */
.navbar .nav-list .nav-item .nav-link {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}

.col-1 { width: calc(100% / 12 * 1); }
.col-2 { width: calc(100% / 12 * 2); }
/* ... 一直到 col-12 */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/* ========== Stylus 变量 ========== */
primary-color = #3498db
font-stack = "Helvetica Neue", Arial, sans-serif
spacing = 20px

/* ========== Stylus 嵌套 ========== */
.navbar
  background: #333
  padding: 15px 30px

  .nav-list
    display: flex
    list-style: none
    gap: 20px

    .nav-item
      .nav-link
        color: white
        text-decoration: none

        &:hover
          color: primary-color

/* ========== 无大括号写法 ========== */
.button
  padding spacing
  border-radius 8px
  background primary-color
  color white
  cursor pointer

  &:hover
    background darken(primary-color, 10%)  /* 内置函数：颜色变暗 */

/* ========== Stylus 混入（Mixin） ========== */
flex-center()
  display flex
  justify-content center
  align-items center

card(padding = 20px, radius = 8px)
  padding padding
  border-radius radius
  box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)

.modal
  flex-center()
  position fixed
  inset 0
  background rgba(0, 0, 0, 0.5)

.content-card
  card(25px, 12px)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 传统 CSS 风格 */
.nav { background: #333; }
.nav .nav-item { display: inline-block; }

/* 大括号 + 分号风格（Stylus 也支持） */
.nav { background: #333; .nav-item { display: inline-block; } }

/* 纯 Stylus 风格（无大括号无分号） */
.nav
  background: #333
  .nav-item
    display: inline-block

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// postcss.config.js
module.exports = {
  plugins: [
    // 1. autoprefixer：自动添加浏览器前缀
    require('autoprefixer')({
      /* 
         browsers 参数指定需要兼容的浏览器范围
         "> 1%"：全球使用率 > 1% 的浏览器
         "last 2 versions"：每个浏览器的最近两个版本
         "not ie <= 8"：不包括 IE8 及以下
      */
      overrideBrowserslist: [
        '> 1%',
        'last 2 versions',
        'not ie <= 8',
        'not op_mini all'
      ]
    }),

    // 2. cssnano：压缩优化 CSS
    require('cssnano')({
      preset: 'default',  // 或 'advanced'（更激进优化）
    }),

    // 3. postcss-preset-env：使用未来的 CSS 语法
    require('postcss-preset-env')({
      stage: 2,  // 支持程度：0-4，2 是比较安全的
    }),
  ]
}