[!summary]+
设计个人首页作为 HTML 和 CSS 的实战，主要设计以下的几个部分，导航栏，侧边栏，logo，页脚，背景，以及一个简单的个人介绍页面，首先不考虑使用框架和库，仅对整体流程做熟悉，使用纯 HTML 和 CSS 进行基础实现。后续考虑使用框架和组件库进行重写。

CheckList for Web Design : Using this website to checkout those element u missed in your design. Prepare for those elements. Get Ready and Start.

Nav-Bar 页眉的导航栏设计

Buger 下拉菜单(侧边菜单)

https://alvarotrigo.com/blog/hamburger-menu-css/

flex 布局设计

使用 html css 进行布局时，如果计划使用 flex 等布局，避免无谓的划分子集的 div 等 box，避免多余的额外对齐工作，原型和草稿确认布局是很重要的。例如上述的导航栏，分成左右两个 div 即可，如果将搜索框等独立出来，在后续对齐和确认间距的时候会多出很多麻烦。

可以缩减为仅使用一个 div，使用 flex 的布局技巧来使得元素一半左对齐一半右对齐即可，下面时具体说明。可以参考文献 1 的《使用自动的外边距在主轴上对齐》章节。

如果希望让 flex 子元素靠右显示，可以在子元素中定义 margin-left: auto; (auto 也可使用其他数值单位替代)，参考 👍MDN弹性盒子容器中的对齐方式 | flex子元素靠右 | Flex的最后一个元素靠右 | Flexbox

• align-items 如果没有设置正确的话，所有的元素会按照撑满 flex 容器的高度去对齐。
• 使用 margin:auto 可以实现元素的居中
• 使用 align-self 可以实现单个 flex 子项的不同对齐方式。

可能接着阅读更多布局相关的资料，加深对布局的认识，以及正确选择合适的布局：Mdn Layout Cookbook

• 响应式设计的历史和思路：
• 媒介查询的入门 与或非等语句
• 传统的布局方法

尽可能使用现代的布局方法，我们可能不需要媒介查询的方式去实现响应式设计了，当然我们也可以结合媒介查询去对现代布局方式做优化。

[!summary]+
这里 CSS 的布局指的是通过控制元素的属性：宽度，高度，块（不同类型），内联等来实现在 HTML 的基础上对整体页面的布局进行调整。将其排布在页面上。

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：

布局模式介绍

正常布局流：指的是不对页面进行任何布局控制的时候，浏览器默认的 HTML 布局方式，实际上就是按照源码中的先后次序依次出现，在 HTML 布局的过程中，最为重要的就是元素的块和内联两种布局方式。这里需要注意的就是，块的方向和元素的书写方向的关系。

而当我们希望使用 CSS 来改变正常的布局形式的时候，通常会使用以下的一些属性，或者说布局技术，来覆盖掉默认的 HTML 布局行为。

• display 属性：改变元素在 HTML 中的渲染形式，如 block inline inline-block 还有 CSS 引入的 CSS Grid 和 Flexbox.
• float 属性：使用 float 属性能改变块级元素换行的特性，实现类似换行的效果，其值指定其他元素围绕块级元素的哪一边。
• position 属性：利用 position 来设置盒子在盒子中的位置，在嵌套的情况下就可以产生多样的排布
• 表格布局：表格的布局方式可以用在非表格内容上，可以使用display: table和相关属性在非表元素上使用
• 多列布局： Multi-column layout 属性可以让块按列布局，比如报纸的内容就是一列一列排布的。

在讨论布局时，display 最多用到的属性为 flex 和 grid 属性，利用这两个属性值来改变布局。

[!summary]+
这一章节主要是涵盖开发 css 的各部分，有一些需要掌握的技能的 TODO 还有一些代码风格之类的东西

TODO

• [ ] 后续如果初窥门路了可以研究整理一下如何去找参考文献的思路。
• [ ] 熟练使用使用开发者工具进行网站调试的方式。

  DOC 查找

如何查阅 MDN 是一个很重要的技能（当今确实是可以使用 GPT 替代，但是也要掌握基础技能）：

• 当希望知道一个模块有什么属性可以设置的时候应该在 Modules 中查找对应的模块内容，例如表格的相关属性
• 当希望属性用法的时候才去查看对应的属性

Debug 调试

尝试熟练去使用开发者模式去查看盒模型，调整颜色，布局，查看属性，添加属性等。

编写规范

可以参考: MDN 的 CSS 代码规范的示例的同时，遵循组织 CSS 的一些准则，来确定自己的编写规范。

我的开发流程：

1. 使用 Layer 导入组件库
2. 使用 Layer 设置默认层，包括表格预设，各种预设的东西
3. 使用 Layer 设置主题层
4. 定义 custom 内容，内容的组织可以参考： OOCSS 面向对象的 CSS 设计，或者基于文章结构的组织（基础如 body,h -> 组件，例如不带 index 的列表-> 站点 level 如导航栏 -> 特指内容）

编写过程中：

• 保持命名方式统一
• 添加注释说明各部分内容
• 保持缩进和换行
• 为一些颜色之类的数值设置变量，避免重复修改多个地方

[!summary]+
表格的部分主要还是要实操，MDN 中给了一个例子，这里给我的启示是要更多的去阅读表格的相关属性，或者去阅读别人对表格设计中用到的元素，才能更好的掌握一些设计的思路，这里就给出本文中给出的一些常见的属性和设置方法，后续在具体实践中慢慢补充。

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

table{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}

• 当为表格设置初始样式的时候，使用 layout 为 fixed 会使得表格的行为更好预测，避免由于内容产生的畸变导致难以设置或者出现一些奇怪对齐情况，使用 fixed 然后设置每一列的宽度，在对内容进行处理可能更好。
• 使用 nth-child 设置每一列的宽度，最终相加为 100%，使得在不同分辨率下比较好控制。
• border-collapse: collapse; 原本两个格子之间会有两条边线，这样的话可以合并重叠的边线，让表格更符合我们的预期。
• 使用 text-align 设置对齐方式
• 使用 thead，tfoot，tbody 来分别设置样式，可以做出类似三线表之类的东西
• 为标题 caption 设置对应的样式

后续可能会找一些比较常见的表之类的来整理，& 查看一下组件库。

[!summary]+
该篇章主要收集一些常见的样式设置的参考页和一些需要记住的重要设置内容，由于不可能记住所有的属性和设置，善用查询可能才是唯一的王道。

CSS 中的值与单位

CSS 中的值与单位 这里介绍常见的一些值和单位，有一些新的可能会有所缺失，但是大部分都有了，这里可以列举几个常见但是之前不理解的。

• em 相对字体大小
• vw 视窗宽度，值为百分比的含义
• 百分比：与父辈容器的百分比
• rgba 或者 rgb 的第四个值代表透明度，十六进制想设置透明度的话，就在后面再加两位 16 进制表示透明度的百分比。

这里倒是提示我们需要有个比较好的取色器或者像 vscode 中的色盘来编写 css，颜色搭配网站在 css 中也是很重要的。

[!summary]+
HTML 和 CSS 中，所有的元素都是基于一个个的 Box 去渲染的，理解盒子模型的设计，才能知道如何进行布局，从而使的页面按照希望的样子呈现，该定义实际上和 HTML 的块级元素和内联元素使完全相对应的。需要注意两者之间的关联性。

块级盒子(Block Box)和内联盒子(Inline Box)

块级盒子和 HTML 中的块级元素使相互对应的，例如 h 和 p 有以下的特点：

• 与其他元素之间会换行
• 因为换行，在内联的方向上（也就是行）会占据所有可用空间，即绝大多数情况下和父容器一样宽。
• width 和 height 属性均可发挥总用
• 内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

内联盒子和 HTML 中的内联元素相互对应，例如 span, em, strong 等，有以下的特点：

• 不会换行
• width 和 height 属性不起作用
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

如果希望切换元素的内联或者块级属性，可以通过对盒子的 display 属性设置进行切换，对应的属性值为 inline 和 block，而更有趣的，如果我们希望不换行，但是内联中的 width 和 height 属性起到作用，可以使用 inline-box 属性。

Inline-box 属性在导航栏/链接元素中很常见，我们通过增大内容区域来使得链接存在更大的命中区域，同时不影响别的元素的呈现。

在这里还会看到片一个十分常见的盒子属性 flex 其通常会将外部的显示类型转换为 block，但是内部的显示类型设置为 flex，对其内部的各个子元素，都将转换为 flex 元素，并基于 flex 即弹性盒子的规则进行布局，可以生成更灵活的界面，这个后面在排版部分针对性的了解，这里简单介绍如下：

• flex 会将内部的元素默认沿着行的方向均分切成几个 box，但是具体的切分可以根据后续的属性进行定义。
• 如果希望 flex 的外部为内联的，则使用 inline-flex 属性。

[!summary]+
本章节是额外对于优先级的补充章节，在使用上可能会没有明显的感知，但是从概念上理解 CSS 的优先级和后续复杂项目的开发中还是起到了比较大的作用，该章节介绍层叠层的概念，在原先的优先级判定上添加了层的概念。

层叠概念回顾

该 Section 内容完全摘录自 MDN CSS 教程，也算是对于整体重要性和优先级的一个很好的总结。

1. 相关声明：找到所有具有匹配每个元素的选择器的声明代码块。
2. 重要性：根据规则是普通还是重要对规则进行排序。重要的样式是指设置了 !important (en-US) 标志的样式。
3. 来源：在两个按重要性划分的分组内，按作者、用户或用户代理这几个来源对规则进行排序。
4. 层：在六个按重要性和来源划分的分组内，按层叠层进行排序。普通声明的层顺序是从创建的第一个到最后一个，然后是未分层的普通样式。对于重要的样式，这个顺序是反转的，但保持未分层的重要样式优先权最低。
5. 优先级：对于来源层中优先权相同的竞争样式，按优先级对声明进行排序。
6. 出现顺序：当两个来源层的优先权相同的选择器具有相同的优先级时，最后声明的具有最高优先级的选择器的属性值获胜。

CSS 渲染过程中会逐步往下选择，如果在中间已经决出了胜负就不会继续往下，例如对一个元素在每个来源中只有一个定义，那么在来源层就可以决出胜负，无需往下了，而若获胜的来源中有多个层定义了同个属性，那么就会对比各个层的优先级，诸如此类。

其他的部分前文已经基本提到了，接下来补充来源和层的两个概念。

![note]+
三个来源中的：’用户代理’指的是浏览器，用户指的是网站访问者，作者指的是网站开发者，浏览器内部将来自这三个来源的样式表进行来源的排序。

来源的优先级排序

有三种层叠来源类型：用户代理样式表、用户样式表和作者样式表。浏览器根据来源和重要性将每个声明分为六个来源分组。有八个优先权级别：六个来源分组、正在过渡的属性和正在动画的属性。优先权的顺序是从具有最低优先权的普通用户代理样式，到当前应用的动画中的样式，到具有最高优先权的重要用户代理样式，再到正在过渡的样式：

1. 用户代理普通样式
2. 用户普通样式
3. 作者普通样式
4. 正在动画的样式
5. 作者重要样式
6. 用户重要样式
7. 用户代理重要样式
8. 正在过渡的样式

用 <style> 元素直接在元素上声明的样式是作者样式。不包括动画和过渡样式，用户代理普通样式具有最低优先权；用户代理重要样式具有最高优先权。

[!note]+

1. 你永远无法记住所有的 CSS 属性，善用参考资料：MDN CSS reference 和 GPT
2. 善用浏览器的开发者面板在页面上及时编辑 CSS。

CSS 运行逻辑

前面在 LearnWeb00-Web入门 中简单提及了浏览器以及 CSS 起了什么作用，这里则是对于 CSS 是如何具体参与进页面的渲染的讲解，包括早该知道的 DOM 的定义也会在这里介绍，是 CSS 是如何运行的读书笔记。

浏览器获取了 HTML 之后：

1. 会拉取其所依赖的所有 CSS，JS 和静态资源（Parser HTML）
2. 解析 HTML 代码，根据其中的 Tag、Class、ID 和相互之间的关系将 HTML 解析成 DOM ，每个元素作为其中的一个节点放进相对应的桶中。（元素桶、ID 桶之类）

紧接着，在拉取完 CSS 之后，浏览器开始解析 CSS，基于 CSS 中的选择器找到每个样式所属的 DOM 节点，并将其添加进去。

最后基于最终的 DOM(Document Object Model) 渲染出完整的页面，这里对 DOM 进行一个简单的解释：

一个 DOM 有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM 或 DOM node）。节点由节点本身和其他 DOM 节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

此外浏览器在渲染过程中如果遇到了位置的 CSS 会直接跳过相应的 CSS ，然后渲染下一个规则。

[!summary]+
在前文 web 入门中已经简单介绍了 CSS 是如何起作用，如何与 HTML 进行相互合作的，本篇主要简单介绍如何编写 CSS 文件中的各种样式。

ref: mdn css入门 | MDN css属性大全

在本文及后续的尝试中，都使用单独 CSS 文件外挂的格式，该种格式的结构会更清晰，即将下述代码放入 HTML 文件的 Head 部分。

1

<link rel="stylesheet" href="styles/style.css" />

href 部分需要替换为自己实际存放 css 文件的地址即可，此外也简单重复一下剩下的两种使用 CSS 的方式：内部样式表和内联样式表

• 内部样式表即在 HTML 的 Head 部分添加 <style>your css code</style> 将 CSS 代码都包裹起来
• 内联样式表即在特定元素中定义 style 属性，<p style="your css code"> 在 style 属性中填充需要的 CSS 代码。

接下来进入正文，讲解 css 部分的组成和编写规则。

Pattern 基础范式

The Principle to Write Css.

这是一个最基本的 CSS 结构，更为专业的名称是 CSS 规则集（简称为规则），其组成分成一下几个部分：

• 选择器 Selector：类似表格中的筛选，筛选这个规则使用的范围，针对 Class、ID、Tag 等不同类型有不同的选择器写法
• 属性 Property: 选择要修改的属性，如颜色，大小，位置灯多重类型。
• 属性值 Property value: 各种对应属性的取值，如具体的哪个颜色，字体多大等。
• 声明 Declaration：由属性和属性值组成的一条单独的规则，指定一种特定的样式。

上述结构称为规则集，因为其可以同时包含多个规则（即声明），编写时有以下约定：

• 每个规则使用 ; 作为结尾的分割
• 同一个规则集的规则需要编写在 {} 之中
• 属性和属性值为 K-V 对，声明时使用 : 作为分割符，且属性和值均不区分大小写

注释方法

1
2
3

/*
all between those two symbol is comment.
*/

[!summary]+
Familiar with the pipeline of how to build a website, how to organize the files, etc…

Start Design

开始设计一个网站的时候，可以从以下三个方面入手来启动整个开发设计过程：网站的主题->基础的一些内容->整体的外观设计（草稿）

更具体一些：确定完要制作的网页，可以绘制草图有一个粗浅的整体效果，然后指定文本、图像、色彩、字体等资源，就可以开始制作了。

File Structure

关于项目中的文件命名，需要注意的是以下的三点，建议养成这样的规范去建立网页文件夹。

• 建议使用完全小写来命名文件，webserver 是大小写敏感的，所以复杂的大小写关系容易导致访问不到文件。
• 尽量不要使用空格，空格可能会破坏链接被视为两个文件等，如果没有被区分很多服务器也需要使用 %20 对空格进行替换
• 尽量使用连字符代替下划线进行文件命名，google 搜索引擎将连字符作为单词的分割符，而不会识别下划线

而文件存储结构部分，通常而言，有以下的关键文件和文件夹结构，在很多场景下也会将 image 等文件夹放到 static 文件夹中。

• index.html
• styles: 存放 css 文件
• images: 存放图片等媒体资源文件
• scripts: 存放 js 等脚本代码文件

资源的文件路径一般而言以 html 为 Basepath，然后根据上下级关系确认索引地址即可。

[!summary]+
Web 前端开发者路线学习，基本的目的是能够为自己想做的项目搭建前端界面，从 web 开始再到各个移动设备的前端 UI，基于 Mdn 课程，Roadmap 具体项目逐步推进对各个知识点的学习。

根据下面的课程、Roadmap、搭建自己的知识架构，在搭建过程中结合具体的项目，包括自己部署的界面去逐步实践，完善和熟悉整个知识体系和技术栈，并通过和现代 AI 辅助工具的合作，建立自己独立的前端开发流。

• Roadmap For Beginner
• Roadmap For All
• Mdn Web Tutor

Be Ready 准备以及基础了解

• 基础：开发环境准备、页面设计、文件架构规划（由于网站需要包含多种代码、文本、素材、因此如何组织文件是相当重要的）
• 语言：HTML 、CSS、JS 三驾马车为一个网页必不可少的要素，通过结合各自不同的功能来实现多样化的页面设计。

What’s WEB

What’s WEB? 通过 URL 统一资源定位符向服务器请求 HTML，HTML 通过包含的信息告诉 Browse 需要额外的信息来呈现该页面，因此基于 HTML 提供的信息 web browser 继续请求资源、CSS、JS 等文件，并将这些文件按照 HTML 的描述进行组合最终呈现完整的页面。