From e1aab88f5b3682b7a67ac08946c376c1746a0f52 Mon Sep 17 00:00:00 2001 From: pengshiyu <1940607002@qq.com> Date: Tue, 25 Jan 2022 10:14:02 +0800 Subject: [PATCH] fix --- blog/front-end-learn/css-decorate.md | 80 ++++++++++++++++- blog/front-end-learn/css-position.md | 14 +++ blog/front-end-learn/css-product-2.md | 83 ++++++++++++++++++ .../front-end-learn/demo/css-decorate-13.html | 32 +++++++ .../front-end-learn/demo/css-decorate-14.html | 9 ++ .../front-end-learn/demo/css-decorate-15.html | 15 ++++ blog/front-end-learn/demo/css-position-1.html | 28 ++++++ blog/front-end-learn/demo/css-position-2.html | 27 ++++++ blog/front-end-learn/demo/img/jd-sprite.png | Bin 0 -> 9322 bytes blog/front-end-learn/index.md | 2 + 10 files changed, 289 insertions(+), 1 deletion(-) create mode 100644 blog/front-end-learn/css-product-2.md create mode 100644 blog/front-end-learn/demo/css-decorate-13.html create mode 100644 blog/front-end-learn/demo/css-decorate-14.html create mode 100644 blog/front-end-learn/demo/css-decorate-15.html create mode 100644 blog/front-end-learn/demo/css-position-1.html create mode 100644 blog/front-end-learn/demo/css-position-2.html create mode 100644 blog/front-end-learn/demo/img/jd-sprite.png diff --git a/blog/front-end-learn/css-decorate.md b/blog/front-end-learn/css-decorate.md index bcafaf4..7ab41ba 100644 --- a/blog/front-end-learn/css-decorate.md +++ b/blog/front-end-learn/css-decorate.md @@ -159,4 +159,82 @@ background-color: rgba(0, 0, 0, 0.5); [](demo/css-decorate-12.html ':include height=120') -https://www.bilibili.com/video/BV1Kg411T7t9?p=166&spm_id_from=pageDriver +## 精灵图（雪碧图, sprite） + +将多张小图合并成一张大图 + +- 优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度 +- 缺点：修改起来比较麻烦 + +精灵图使用步骤 + +1. 设置盒子尺寸和小图尺寸相同 + +2. 将精灵图设置为盒子的背景图片 + +3. 修改背景图位置 + +[](demo/css-decorate-13.html ':include :type=code') + +[](demo/css-decorate-13.html ':include height=70') + +## 背景图片大小 background-size + +```css +background-size: 宽度 高度; +``` + +| 取值 | 场景 | +| ------- | -------------------------------------------------------------------- | +| 数字+px | 简单方便 | +| 百分比 | 相对于当前盒子自身的宽高百分比 | +| contain | 包含，背景图等比缩放，直到不会超出盒子的最大，可能有留白 | +| cover | 覆盖，背景图等比缩放，直到刚好填满整个盒子没有空白，图片可能显示不全 | + +background 连写 + +```css +background： color image repeat position/size; +``` + +## 盒子阴影 box-shadow + +| 参数 | 作用 | +| -------- | -------------------------- | +| h-shadow | 必须，水平偏移量，允许负值 | +| v-shadow | 必须，垂直偏移量，允许负值 | +| blur | 可选，模糊度 | +| spread | 可选，阴影扩大 | +| color | 可选，阴影颜色 | +| inset | 可选，将阴影改为内部阴影 | + +[](demo/css-decorate-14.html ':include :type=code') + +[](demo/css-decorate-14.html ':include height=120') + +## 过渡 transition + +- 让元素样式慢慢变化 + +- 常配合 hover 使用 + +```css +transition 属性 时长, 属性 时长; +``` + +| 参数 | 取值 | +| -------- | ---------------------------- | +| 过渡属性 | 所有属性 all；具体属性 width | +| 过渡时长 | 数字 + s(秒) | + +注意： + +- 过渡需要默认状态和 hover 样式不同，才能有过渡效果 +- transition 属性给需要过渡的元素本身加 +- transition 属性设置在不同状态中，效果不同 + - 给默认状态设置，鼠标移入移出都有过渡效果 + - 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果 + +[](demo/css-decorate-15.html ':include :type=code') + +[](demo/css-decorate-15.html ':include height=120') diff --git a/blog/front-end-learn/css-position.md b/blog/front-end-learn/css-position.md index 5d1aef0..07f2c08 100644 --- a/blog/front-end-learn/css-position.md +++ b/blog/front-end-learn/css-position.md @@ -100,3 +100,17 @@ positions: fixed; /* 默认值0；数值越大，显示越靠前 */ z-index: 数值; ``` + +## 案例：子盒子在父盒子中水平居中 + +方式一：margin + +[](demo/css-position-1.html ':include :type=code') + +[](demo/css-position-1.html ':include height=520') + +方式二：transform + +[](demo/css-position-2.html ':include :type=code') + +[](demo/css-position-2.html ':include height=520') diff --git a/blog/front-end-learn/css-product-2.md b/blog/front-end-learn/css-product-2.md new file mode 100644 index 0000000..e5f7e0d --- /dev/null +++ b/blog/front-end-learn/css-product-2.md @@ -0,0 +1,83 @@ +# CSS 实战 2 + +## 网站骨架结构标签 + +```html + + + + + + + + + + + + + +``` + +## SEO + +Search Engine Optimization 搜索引擎优化 + +提升网站排名方法： + +1. 竞价排名 + +2. 将网页制作成 html 后缀 + +3. 标签语义化，适合的地方使用合适的标签 + +## SEO 三大标签 + +1. title 标题 + +2. description 描述 + +3. keywords 关键词，英文逗号分隔 + +```html +Coding Tree + + + + +``` + +## icon 图标 + +favicon.ico 文件放根路径 + +```html + +``` + +## 项目结构搭建 + +文件和目录准备 + +``` +favicon.ico + +index.html 首页 + +css/ + + base.css 基本公共的样式 清除浏览器默认样式 + + common.css 重复使用样式 网页头，网页尾 + + index.css 页面单独的样式 + +images/ 固定使用的图片素材 + +uploads/ 非固定使用的图片素材 + +``` + +https://www.bilibili.com/video/BV1Kg411T7t9?p=177&spm_id_from=pageDriver diff --git a/blog/front-end-learn/demo/css-decorate-13.html b/blog/front-end-learn/demo/css-decorate-13.html new file mode 100644 index 0000000..c521c17 --- /dev/null +++ b/blog/front-end-learn/demo/css-decorate-13.html @@ -0,0 +1,32 @@ + + +
+
+
+
\ No newline at end of file diff --git a/blog/front-end-learn/demo/css-decorate-14.html b/blog/front-end-learn/demo/css-decorate-14.html new file mode 100644 index 0000000..ea9d12a --- /dev/null +++ b/blog/front-end-learn/demo/css-decorate-14.html @@ -0,0 +1,9 @@ + + +
\ No newline at end of file diff --git a/blog/front-end-learn/demo/css-decorate-15.html b/blog/front-end-learn/demo/css-decorate-15.html new file mode 100644 index 0000000..e9624d3 --- /dev/null +++ b/blog/front-end-learn/demo/css-decorate-15.html @@ -0,0 +1,15 @@ + + +
\ No newline at end of file diff --git a/blog/front-end-learn/demo/css-position-1.html b/blog/front-end-learn/demo/css-position-1.html new file mode 100644 index 0000000..9cc444f --- /dev/null +++ b/blog/front-end-learn/demo/css-position-1.html @@ -0,0 +1,28 @@ + + +
+
+
\ No newline at end of file diff --git a/blog/front-end-learn/demo/css-position-2.html b/blog/front-end-learn/demo/css-position-2.html new file mode 100644 index 0000000..242ff6c --- /dev/null +++ b/blog/front-end-learn/demo/css-position-2.html @@ -0,0 +1,27 @@ + + +
+
+
\ No newline at end of file diff --git a/blog/front-end-learn/demo/img/jd-sprite.png b/blog/front-end-learn/demo/img/jd-sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..3c58d91d5c1f9685e204a8a4972e75830b831e4c GIT binary patch literal 9322 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 W^b&o`9QY2=79UT4k2}bSoc{qTZBRM@ literal 0 HcmV?d00001 diff --git a/blog/front-end-learn/index.md b/blog/front-end-learn/index.md index cb423e5..5bf37de 100644 --- a/blog/front-end-learn/index.md +++ b/blog/front-end-learn/index.md @@ -37,3 +37,5 @@ 11. [CSS 定位](blog/front-end-learn/css-position.md) 12. [CSS 装饰](blog/front-end-learn/css-decorate.md) + +13. [CSS 实战 2](blog/front-end-learn/css-product-2.md) -- GitLab