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 0000000000000000000000000000000000000000..4a9e03e6479d5ad53412e18e958f5b2f2b184ca2 --- /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 0000000000000000000000000000000000000000..76e43d8a33a1dfc12a5daed33e09b02c0ae777ee --- /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 0000000000000000000000000000000000000000..ca59d97c57e3a66407b2ffb9734a156b192071a0 --- /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 0000000000000000000000000000000000000000..ae80a75d114273ad6b8bf4b1ca05d67cad5dba80 --- /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 75df94667ad6304c5e6d1244ed7bf0da6c888197..36059974b844dddda60c41727aa8d5461e2d19c7 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 198b34131e2fda9823115bc244d24d42c3b3d517..318a54a4e088c14ea0e41edc6cbb75118dcf46f8 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 0000000000000000000000000000000000000000..1bbea7dd7933471b0f6e3857140c7991b1d25ae9 --- /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 a7618505cd2ca17f30ff4ecae0efcb98eaa91a20..d63cebda4f5a29a4bda1bfed4b466d1d9a104c65 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 0000000000000000000000000000000000000000..6e7705dc8a4370c9dbe507a628f0b1738c23b082 --- /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 fa01c5a74b445bbe1bb6b80e55caa43d4541b3f2..b65e5f8690ec613fcb905121568bcf9517c8b07a 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 fc5a2816dd1ba630062b88e9679a8bc3181dc881..bd0f9a1ab215d1fbe9169a70db7dededce77841d 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