WEB前端学习笔记（七）——CSS样式（补充与拓展）

本文链接：https://blog.csdn.net/weixin_56370772/article/details/132902098

一、精灵图

1.1 精灵图介绍

1.2 精灵图的使用步骤

① 创建一个盒子
② 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
③ 将精灵图设置为盒子的背景图片
④ 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

二、背景图片大小

三、文字阴影和盒子阴影

注意：外阴影是 outset，不能设置，会报错

四、过渡

五、网页与网站、骨架结构标签、SEO三大标签

网页：网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等。
网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东、黑马程序员等；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
  <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML 版本
注意点：DOCTYPE 需要写在页面的第一行，不属于 HTML 标签

<html lang="en">标识网页使用的语言
作用：搜索引擎归类 + 浏览器翻译
常见语言：zh-CN 简体中文 / en 英文
标识 网页 使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码：
        1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
        2. GB2312：6000+ 汉字
        3. GBK：20000+ 汉字
注意点：开发中统一使用 UTF-8 字符编码即可

<meta name="viewport" content="width=device-width, initial-scale=1.0">
宽度 = 设备的宽度  移动端网页开发


SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
SEO三大标签
1. title：网页标题标签
2. description：网页描述标签
3. keywords：网页关键词标签

ico图标设置
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">