diff --git a/blog/front-end-learn/css-decorate.md b/blog/front-end-learn/css-decorate.md index bcafaf420902591bba51dd4a2900aad6bfbc7cdf..7ab41ba15bb4ffafb662535a2d1eef32a27559b7 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 5d1aef0db391be6c9517064d192947adf53b3fe1..07f2c0847371603edbe2ea54e5c25a1f299299d7 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 0000000000000000000000000000000000000000..e5f7e0d4a5773540dadd9eb800705078dbde20f5 --- /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 0000000000000000000000000000000000000000..c521c1708c4c6eb5f14d7c427e962985dc10231a --- /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 0000000000000000000000000000000000000000..ea9d12a798b4f7700cbd59d8b5c378c29015fc03 --- /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 0000000000000000000000000000000000000000..e9624d39c5dca9fb9fd452cbc612ba06fa3beae2 --- /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 0000000000000000000000000000000000000000..9cc444ff8b959b7ac3636f2d8cf8f72b4990bd98 --- /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 0000000000000000000000000000000000000000..242ff6c151df3b8f0c9324fef049b93aec0100e1 --- /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 Binary files /dev/null and b/blog/front-end-learn/demo/img/jd-sprite.png differ diff --git a/blog/front-end-learn/index.md b/blog/front-end-learn/index.md index cb423e5f340454f19ce02452fd7380b0427eb8f2..5bf37dedd60b943c31018c64036ad1913515f2d0 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)