Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

通知 2
Star 0
Fork 0
C
Coding Tree
提交 2f58c204 编写于 作者: 彭世瑜's avatar 彭世瑜
浏览文件
操作

fix

上级 937951c7
隐藏空白更改
内联 并排
Showing with 432 addition and 28 deletion
blog/front-end-combat/demo/flex-overflow.html 0 → 100644
浏览文件 @ 2f58c204
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.box-wrap {
margin: 0 auto;
display: flex;
align-items: center;
width: 500px;
}
.box-left {
width: 200px;
height: 100px;
background-color: skyblue;
}
/* 注意父级需要增加的属性 */
/* 溢出显示省略号 */
/* 弹性盒子的尺寸可以被内容撑开*/
.box-right {
flex: 1;
width: 0;
border: 1px solid #666;
}
.box-right__content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<div class="box-wrap">
<div class="box-left"></div>
<div class="box-right">
<div class="box-right__title">长恨歌 白居易 〔唐代〕</div>
<div class="box-right__content">天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
blog/front-end-combat/demo/flexible.js.html 0 → 100644
浏览文件 @ 2f58c204
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<style>
.box {
width: 5rem;
height: 2rem;
background-color: skyblue;
}
</style>
<div class="box"></div>
<script src="https://cdn.jsdelivr.net/npm/amfe-flexible@2.2.1/index.min.js"></script>
</body>
</html>
\ No newline at end of file
blog/front-end-combat/demo/media.html 0 → 100644
浏览文件 @ 2f58c204
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<style>
@media (width: 375px) {
html {
font-size: 37.5px;
}
}
@media (width: 320px) {
html {
font-size: 32px;
}
}
.box {
width: 5rem;
height: 2rem;
background-color: skyblue;
}
</style>
<div class="box"></div>
</body>
</html>
\ No newline at end of file
blog/front-end-combat/demo/rem-1.html 0 → 100644
浏览文件 @ 2f58c204
<body>
<style>
/* html字号默认 16px */
.box {
/* 16 * 5 = 80px */
width: 5rem;
/* 16 * 2 = 32px */
height: 2rem;
background-color: skyblue;
}
</style>
<div class="box"></div>
</body>
\ No newline at end of file
blog/front-end-combat/flex.md
浏览文件 @ 2f58c204
......@@ -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')
blog/front-end-combat/index.md
浏览文件 @ 2f58c204
# 笔记：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 框架
blog/front-end-combat/less.md 0 → 100644
浏览文件 @ 2f58c204
# 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
blog/front-end-combat/mobile.md
浏览文件 @ 2f58c204
......@@ -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')
blog/front-end-combat/practice.md 0 → 100644
浏览文件 @ 2f58c204
# 实战
## 项目目录
```
less/
css/
images/
uploads/
js/
lib/
favicon.ico
index.html
```
## 移动适配
```css
// 根字号基量 基于375px的设计图
@rootSize: 37.5rem;
.box{
// px => rem
width: (50 / @rootSize);
}
```
doc/css.md
浏览文件 @ 2f58c204
......@@ -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
doc/index.md
浏览文件 @ 2f58c204
......@@ -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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或