前端-电商项目技能点

#博学谷IT学习技术支持

目录

精灵图

背景图缩放 background-size：取值

盒子阴影 box-shadow

过渡 transition：过渡属性 时间（s）空格隔开

SEO三大标签 title description keywords

ico图标 link：favicon

项目目录

根目录——网站的第一级文件夹

版心居中

清除

---

• 精灵图

  • 定义：由小图组成的大图
  • 优点：减少服务器的发送次数、降低服务器的传输压力、提升传输速度
  • 使用步骤：1.创建盒子，设置盒子的尺寸和小图尺寸相同；2.将精灵图设置为盒子的背景图片；3.修改背景图位置
  • 位置 background-position：取负数（所选小图在大图中的位置）

    

• 背景图缩放 background-size：取值

  • 作用：设置背景图片的大小
  • 取值：
    • 数字+px——常用
    • 百分比——相当于当前盒子自身的宽高百分比
    • contain——包含，将背景图片等比例缩放，直到不会超出盒子的最大
    • cover——覆盖，将背景图等比例缩放，直到刚好填满整个盒子没有空白

  • 

• 盒子阴影 box-shadow

  • 取值