Layout & "About Me"

Documentation for p0.layout

CSS 排版与布局

良好的排版可以极大地提高网页的可读性和美观性

常用 CSS 排版属性

常用的 CSS 排版属性：

  • 字体与排版
    • font-family: 设置文本的字体。可以指定多个字体，浏览器会按照顺序查找并使用第一个可用的字体 (fallback)。
      • 示例: font-family: Arial, sans-serif;
      • 字体可以是系统字体，含有空格的字体名称需要用引号包裹。
      • 最佳实践：使用 网页安全字体 或者使用 在线字体服务
    • font-size: 设置文本的字号。可以使用像素（px）、em、rem 或百分比等单位。
      • 示例: font-size: 16px; 或 font-size: 1.2em;
      • em 最初表示的是字体中大写 M 的宽度及所用的尺寸
      • 使用 em 作为单位时，文本的大小会根据父元素的字体大小而变化
      • 最佳实践：使用 rem 作为单位，rem 表示相对根元素（<html>）的字体大小
    • font-weight: 设置文本的粗细。可以使用关键字（如 normal, bold）或数字（100-900）。
      • 示例: font-weight: bold; 或 font-weight: 700;
      • 最佳实践：使用 bold 等作为关键字，使用数字时，大部分字体并不支持多数区间和可变字体，常见的为 x00。
    • line-height: 设置文本的行高。可以是数字（相对于字号的倍数）、长度单位或百分比。
      • 示例: line-height: 1.5; 或 line-height: 24px;
      • 最佳实践：使用 1.5 作为行高，这是一个比较合理的行高，可以提高可读性。
    • text-align: 设置文本的水平对齐方式。常用值有 left, right, center, justify。
      • 示例: text-align: center;
    • text-decoration: 设置文本的装饰线（如underline下划线、overline上划线、line-through删除线）。
      • 示例: text-decoration: underline;
    • letter-spacing: 设置字符之间的间距。
      • 示例: letter-spacing: 0.5px;
    • word-spacing: 设置单词之间的间距。
      • 示例: word-spacing: 2px;
    • text-transform: 控制文本的大小写转换。常用值有 uppercase（大写）、lowercase（小写）、capitalize（首字母大写）。
      • 示例: text-transform: uppercase;
  • 颜色与边框
    • color: 设置文本的颜色。可以使用颜色名称、十六进制值（hex）、RGB 或 RGBA 值。
      • 示例: color: #333; 或 color: rgb(51, 51, 51);
    • background-color: 设置元素的背景颜色。
      • 示例: background-color: #f0f0f0;
    • border: 设置元素的边框。
      • 示例: border: 1px solid #ccc;
      • 其实 border 是一个复合属性，可以设置 border-width, border-style, border-color 三个属性。
    • border-radius: 设置元素的圆角。
      • 示例: border-radius: 10px;, border-radius: 10px 20px 30px 40px; （顺时针）
      • 可以使用 100% 变成圆形/椭圆。

样例

参考设计思路即可，之后我们使用 TailwindCSS 来实现

场景一：设置网页主体文本样式

HTML
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页主体文本排版</title>
    <style>
        body {
            font-family: "Inter", "Helvetica Neue", Arial, sans-serif; /* 使用Inter字体，备用字体和无衬线字体 */
            font-size: 18px; /* 基础字号 */
            line-height: 1.6; /* 良好的行高 */
            color: #333; /* 深灰色文本 */
            margin: 20px; /* 页面边距 */
            background-color: #f8f8f8; /* 浅背景色 */
            border-radius: 8px; /* 圆角边框 */
        }
        h1 {
            font-size: 2.5em; /* 标题字号 */
            color: #1a1a1a; /* 更深的标题颜色 */
            text-align: center; /* 标题居中 */
            margin-bottom: 20px;
            border-bottom: 2px solid #ccc; /* 标题下划线 */
            padding-bottom: 10px;
            border-radius: 5px; /* 标题圆角 */
        }
        p {
            margin-bottom: 1em; /* 段落间距 */
            text-indent: 2em; /* 首行缩进 */
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这是网页的主体内容。通过设置 `font-family`、`font-size` 和 `line-height`，我们可以确保文本易于阅读。</p>
        <p>良好的排版是用户体验的关键。它不仅影响美观，更直接关系到信息的传达效率。我们应该始终关注字体的选择、字号的大小以及行间距的合理性。</p>
    </div>
</body>
</html>

场景二：强调文本或链接样式

  • 改变特定文本（如链接、重要信息）的颜色、粗细或添加装饰线。
  • 使用 transition 属性来实现动画效果。
  • 使用 hover 伪类来改变链接和按钮样式，增强互动性。
HTML
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本强调与链接排版</title>
    <style>
        body {
            font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
            font-size: 18px;
            color: #333;
            margin: 20px;
            background-color: #f8f8f8;
            border-radius: 8px;
        }
        .highlight {
            color: #e67e22; /* 橙色强调 */
            font-weight: bold; /* 加粗 */
            font-style: italic; /* 斜体 */
        }
        a {
            color: #3498db; /* 蓝色链接 */
            text-decoration: none; /* 移除下划线 */
            transition: color 0.3s ease; /* 颜色过渡动画 */
        }
        a:hover {
            color: #2980b9; /* 悬停时变深 */
            text-decoration: underline; /* 悬停时出现下划线 */
        }
        .button-link {
            display: inline-block;
            padding: 10px 20px;
            background-color: #27ae60; /* 绿色背景 */
            color: white;
            text-align: center;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        .button-link:hover {
            background-color: #2ecc71; /* 悬停时变亮 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一段包含 <span class="highlight">重要信息</span> 的文本。点击 <a href="#">这里</a> 了解更多详情。</p>
        <p>我们还可以将链接样式化为按钮，例如：<a href="#" class="button-link">了解更多</a>。</p>
    </div>
</body>
</html>

场景三：实现响应式排版

  • 根据屏幕大小调整字号，以适应不同设备。
  • @media 规则是实现响应式设计的基础方法之一。
    • 我们不需要太多了解，之后我们使用 TailwindCSS 来实现响应式设计。
HTML
index.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式排版</title>
    <style>
        body {
            font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
            margin: 20px;
            background-color: #f8f8f8;
            border-radius: 8px;
        }
        h1 {
            font-size: 2.5em; /* 桌面端大标题 */
            color: #1a1a1a;
            text-align: center;
            margin-bottom: 20px;
            border-bottom: 2px solid #ccc;
            padding-bottom: 10px;
            border-radius: 5px;
        }
        p {
            font-size: 18px; /* 桌面端段落字号 */
            line-height: 1.6;
            color: #333;
            margin-bottom: 1em;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 10px;
        }

        /* 媒体查询：当屏幕宽度小于 768px 时 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2em; /* 平板端标题稍小 */
            }
            p {
                font-size: 16px; /* 平板端段落字号稍小 */
            }
        }

        /* 媒体查询：当屏幕宽度小于 480px 时 */
        @media (max-width: 480px) {
            h1 {
                font-size: 1.5em; /* 手机端标题更小 */
            }
            p {
                font-size: 14px; /* 手机端段落字号更小 */
            }
            body {
                margin: 10px; /* 手机端减小边距 */
            }
            .container {
                padding: 15px; /* 手机端减小内边距 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>响应式排版示例</h1>
        <p>请尝试调整浏览器窗口的大小，观察标题和段落文本的字号如何根据屏幕宽度自动调整。这对于提供跨设备的良好用户体验至关重要。</p>
        <p>使用媒体查询（`@media` 规则）是实现响应式设计的基础方法之一。我们可以为不同的屏幕尺寸定义不同的 CSS 规则。</p>
    </div>
</body>
</html>

布局样式

盒模型 (Box Model)

所有 HTML 元素都可以被视为一个个的“盒子”。CSS 盒模型是关于这些盒子如何由内容、内边距、边框和外边距组成。

  • content（内容）: 盒子实际内容区域，例如文本或图像。
  • padding（内边距）: 内容与边框之间的空间。内边距会受背景颜色影响。
  • border（边框）: 围绕内边距和内容的线条。
  • margin（外边距）: 边框外侧的空间，用于控制元素与其他元素之间的距离。外边距是透明的。

显示属性 (Display Property)

display 属性是 CSS 布局最基本的属性之一，它定义了元素如何被显示。

  • block（块级元素）: 独占一行，宽度默认填充父容器，可以设置宽度、高度、内边距和外边距。常见的块级元素有 <div>, <p>, <h1>。
  • inline（行内元素）: 不独占一行，宽度由内容决定，不能设置宽度和高度，垂直方向的内边距和外边距不影响布局。常见的行内元素有 <span>, <a>, <strong>。
  • inline-block（行内块级元素）: 结合了行内元素和块级元素的特性。它像行内元素一样排列，但可以设置宽度、高度、内边距和外边距。
  • none: 元素将完全从文档流中移除，不占据任何空间。

弹性盒布局 (Flexbox Layout)

Flexbox 是一种一维布局系统，用于在容器中对项目进行对齐和分配空间。它非常适合创建导航栏、卡片列表等线性的布局。

核心概念:

  • Flex 容器 (Flex Container): 应用 display: flex 或 display: inline-flex 的父元素。
  • Flex 项目 (Flex Items): Flex 容器的直接子元素。

常用属性:

  • display: flex;: 将元素设置为弹性容器。
  • flex-direction: 定义主轴的方向（row, column等）。
  • justify-content: 定义项目在主轴上的对齐方式。
  • align-items: 定义项目在交叉轴上的对齐方式。
  • gap: 项目之间的间距。

网格布局 (Grid Layout)

Grid 布局是一种强大的二维布局系统，可以同时控制行和列的布局。它非常适合创建复杂的页面结构，如整个页面的布局骨架。

核心概念:

  • Grid 容器 (Grid Container): 应用 display: grid 或 display: inline-grid 的父元素。
  • Grid 项目 (Grid Items): Grid 容器的直接子元素。
  • Grid 行 (Grid Rows): 横向的网格轨道。
  • Grid 列 (Grid Columns): 纵向的网格轨道。
  • Grid 单元格 (Grid Cells): 行与列交叉形成的小区域。

常用属性:

  • display: grid;: 将元素设置为网格容器。
  • grid-template-columns: 定义网格的列轨道大小和数量。
  • grid-template-rows: 定义网格的行轨道大小和数量。
  • gap (或 grid-gap): 行和列之间的间距。
  • grid-column-start, grid-column-end, grid-row-start, grid-row-end: 用于定位网格项目。

定位 (Positioning)

position 属性允许您对元素进行精确控制，使其脱离正常的文档流，或相对于其他元素进行定位。

  • static（静态定位）: 默认值。元素按照正常的文档流进行布局。top, right, bottom, left 属性无效。
  • relative（相对定位）: 元素相对于其正常位置进行定位，但仍占据其在文档流中的原始空间。top, right, bottom, left 属性会使元素相对于自身位置移动。
  • absolute（绝对定位）: 元素脱离正常文档流，不占据任何空间。它相对于 最近的已定位父元素 （非 static）进行定位。如果没有已定位的父元素，则相对于 <body> 进行定位。
  • fixed（固定定位）: 元素脱离正常文档流，不占据任何空间。它相对于 浏览器视口/ViewPort 进行定位，并且在滚动时保持固定位置。
  • sticky（粘性定位）: 元素根据用户的滚动位置在 relative 和 fixed 之间切换。当它在视口中时，行为类似于 relative；当它滚动到特定阈值时，则变为 fixed。

Note

查看 MDN 上的样例

课堂样例：模仿一个即时消息软件界面