08_定位 + CSS 精灵 + 字体图标 + 修饰属性

01_定位

01_相对定位 + 绝对定位 + 固定定位

01_定位

作用: 灵活的 改变 盒子在网页中的 位置

实现:

定位模式: position
边偏移∶ 设置盒子的位置
left, right, top, botton

02_相对定位

position: relative

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      /* 1.改变位置的参照物是 自己原来的位置; 不脱标, 占位; 标签显示模式特点 不变 */
      position: relative;
      top: 100px;
      left: 200px;
    }
  </style>
</head>

<body>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。
  </p>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。
  </p>

  <div><img src="./images/1.webp" alt=""></div>

  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。
  </p>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。
  </p>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。
  </p>
</body>

</html>

03_绝对定位

position: absolute

使用场景: 子 级 绝对 定位, 父 级 相对 定位 (子绝父相)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      width: 400px;
    }

    .news {
      margin: 100px auto;
      width: 400px;
      height: 350px;
      background-color: #f8f8f8;

      /* 2.父级: 相对定位 */
      position: relative;
    }

    .news span {
      /* display: block; */
      width: 92px;
      height: 32px;
      background-color: rgba(0, 0, 0, 0.6);
      text-align: center;
      line-height: 32px;
      color: #fff;

      /* 1.子级: 绝对定位 */
      position: absolute;
      top: 0;
      right: 0;
    }

    /* 
      3.脱标, 不占位
      4.参照物: 先找最近的已经定位的祖先元素; 如果所有祖先元素都没有定位, 参照浏览器可视区改位置
      5.显示模式特点改变: 宽高生效 (具备了行内块的特点)
     */
  </style>
</head>

<body>
  <div class="news">
    <img src="./images/news.jpg" alt="">
    <span>展会活动</span>
    <h4>2222 世界移动大会</h4>
  </div>
</body>

</html>

04_定位居中

实现步骤:

绝对定位
水平, 垂直边偏移为 50%
子 级向左, 上移动 自身尺寸 的 一半
左, 上的 外 边距为 ==> 尺寸的一半
transform: translate(-50%, -50%)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    img {
      position: absolute;
      left: 50%;
      top: 50%;

      /* 1.外边距方法 */
      /* margin-left: -265px;
      margin-top: -127px; */

      /* 2.平移方法(方便): 50% 就是自己宽高的一半 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <img src="./images/login.webp" alt="">
</body>

</html>

05_固定定位

position: fixed

场景: 元素的位置在网页滚动时 不会改变

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      /* 1.脱标, 不占位; 参照物: 浏览器窗口; 显示模式特点 具备行内块特点 */
      position: fixed;
      top: 0;
      right: 0;

      width: 500px;
    }
  </style>
</head>

<body>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。<br><br><br>
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。<br><br>
  </p><br><br><br>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。<br><br><br>
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。<br><br>
  </p><br><br><br>

  <div><img src="./images/1.webp" alt=""></div>

  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。<br><br><br>
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。<br><br>
  </p><br><br><br>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。<br><br><br>
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。<br><br>
  </p><br><br><br>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。<br><br><br>
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。<br><br>
  </p><br><br><br>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。<br><br><br>
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。<br><br>
  </p><br><br><br>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。<br><br><br>
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。<br><br>
  </p><br><br><br>
</body>

</html>

02_堆叠顺序

01_堆叠层级 z-index

默认效果: 按照标签书写顺序, 后来者居上

作用: 设置 定位 元素的 层级顺序, 改变定位元素的显示顺序

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      position: absolute;
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: pink;

      /* 1.取值是整数, 默认是 0, 取值越大显示顺序越靠上 */
      z-index: 1;
    }

    .box2 {
      background-color: skyblue;
      left: 100px;
      top: 100px;

      /* 2.取值是整数, 默认是 0, 取值越大显示顺序越靠上 */
      z-index: 2;
    }
  </style>
</head>

<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>

</html>

03_总结

01_定位总结

02_CSS 精灵

01_CSS 精灵

CSS 精灵, 也叫 CSS Sprites, 是一种网页 图片 应用处理方式

把网页中一些 背景图片 整合到 一张图片 文件中, 再 backaround-position 精确的定位出背景图片的 位置

优点∶ 减少 服务器被请求 次数, 减轻 服务器的 压力, 提高 页面加载 速度

实现步骤:

创建盒子, 盒子尺寸 与 小图 尺寸 相同
设置盒子 背景图 为精灵图
添加 background-position 属性, 改变背景图位置
使用 PxCook 测量小图片 左上角坐标
取 负数 坐标为 background-position 属性值 (向 左上 移动图片位置)

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      /* 1.创建盒子, 盒子尺寸 与 小图 尺寸 相同 */
      width: 112px;
      height: 110px;
      background-color: pink;

      /* 2.设置盒子 背景图 为精灵图 */
      background-image: url(./images/abcd.jpg);

      /* 3.取 负数 坐标为 background-position 属性值 (向 左上 移动图片位置) */
      background-position: -256px -276px;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

02_京东服务案例

01_京东服务案例

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .service {
      margin: 100px auto;
      width: 1190px;
      height: 42px;
      /* background-color: pink; */
    }

    .service ul {
      display: flex;
    }

    .service li {
      display: flex;
      padding-left: 40px;
      width: 297px;
      height: 42px;
      /* background-color: skyblue; */
    }

    .service li h5 {
      margin-right: 10px;
      width: 36px;
      height: 42px;
      /* background-color: pink; */
      background: url(./images/sprite.png) 0 -192px;
    }

    .service li:nth-child(2) h5 {
      background-position: -41px -192px;
    }

    .service li:nth-child(3) h5 {
      background-position: -82px -192px;
    }

    .service li:nth-child(4) h5 {
      background-position: -123px -192px;
    }

    .service li p {
      font-size: 18px;
      color: #444;
      font-weight: 700;
      line-height: 42px;
    }
  </style>
</head>

<body>
  <div class="service">
    <ul>
      <li>
        <h5></h5>
        <p>品类齐全, 轻松购物</p>
      </li>
      <li>
        <h5></h5>
        <p>多仓直发, 极速配送</p>
      </li>
      <li>
        <h5></h5>
        <p>正品行货, 精致服务</p>
      </li>
      <li>
        <h5></h5>
        <p>天天低价, 畅选无忧</p>
      </li>
    </ul>
  </div>
</body>

</html>

03_字体图标

01_字体图标

字体图标: 展示的是 图标, 本质是 字体

作用: 在网页中添加 简单的, 颜色单一 的 小图标

优点:

灵活性: 灵活地修改样式, 例如: 尺寸, 颜色等
轻量级: 体积小, 渲染快, 降低服务器请求次数
兼容性: 几乎兼容所有主流浏览器
使用方便: 先下载再使用

02_下载字体

iconfont 图标库: https://www.iconfont.cn

下载字体

登录 ==> 素材库 ==> 官方 图标库 ==> 进入图标库 ==> 选图标, 加入购物车 ==> 购物车, 添加至项目, 确定 ==> 下载至本地

03_使用字体

引入字体样式表 (iconfont.css)

标签使用字体图标类名

iconfont: 字体图标基本样式 (字体名, 字体大小等等)
icon-xxx: 图标对应的类名

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 1.引入字体样式表 (iconfont.css) -->
  <link rel="stylesheet" href="./iconfont/iconfont.css">

  <style>
    /* 3.如果要调整字体大小; 注意: 选择器的优先级, 要高于 iconfont 类 */
    .iconfont {
      font-size: 200px;
      color: orange;
    }
  </style>
</head>

<body>
  <!-- 2.标签使用字体图标类名 -->
  <span class="iconfont icon-icon-test3"></span>
</body>

</html>

02_上传矢量图

01_上传矢量图

作用: 项目 特有 的图标上传到 iconfont 图标库, 生成字体

上传步骤

上传 ==> 上传图标 ==> 选择 svg 矢量图 ==> 去除颜色提交 ==> 系统审核

04_修饰属性

01_垂直对齐方式

属性名: vertical-align

属性值

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      border: 1px solid #000;
    }

    img {
      /* 1.居中对齐: 最高内容的中间 */
      vertical-align: middle;

      /* 2.顶对齐: 最高内容的顶部 */
      /* vertical-align: top; */

      /* 3.底对齐: 最高内容的底部 */
      /* vertical-align: bottom; */

      /* 4.因为浏览器把行内块, 行内标签当做文字处理, 默认按基线对齐; 效果: 图片 img 的底下有空白, 转块级不按基线对齐, 空白就消失了 */
      /* display: block; */
    }
  </style>
</head>

<body>
  <div>
    <img src="./images/1.webp" alt="">
    我是谁?我在哪?
  </div>
</body>

</html>

02_过渡

01_过渡

作用: 可以为 一个元素 在 不同状态 之间切换的时候添加 过渡效果

属性名: transition (复合属性)

属性值: 过渡的属性花费时间 (s)

提示:

过渡的属性可以是 具体的 CSS 属性
也可以为 all (两个状态 属性值不同 的所有属性, 都产生过渡效果)
transition 设置给 元素本身

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    img {
      width: 200px;
      height: 150px;

      /* 1.可以为 all (两个状态 属性值不同 的所有属性, 都产生过渡效果) */
      transition: all 1s;
    }

    img:hover {
      width: 500px;
      height: 400px;
    }
  </style>
</head>

<body>
  <img src="./images/huawei.jpg" alt="">
</body>

</html>

03_透明度 + 光标类型

01_透明度

作用: 设置 整个元素的透明度 (包含 背景和内容)

属性名: opacity

属性值: 0 ~ 1

0: 完全透明 (元素不可见)
1: 不透明
0 ~ 1 之间 小数: 半透明

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      width: 500px;
      height: 500px;
      background-color: orange;

      /* 1.完全透明 (元素不可见): 0 */
      /* opacity: 0; */

      /* 2.不透明: 1 */
      /* opacity: 1; */

      /* 3.半透明: 0 ~ 1 之间 小数 */
      opacity: 0.5;
    }
  </style>
</head>

<body>
  <div>
    <img src="./images/phone.png" alt="">
  </div>
</body>

</html>

02_光标类型

作用: 鼠标 悬停 在元素上时 指针显示样式

属性名: cursor

属性值

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      /* 1.小手效果, 提示用户可以点击 */
      cursor: pointer;

      /* 2.工字型, 提示用户可以选择文字 */
      /* cursor: text; */

      /* 3.十字光标, 提示用户可以移动 */
      /* cursor: move; */
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

05_综合案例

01_轮播图

技术点:

定位
字体图标
Flex布局

html

<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./iconfont/iconfont.css">

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .banner {
      position: relative;
      margin: 100px auto;
      width: 564px;
      height: 315px;
      /* background-color: pink; */
      overflow: hidden;
    }

    /* 2.图片 */
    .banner img {
      width: 564px;
      border-radius: 12px;
      vertical-align: middle;
    }

    .banner ul {
      display: flex;
    }

    /* 4.箭头 */
    .banner .prev,
    .banner .next {
      /* 5.隐藏 */
      display: none;

      position: absolute;
      top: 50%;
      transform: translateY(-50%);

      width: 20px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.3);

      text-decoration: none;
      color: #fff;
      line-height: 30px;
    }

    .banner .prev {
      left: 0;
      border-radius: 0 15px 15px 0;
    }

    .banner .next {
      right: 0;
      border-radius: 15px 0 0 15px;
      text-align: center;
    }

    /* 6.鼠标滑到 banner 区域, 箭头要显示 display:block */
    .banner:hover .prev,
    .banner:hover .next {
      display: block;
    }

    /* 8.圆点 */
    .banner ol {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      height: 13px;
      background-color: rgba(255, 255, 255, 0.3);

      display: flex;

      border-radius: 10px;
    }

    .banner ol li {
      margin: 3px;
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;

      /* 10.鼠标光标 */
      cursor: pointer;
    }

    /* 9.橙色的 li */
    .banner ol .active {
      background-color: #ff5000;
    }
  </style>
</head>

<body>
  <div class="banner">
    <!-- 1.图: ul > li -->
    <ul>
      <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
    </ul>

    <!-- 3.箭头 -->
    <!-- 上一张 prev -->
    <a href="#" class="prev">
      <i class="iconfont icon-zuoce"></i>
    </a>
    <!-- 下一张 next -->
    <a href="#" class="next">
      <i class="iconfont icon-youce"></i>
    </a>

    <!-- 7.圆点 -->
    <ol>
      <li></li>
      <li class="active"></li>
      <li></li>
    </ol>
  </div>
</body>

</html>

08_定位 + CSS 精灵 + 字体图标 + 修饰属性 ​

01_定位 ​

01_相对定位 + 绝对定位 + 固定定位 ​

02_堆叠顺序 ​

03_总结 ​

02_CSS 精灵 ​

01_CSS 精灵 ​

02_京东服务案例 ​

03_字体图标 ​

01_字体图标 ​

02_上传矢量图 ​

04_修饰属性 ​

01_垂直对齐方式 ​

02_过渡 ​

03_透明度 + 光标类型 ​

05_综合案例 ​

01_轮播图 ​

08_定位 + CSS 精灵 + 字体图标 + 修饰属性

01_定位

01_相对定位 + 绝对定位 + 固定定位

02_堆叠顺序

03_总结

02_CSS 精灵

01_CSS 精灵

02_京东服务案例

03_字体图标

01_字体图标

02_上传矢量图

04_修饰属性

01_垂直对齐方式

02_过渡

03_透明度 + 光标类型

05_综合案例

01_轮播图