更新常用CSS样式等

Author: kagurazakayashi

README.md

@@ -21,37 +21,32 @@
 - **热重载**：CSS 和 JS 文件进行保存时会自动更新浏览器中的网页。
   - 建议打开浏览器「开发者工具」-「网络」-「停用缓存」功能。
 - **快速启动**：在 `Visual Studio Code` 中，按 `F5` 可立即启动项目（编译、打开浏览器、热重载）。
-- **暗色模式和响应式布局**：CSS 中带有系统暗色模式跟随和响应式布局的示例代码。
+- **暗色模式和响应式布局**：CSS 中带有很多常用代码结构，包括系统暗色模式跟随和响应式布局。
 - **ES6**：目前几乎所有主流浏览器已经支持 ES6 ，因此默认使用新一些的 ES6 标准。如果面向低版本浏览器用户可以自行改回 ES5 。
   - 可以通过 [前端兼容性检查器](https://github.com/miyabi-project/frontend-compatibility-checker) 为用户提供一个降级跳转。
 - **调试网页服务器配置优化**：调试服务器自动添加关闭跨域和缓存的请求头
 
-### 代码格式
+## 可用 npm run 命令
 
-详见 `.editorconfig`
-
-- 通用
-  - `end_of_line = lf`: unix 风格的换行符
-  - `insert_final_newline = true`: 每个文件都以换行符结尾
-  - `indent_style = space`: 使用空格缩进
-  - `charset = utf-8`: 编码格式统一 utf-8
-  - `indent_size = 2`: 2 个空格缩进
-- HTML
-  - `indent_size = 4`: 4 个空格缩进
-- BAT
-  - `charset = ansi`: ANSI 编码
-  - `end_of_line = crlf`: windows 风格的换行符
-  - `indent_size = 4`: 4 个空格缩进
+- `npm run build`: 进行测试环境的生成。
+- `npm run release`: 进行生产环境的生成。
+- `npm run serve`: 进行测试环境的调试，打开浏览器并热更新网页。
+  - `npm run debug`: 同上，但单独启动热更新和网页服务器。在 Windows 系统中应使用 `debug.bat` 启动。
+- `npm run watch`: 仅进行热更新，不打开网页服务器和浏览器。
+- `npm run clean`: 清理生成的文件。`release` 和 `serve` 会自动执行此步骤，其他需自行运行。
 
-### 编码环境
-
-本模板在以下环境下开发并针对以下环境进行优化。
+## 使用
 
-- 编辑器： `Visual Studio Code`
-  - 推荐插件：
-    - `EditorConfig for VS Code`: 使 `.editorconfig` 配置生效。
-    - `Prettier - Code formatter`: 设置为 ts 的默认格式化插件。
-- 浏览器： `Google Chrome`
+1. 使用 Github 的通过模板创建功能，或者自行下载 zip 来创建自己的仓库。
+2. 修改 `package.json` 中所有的项目信息和版权信息为自己的。
+3. 修改 `README.md` 和 `LICENCE` 为自己的。
+4. 执行 `npm i` 下载第三方库。
+5. 在 `src/images` 中存放你的多媒体素材。
+6. 打开 `src/html/index.html` 编辑网页结构。
+7. 打开 `src/css/style.css` 编辑 CSS 样式。
+8. 打开 `src/main.ts` 编辑代码。
+9. 执行 `npm run serve` 启动项目。
+10. 将生成好的网页 `index.html` 和 `dist` 文件夹一起复制到网页服务器。
 
 ## 注意事项
 
@@ -67,35 +62,40 @@
   - `*.ts`: TS 源代码
 - `index.html`: 生成好的网页
 
-## 使用
+## 编码环境
 
-1. 使用 Github 的通过模板创建功能，或者自行下载 zip 来创建自己的仓库。
-2. 修改 `package.json` 中所有的项目信息和版权信息为自己的。
-3. 修改 `README.md` 和 `LICENCE` 为自己的。
-4. 执行 `npm i` 下载第三方库。
-5. 在 `src/images` 中存放你的多媒体素材。
-6. 打开 `src/html/index.html` 编辑网页结构。
-7. 打开 `src/css/style.css` 编辑 CSS 样式。
-8. 打开 `src/main.ts` 编辑代码。
-9. 执行 `npm run serve` 启动项目。
-10. 将生成好的网页 `index.html` 和 `dist` 文件夹一起复制到网页服务器。
+本模板在以下环境下开发并针对以下环境进行优化。
+
+- 编辑器： `Visual Studio Code`
+  - 推荐插件：
+    - `EditorConfig for VS Code`: 使 `.editorconfig` 配置生效。
+    - `Prettier - Code formatter`: 设置为 ts 的默认格式化插件。
+- 浏览器： `Google Chrome`
 
-### 可用 NPM 脚本
+## 代码格式
+
+详见 `.editorconfig`
 
-- `build`: 进行测试环境的生成。
-- `release`: 进行生产环境的生成。
-- `serve`: 进行测试环境的调试，打开浏览器并热更新网页。
-  - `debug`: 同上，但单独启动热更新和网页服务器。在 Windows 系统中应使用 `debug.bat` 启动。
-- `watch`: 仅进行热更新，不打开网页服务器和浏览器。
-- `clean`: 清理生成的文件。`release` 和 `serve` 会自动执行此步骤，其他需自行运行。
+- 通用
+  - `end_of_line = lf`: unix 风格的换行符
+  - `insert_final_newline = true`: 每个文件都以换行符结尾
+  - `indent_style = space`: 使用空格缩进
+  - `charset = utf-8`: 编码格式统一 utf-8
+  - `indent_size = 2`: 2 个空格缩进
+- HTML
+  - `indent_size = 4`: 4 个空格缩进
+- BAT
+  - `charset = ansi`: ANSI 编码
+  - `end_of_line = crlf`: windows 风格的换行符
+  - `indent_size = 4`: 4 个空格缩进
 
-## 部分构造细节
+## 初始化内容
 
 - `npm install --save-dev typescript ts-loader webpack webpack-cli http-server webpack-dev-server html-webpack-plugin css-loader mini-css-extract-plugin css-minimizer-webpack-plugin terser-webpack-plugin`
 - `./node_modules/typescript/bin/tsc --init`
 
 ## 协议
 
-- 根据本模板创建的项目可以自由变更许可协议，请尽快将作者信息、项目信息、许可信息改为自己的。
+- 根据本模板创建的项目可以自由变更许可协议， **请尽快将作者信息、项目信息、许可信息改为自己的。**
 
 Copyright (c) 2022 KagurazakaYashi typescript-web-template is licensed under Mulan PSL v2. You can use this software according to the terms and conditions of the Mulan PSL v2. You may obtain a copy of Mulan PSL v2 at: http://license.coscl.org.cn/MulanPSL2 THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. See the Mulan PSL v2 for more details.