Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

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

fix

上级 5ea0d913
显示空白变更内容
内联 并排
Showing with 289 addition and 1 deletion
blog/front-end-learn/css-decorate.md
浏览文件 @ e1aab88f
......@@ -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')
blog/front-end-learn/css-position.md
浏览文件 @ e1aab88f
......@@ -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')
blog/front-end-learn/css-product-2.md 0 → 100644
浏览文件 @ e1aab88f
# CSS 实战 2
## 网站骨架结构标签
```html
<!-- 文档类型声明，HTML5 -->
<!DOCTYPE html>
<!-- 网页语言，中文zh-CN -->
<html lang="en">
<!-- 网页字符编码 -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 移动端使用 -->
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
</html>
```
## SEO
Search Engine Optimization 搜索引擎优化
提升网站排名方法：
1. 竞价排名
2. 将网页制作成 html 后缀
3. 标签语义化，适合的地方使用合适的标签
## SEO 三大标签
1. title 标题
2. description 描述
3. keywords 关键词，英文逗号分隔
```html
<title>Coding Tree</title>
<meta name="description" content="Description" />
<meta name="keywords" content="keywords1,keywords2" />
```
## icon 图标
favicon.ico 文件放根路径
```html
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
```
## 项目结构搭建
文件和目录准备
```
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
blog/front-end-learn/demo/css-decorate-13.html 0 → 100644
浏览文件 @ e1aab88f
<style>
.box {
background-image: url('./img/jd-sprite.png');
background-repeat: no-repeat;
background-size: 113px 86.5px;
width: 36px;
height: 42px;
display: inline-block;
margin-right: 50px;
}
.box-1 {
background-position: 0 0;
}
.box-2 {
background-position: -38.5px 0;
}
.box-3 {
background-position: -77px 0;
}
.box-4 {
background-position: 0 -44.5px;
}
</style>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
\ No newline at end of file
blog/front-end-learn/demo/css-decorate-14.html 0 → 100644
浏览文件 @ e1aab88f
<style>
.box {
width: 100px;
height: 100px;
box-shadow: 0 10px 50px 8px #ccc;
}
</style>
<div class="box"></div>
\ No newline at end of file
blog/front-end-learn/demo/css-decorate-15.html 0 → 100644
浏览文件 @ e1aab88f
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
transition: all 2s;
}
.box:hover {
width: 200px;
background-color: pink;
}
</style>
<div class="box"></div>
\ No newline at end of file
blog/front-end-learn/demo/css-position-1.html 0 → 100644
浏览文件 @ e1aab88f
<style>
.box-wrap {
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
}
.box {
position: absolute;
left: 50%;
top: 50%;
/* 手动计算盒子的一半 */
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<div class="box-wrap">
<div class="box"></div>
</div>
\ No newline at end of file
blog/front-end-learn/demo/css-position-2.html 0 → 100644
浏览文件 @ e1aab88f
<style>
.box-wrap {
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
}
.box {
position: absolute;
left: 50%;
top: 50%;
/* 移动自身一半 */
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<div class="box-wrap">
<div class="box"></div>
</div>
\ No newline at end of file
blog/front-end-learn/index.md
浏览文件 @ e1aab88f
......@@ -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)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或