day17-李大人part1

day17

一：阴影

• 盒子阴影 box-shadow: 水平偏移 垂直偏移 阴影模糊大小 阴影大小 阴影颜色 阴影位置(inset:里面);
  水平及垂直 向右和向下为正数,反之

• 文本阴影 text-shadow: 水平偏移 垂直偏移 阴影模糊大小 阴影颜色,
  值的特点和盒子阴影一样

二·背景属性：

2·1，背景图的大小

background-size:宽度 高度;

1. 数值+px
2. 百分比
3. 关键字
   cover 图片不断被拉伸,直到充满整个盒子,可能会出现背景图被裁掉
   contain 图片不断被拉伸,直到碰到盒子某个边缘之后就停止拉伸,可能会出现留白

2·2， 背景图裁切

background-clip 不需要去重复

• border-box 从边框之外裁切

• padding-box 从padding区域开始裁切

• content-box 从内容区域开始裁切

2·3，背景图原点

background-origin

• padding-box 从padding区域开始显示
• border-box 从边框区域开始显示
• ​ content-box 从内容区开始显示

2·4，背景图的固定

background-attachment:

• scoll(滚动)
• fixed(固定) 背景图固定,内容滚动

三：圆角

border-radius:

• 一个值: 四周
• 两个值: 对角
• 三个值: 左上 对角 右下
• 四个值: 顺时针

• 一般设置50%,实现圆形
  

四：响应式及媒体查询

4·1， 响应式布局

​ 根据不用的设备分辨率 显示不同的样式
​ 优点: 适配性好,高级
​ 缺点: 工作量大,繁琐,适用于小网站

4·2，媒体查询

​ @media 设备类型 and (媒体特性){
​ 选择器{样式 } }

• 设备类型: all(全部)/screen(显示器)

• 媒体特性: max-width/min-width

• 写法注意:

  1. and两边必须有空格
  2. 媒体特性后后面不要加分号
  3. 多个媒体特性之间用and连接

五：失亮图标库的使用

1·选择合适的添加至购物车

2·将添加到购物车的图标库进行下载

3·font-class的格式下；使用解压包进行解压以后

4·使用link标签引入解压以后的css文件

5·使用span标签将图标库添加到页面

库进行下载

3·font-class的格式下；使用解压包进行解压以后

4·使用link标签引入解压以后的css文件

5·使用span标签将图标库添加到页面

6·通过style进行设置样式（同设置字体样式）