From 2f58c2044ea66d58039d95e481784f91aa88ecc2 Mon Sep 17 00:00:00 2001 From: pengshiyu <1940607002@qq.com> Date: Mon, 21 Feb 2022 09:33:28 +0800 Subject: [PATCH] fix --- blog/front-end-combat/demo/flex-overflow.html | 44 +++++ blog/front-end-combat/demo/flexible.js.html | 22 +++ blog/front-end-combat/demo/media.html | 32 ++++ blog/front-end-combat/demo/rem-1.html | 14 ++ blog/front-end-combat/flex.md | 54 ++++--- blog/front-end-combat/index.md | 9 +- blog/front-end-combat/less.md | 153 ++++++++++++++++++ blog/front-end-combat/mobile.md | 90 +++++++++++ blog/front-end-combat/practice.md | 26 +++ doc/css.md | 2 + doc/index.md | 14 +- 11 files changed, 432 insertions(+), 28 deletions(-) create mode 100644 blog/front-end-combat/demo/flex-overflow.html create mode 100644 blog/front-end-combat/demo/flexible.js.html create mode 100644 blog/front-end-combat/demo/media.html create mode 100644 blog/front-end-combat/demo/rem-1.html create mode 100644 blog/front-end-combat/less.md create mode 100644 blog/front-end-combat/practice.md diff --git a/blog/front-end-combat/demo/flex-overflow.html b/blog/front-end-combat/demo/flex-overflow.html new file mode 100644 index 0000000..4a9e03e --- /dev/null +++ b/blog/front-end-combat/demo/flex-overflow.html @@ -0,0 +1,44 @@ + + + + + + +
+
+
+
长恨歌 白居易 〔唐代〕
+
天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。
+
+
+ + + \ No newline at end of file diff --git a/blog/front-end-combat/demo/flexible.js.html b/blog/front-end-combat/demo/flexible.js.html new file mode 100644 index 0000000..76e43d8 --- /dev/null +++ b/blog/front-end-combat/demo/flexible.js.html @@ -0,0 +1,22 @@ + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/blog/front-end-combat/demo/media.html b/blog/front-end-combat/demo/media.html new file mode 100644 index 0000000..ca59d97 --- /dev/null +++ b/blog/front-end-combat/demo/media.html @@ -0,0 +1,32 @@ + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/blog/front-end-combat/demo/rem-1.html b/blog/front-end-combat/demo/rem-1.html new file mode 100644 index 0000000..ae80a75 --- /dev/null +++ b/blog/front-end-combat/demo/rem-1.html @@ -0,0 +1,14 @@ + + + +
+ \ No newline at end of file diff --git a/blog/front-end-combat/flex.md b/blog/front-end-combat/flex.md index 75df946..3605997 100644 --- a/blog/front-end-combat/flex.md +++ b/blog/front-end-combat/flex.md @@ -67,19 +67,17 @@ Flex 布局模型中，可以调节主轴或侧轴的对齐方式来设置盒子 [](demo/flex-1.html ':include') - - ## 侧轴对齐方式 align-items 容器属性 align-items 元素属性 align-self -属性值 | 作用 -- | - -flex-start | 默认值，起点开始依次排列 -flex-end | 重点开始依次排列 -center | 沿侧轴居中排列 -stretch | 默认值，弹性盒子沿着主轴线被拉伸至铺满容器 +| 属性值 | 作用 | +| ---------- | ------------------------------------------ | +| flex-start | 默认值，起点开始依次排列 | +| flex-end | 重点开始依次排列 | +| center | 沿侧轴居中排列 | +| stretch | 默认值，弹性盒子沿着主轴线被拉伸至铺满容器 | 示例: @@ -87,10 +85,10 @@ stretch | 默认值，弹性盒子沿着主轴线被拉伸至铺满容器 [](demo/flex-align.html ':include height=900') - -## 伸缩比flex +## 伸缩比 flex 语法 + ```css flex: 数值; ``` @@ -103,7 +101,6 @@ flex: 数值; [](demo/flex-flex.html ':include height=220') - 移动端触发区域默认大小 44x44 ## 主轴方向 flex-direction @@ -112,12 +109,12 @@ flex: 数值; 主轴默认是水平方向，侧轴默认是垂直方向 -属性值 | 作用 -- | - -row | 默认值，行，水平 -column | 列，垂直 -row-reverse | 行，从右往左 -column-reverse | 列，从下到上 +| 属性值 | 作用 | +| -------------- | ---------------- | +| row | 默认值，行，水平 | +| column | 列，垂直 | +| row-reverse | 行，从右往左 | +| column-reverse | 列，从下到上 | 示例: @@ -130,19 +127,19 @@ column-reverse | 列，从下到上 实现多行排列效果 语法 + ```css -felx-wrap: nowrap/wrap +felx-wrap: nowrap/wrap; ``` -属性值 | 作用 -- | - -nowrap | 默认值，不换行 -wrap | 换行 - +| 属性值 | 作用 | +| ------ | -------------- | +| nowrap | 默认值，不换行 | +| wrap | 换行 | -## 行对齐方式 align-content +## 行对齐方式 align-content -取值和justify-content基本相同 +取值和 justify-content 基本相同 示例: @@ -150,5 +147,10 @@ wrap | 换行 [](demo/felx-wrap.html ':include height=620') +## Flex 溢出隐藏 + +示例: + +[](demo/flex-overflow.html ':include :type=code') -https://www.bilibili.com/video/BV1xq4y1q7jZ?p=89&spm_id_from=pageDriver \ No newline at end of file +[](demo/flex-overflow.html ':include height=120') diff --git a/blog/front-end-combat/index.md b/blog/front-end-combat/index.md index 198b341..318a54a 100644 --- a/blog/front-end-combat/index.md +++ b/blog/front-end-combat/index.md @@ -1,6 +1,9 @@ # 笔记：web 前端开发进阶 HTML5+CSS3+移动端 -移动 web +视频：[黑马程序员web前端进阶教程，前端html5+css3+移动端项目实战](https://www.bilibili.com/video/BV1xq4y1q7jZ) + + +## 学习笔记 1. [字体图标 iconfont](blog/front-end-combat/iconfont.md) @@ -14,4 +17,8 @@ 6. [Flex 布局](blog/front-end-combat/flex.md) +7. [Less](blog/front-end-combat/less.md) + +8. [实战演练](blog/front-end-combat/practice.md) + - 响应式 BootStrap 框架 diff --git a/blog/front-end-combat/less.md b/blog/front-end-combat/less.md new file mode 100644 index 0000000..1bbea7d --- /dev/null +++ b/blog/front-end-combat/less.md @@ -0,0 +1,153 @@ +# Less + +less 一个 css 预处理器 + +网站： + +- [https://lesscss.org/](https://lesscss.org/) +- [https://less.bootcss.com/](https://less.bootcss.com/) + +作用： + +- 更简单的完成 css +- 扩充 css 语言，具备逻辑性，计算能力 +- 浏览器不识别 Less 代码 + +用途： + +- 保存 less 文件自动生成 css 文件 +- less 运算写法完成 px 单位到 rem 单位 + +VS Code 插件： Easy Less + +## 注释 + +``` +// 单行注释 快捷键 ctrl + ，单行注释不会出现在css / + +/* 快注释 快捷键 shift + alt + A */ +``` + +## 运算 + +- 加、减、乘直接书写表达式 +- 除法需要添加小括号或. + +```css +.box { + width: 100 + 10px; // 110px; + width: 100 - 20px; // 80px; + width: 100 * 2px; // 200px; + + // 除法 + // 推荐小括号写法 + width: (100 / 4px); // 25px; + // 不支持 height: 100 ./ 4px; // 25px; +} +``` + +输出 + +```css +.box { + width: 110px; + width: 80px; + width: 200px; + width: 25px; +} +``` + +## 嵌套 + +使用嵌套写法生成后代选择器 + +```css +.father { + color: red; + + .son { + width: 100px; + } +} +``` + +输出 + +```css +.father { + color: red; +} + +.father .son { + width: 100px; +} +``` + +`&` 表示当前选择器 + +## 变量 + +存储数据，方便使用和修改 + +语法 + +``` +// 定义变量 +@变量名：值; + +// 使用变量 +CSS属性：@变量名; +``` + +示例 + +```css +@color: red; + +.box { + color: @color; +} +``` + +输出 + +```css +.box { + color: red; +} +``` + +## 导入 less 文件 + +```css +// 可以省略后缀.less +@import './other.less'; +``` + +## 导出 css 文件 + +less 文件夹输出到 css 文件夹 + +VS Code 插件 Easy Less 设置 settings.json + +```json +{ + "less.compile": { + "out": "../css/" + } +} +``` + +控制单个文件导出路径,文件第一行指定输出路径 + +```css +// out: ./css/ +``` + +禁止导出 + +```css +// out: false +``` + +https://www.bilibili.com/video/BV1xq4y1q7jZ?p=130&spm_id_from=pageDriver \ No newline at end of file diff --git a/blog/front-end-combat/mobile.md b/blog/front-end-combat/mobile.md index a761850..d63cebd 100644 --- a/blog/front-end-combat/mobile.md +++ b/blog/front-end-combat/mobile.md @@ -38,3 +38,93 @@ ``` 二倍图：750px + +## 移动适配 + +解决方案： + +- rem 目前 +- vw/vh 未来 + +## rem + +rem 单位 + +- 相对单位 +- rem 单位是相对于 HTML 标签的字号计算结果 +- `1rem=1HTML` 字号大小 + +实现效果：屏幕宽度不同，网页元素尺寸不同（等比缩放） + +示例: + +[](demo/rem-1.html ':include :type=code') + +[](demo/rem-1.html ':include height=120') + +使用 rem 需要解决的问题 + +- 不同设备屏幕尺寸，设置不同的 HMLT 标签字号 +- 设备宽度不同，HTML 标签字号设置多少合适 + +rem 布局方案中，将网页等分成 10 份，HTML 标签的字号为视口宽度 `1/10` + +## rem 单位尺寸 + +确定设计稿对应的设备 HTML 标签字号 + +``` +基准根字号 = 设备宽度（视口宽度）/ 10 + +rem单位的尺寸 = px单位数值 / 基准根字号 + +eg: + +设计稿设备宽度 375px +设计稿元素宽度 75px +rem宽度 = 75px / (375px / 10) = 2rem +``` + +## 媒体查询 + +媒体查询 根据不同的视口宽度，设置差异化 css 样式 + +```css +@media (媒体特性) { + /* css样式 */ +} + +/* eg: */ + +@media (width: 375px) { + html { + font-size: 37.5px; + } +} + +@media (width: 320px) { + html { + font-size: 32px; + } +} +``` + +示例: + +[](demo/media.html ':include :type=code') + +[](demo/media.html ':include height=120') + +## flexible.js + +flexible.js 适配移动端的 js 框架 + +原理：根据不同的视口宽度，给网页 html 根节点设置不同的 font-size + +github: [https://github.com/amfe/lib-flexible](https://github.com/amfe/lib-flexible) + +示例: + +[](demo/flexible.js.html ':include :type=code') + +[](demo/flexible.js.html ':include height=120') diff --git a/blog/front-end-combat/practice.md b/blog/front-end-combat/practice.md new file mode 100644 index 0000000..6e7705d --- /dev/null +++ b/blog/front-end-combat/practice.md @@ -0,0 +1,26 @@ +# 实战 + +## 项目目录 + +``` +less/ +css/ +images/ +uploads/ +js/ +lib/ +favicon.ico +index.html +``` + +## 移动适配 + +```css +// 根字号基量 基于375px的设计图 +@rootSize: 37.5rem; + +.box{ + // px => rem + width: (50 / @rootSize); +} +``` diff --git a/doc/css.md b/doc/css.md index fa01c5a..b65e5f8 100644 --- a/doc/css.md +++ b/doc/css.md @@ -29,3 +29,5 @@ ## 第三方库 [CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/) + +[normalize.css](https://github.com/necolas/normalize.css/) \ No newline at end of file diff --git a/doc/index.md b/doc/index.md index fc5a281..bd0f9a1 100644 --- a/doc/index.md +++ b/doc/index.md @@ -36,10 +36,22 @@ Logo：https://www.logoly.pro/ docsify：https://docsify.js.org/ -学习资料： +[QRcode.show](https://qrcode.show/) : Generate QR code easily for free - QR Code Generation as a Service + +[姬长信API](https://api.isoyu.com/) 一个基于多种编程语言开源免费不限制提供生活常用,出行服务,开发工具,金融服务,通讯服务和公益大数据的平台. + +[starchart.cc](https://starchart.cc/) Plot your repository stars over time. + +[Cmder](https://cmder.net/): Windows下的终端工具 Portable console emulator for Windows + +## 学习资料： 2022 黑马程序员 Java 学习路线图 https://www.bilibili.com/read/cv9965357 黑马程序员 MySQL 数据库入门到精通，从 mysql 安装到 mysql 高级 https://www.bilibili.com/video/BV1Kr4y1i7ru + +## 网站 + +[电脑爱好者](https://www.cfan.com.cn/) \ No newline at end of file -- GitLab