chore: add 4.3.4 文本优化 (#120)

* chore: add 4.3.4 文本优化

* Update 7.1.1.1基础部分.md

chore: 文本优化 更换已失效网址
This commit is contained in:
FallenYing
2023-09-17 13:53:05 +08:00
committed by GitHub
parent 2315f1d7e3
commit 99f997e803
4 changed files with 118 additions and 114 deletions

View File

@@ -23,11 +23,11 @@
::: warning 🎈
**快速上手的参考建议**
**HTML**** **可以先认知常用标签( body / div / span / a / img 等)及其常用属性
**HTML**可以先认知常用标签body / div / span / a / img 等)及其常用属性
**CSS**了解常见的颜色属性(字体颜色 / 背景颜色 / 边框颜色 等)、字体相关属性(字号 / 字重 / 行高 等、盒子模型padding / border / margin、用于布局的属性float / flex / grid、单位px / rem / em / vh / vw 等、选择器id 选择器 / 类选择器 等)
**JS**** **了解基本语法(变量定义 / 判断 / 循环 / 函数定义 / etc与 DOM 操作
**JS**了解基本语法(变量定义 / 判断 / 循环 / 函数定义 / etc与 DOM 操作
涉及**前后端交互**的部分可以了解 fetch 的使用
@@ -39,7 +39,7 @@
### 🥂 助手介绍网页的重写
设计部姐姐给了前端部一个助手介绍网页的设计稿,但是 psyq 觉得[目前的助手介绍网页](https://site.hduhelp.com/)写得不是很还原,你可以帮 psyq 重写一个更好看的网页吗?
设计部姐姐给了前端部一个助手介绍网页的设计稿,但是 psyq 觉得[目前的助手介绍网页](https://www.hduhelp.com/)写得不是很还原,你可以帮 psyq 重写一个更好看的网页吗?
设计稿如下:
@@ -81,7 +81,7 @@
- 书写/引入 js 使用 `<script>`
- 使用 CSS 为页面赋予样式
- 了解常见网页布局(了解 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)[flex ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)/ [grid ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid)布局,综合运用不同布局来完成页面)
- 了解常见网页布局(了解 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)[flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)/ [grid](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid)布局,综合运用不同布局来完成页面)
- 使用 [css 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors)选中 HTML 元素添加样式([id 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors) / [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors) / etc.
- 自适应布局(查阅 `媒体查询`
- 交互渐变动效(查阅 css 属性: `transition``animation`
@@ -117,7 +117,7 @@
- 在交互时适当添加缓动效果
- 设计定时 todo可在用户设定的时间点对用户进行提醒
- 实现不同设备屏幕尺寸的自适应
- 添加任务热力图(可以参考一下 GitHub 个人主页哦 🤔)
- 添加任务热力图 (可以参考一下 GitHub 个人主页哦 🤔)
![](https://cdn.xyxsw.site/boxcncVQswB7ziUoV4LvEs35DAe.png)
@@ -135,7 +135,7 @@
- 书写/引入 js 使用 `<script>`
- 使用 css 为页面赋予样式
- 了解常见网页布局(了解 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)[flex ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)/ [grid ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid)布局,综合运用不同布局来完成页面)
- 了解常见网页布局(了解 [float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)[flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)/ [grid](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid)布局,综合运用不同布局来完成页面)
- 使用 [css 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors)选中 HTML 元素添加样式([id 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors) / [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors) / etc.
- 自适应布局(查阅 `媒体查询`
- 交互渐变动效(查阅 css 属性: `transition``animation`
@@ -144,10 +144,10 @@
- 获取网页中的待办项(查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
- 添加新的待办项(查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
- 删除网页中的待办项(查阅 [DOM 操作入门](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
- 监听待办项的点击事件,以改变待办项的状态(查阅[ click 单击事件](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/click_event)
- 监听待办项的点击事件,以改变待办项的状态(查阅[click 单击事件](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/click_event)
- 将当前待办项列表存储在本地(查阅 [localStorage(较简单)](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)、[IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API) 文档)
- 远程请求后端接口(了解 [fetch ](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)和[ js 异步](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous)
- 定时提醒用户待办的时间(查阅 [setTimeout ](https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout)/ [setInterval](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval)
- 远程请求后端接口(了解 [fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)和[js 异步](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous)
- 定时提醒用户待办的时间(查阅 [setTimeout](https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout)/ [setInterval](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval)
#### 小提示