CSS——定位、CSS高级技巧、修饰属性

越努力越幸运`2023-12-24 14:29

1、定位

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

实现：

  1. 定位模式：position
  2. 边偏移：设置盒子的位置
    1. left
    2. right
    3. top
    4. bottom

1.1 相对定位

position：relative

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相对定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 
      1. 改变位置的参照物是 自己原来的位置
      2. 不脱标，占位
      3. 标签显示模式特点 不变
    */

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

1.2 绝对定位

position：absolute

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      width: 400px;
    }

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

    /* 
      1. 脱标，不占位
      2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置
      3. 显示模式特点改变：宽高生效（具备了行内块的特点）
    */

    .news span {
      position: absolute;
      top: 0;
      right: 0;

      /* display: block; */
      width: 92px;
      height: 32px;
      background-color: rgba(0,0,0,0.6);
      text-align: center;
      line-height: 32px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="news">
    <img src="./images/news.jpg" alt="">
    <span>展会活动</span>
    <h4>2222世界移动大会</h4>
  </div>
</body>
</html>

1.3 定位居中

实现步骤：

  1. 绝对定位
  2. 水平、垂直边偏移为50%
  3. 子级向左、上移动自身尺寸的一半
    1. 左、上的外边距为 - 尺寸的一半
    2. transform：translate（-50%，-50%）
css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位-居中</title>
  <style>
    img {
      position: absolute;
      left: 50%;
      top: 50%;

      /* margin-left: -265px;
      margin-top: -127px; */

      /* 方便： 50% 就是自己宽高的一半 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <img src="./images/login.webp" alt="">
</body>
</html>

1.4 固定定位

position：fixed

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

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 
      1. 脱标，不占位
      2. 参照物：浏览器窗口
      3. 显示模式特点 具备行内块特点
    */

    div {
      position: fixed;
      top: 0;
      right: 0;

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

1.5 堆叠层级 z-index

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

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

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>堆叠顺序-z-index</title>
  <style>
    div {
      position: absolute;
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: pink;
      /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
      z-index: 1;
    }

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

      z-index: 2;
    }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

定位总结

2、CSS精灵

css精灵，也叫CSS Sprites，是一种网页图片应用处理方式，把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

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

实现步骤：

  1. 创建盒子，盒子尺寸与小图尺寸相同
  2. 设置盒子背景图为精灵图
  3. 添加background-position属性，改变背景图位置
    1. 使用PxCook测量小图片左上角坐标
    2. 取负数坐标为background-position属性值（向左上移动图片位置）
css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 精灵-基本使用</title>
  <style>
    div {
      width: 112px;
      height: 110px;
      background-color: pink;
      background-image: url(./images/abcd.jpg);
      background-position: -256px -276px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

2.1 CSS精灵案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>京东服务</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>

2.2 字体图标

字体图标：展示的是图标，本质是字体

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

优点：

  • 灵活性：灵活地修改样式，例如：尺寸、颜色等
  • 轻量级：体积小、渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：先下载再使用
css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>体验字体图标</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    .iconfont {
      font-size: 200px;
      color: red;
    }
  </style>
</head>
<body>
  <span class="iconfont icon-icon-test2"></span>
</body>
</html>

2.3 字体图标-下载字体

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

下载字体：登录 ---> 素材库 ---> 官方图标库 ---> 进入图标库 ---> 选图标，加入购物车 ---> 购物车，添加至项目，确定 ---> 下载至本地

2.4 字体图标-使用字体

  1. 引入字体样式表（iconfont.css
  2. 标签使用字体图标类名
    1. iconfont：字体图标基本样式（字体名，字体大小等等）
    2. icon-xxx：图标对应的类名
css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用字体图标</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    /* 如果要调整字体大小，注意 选择器的优先级 要高于 iconfont 类 */
    .iconfont {
      font-size: 200px;
      color: orange;
    }
  </style>
</head>
<body>
  <span class="iconfont icon-icon-test3"></span>
</body>
</html>

2.5 字体图标-上传矢量图

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

3、垂直对齐方式vertical-align

属性名：vertical-align

属性值

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直对齐方式</title>
  <style>
    div {
      border: 1px solid #000;
    }

    img {
      /* vertical-align: middle; */

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

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

      /* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
      /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
      display: block;
    }
  </style>
</head>
<body>
  <div>
    <img src="./images/1.webp" alt="">
    <!-- 我是谁？我在哪？ -->
  </div>
</body>
</html>

4、过渡transition

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

属性名：transition（复合属性）

属性值：过渡的属性 花费时间（s）

提示：

  • 过渡的属性可以是具体的CSS属性
  • 也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
  • transition设置给元素本身
css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 200px;
      height: 150px;
      transition: all 1s;
    }

    img:hover {
      width: 500px;
      height: 400px;
    }
  </style>
</head>
<body>
  <img src="./images/huawei.jpg" alt="">
</body>
</html>

5、透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0-1

  • 0：完全透明（元素不可见）
  • 1：不透明
  • 0-1之间小数：半透明
css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>透明度</title>
  <style>
    div {
      width: 500px;
      height: 500px;
      background-color: orange;

      opacity: 0;

      opacity: 1;

      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div>
    <img src="./images/phone.png" alt="">
  </div>
</body>
</html>

6、光标类型cursor

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

属性名：cursor

属性值

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>光标类型</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      cursor: pointer;    
      cursor: text;  
      cursor: move;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

7、案例 轮播图

技术点：

  1. 定位
  2. 字体图标
  3. Flex布局
css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</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;
    }

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

    .banner ul {
      display: flex;
    }

    /* 箭头 */
    .banner .prev,
    .banner .next {
      /* 隐藏 */
      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区域，箭头要显示 display:block */
    .banner:hover .prev,
    .banner:hover .next {
      display: block;
    }

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

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

    /* 圆点 */
    .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%;
      cursor: pointer;
    }

    /* 橙色的li */
    .banner ol .active {
      background-color: #ff5000;
    }
  </style>
</head>
<body>
  <div class="banner">
    <!-- 图: 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>
    <!-- 箭头 -->
    <!-- 上一张 prev -->
    <a href="#" class="prev">
      <i class="iconfont icon-zuoce"></i>
    </a>
    <!-- 下一张 next -->
    <a href="#" class="next">
      <i class="iconfont icon-youce"></i>
    </a>
    <!-- 圆点 -->
    <ol>
      <li></li>
      <li class="active"></li>
      <li></li>
    </ol>
  </div>
</body>
</html>

轮播图素材代码【免费】综合案例-轮播图素材代码.zip资源-CSDN文库

相关推荐
恋猫de小郭24 分钟前
Flutter Zero 是什么？它的出现有什么意义？为什么你需要了解下？
android·前端·flutter
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊9 小时前
jwt介绍
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示