WEB前端demo6-CSDN博客

本文链接：https://blog.csdn.net/m0_65348671/article/details/135715618

本文详细介绍了CSS中的定位方法（如相对定位、绝对定位和固定定位）、堆叠顺序、CSS精灵的使用、字体图标垂直对齐、过渡效果、透明度设置以及光标类型的控制。通过实例展示了这些技术在网页设计中的应用。

摘要由CSDN通过智能技术生成

文章目录

定位
堆叠顺序
css精灵
字体图标
垂直对齐
过渡效果
透明度
光标类型

定位

1.相对定位

position: relative;

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

2.绝对定位

 position: absolute;

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

*/

例如:

<!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: 400px;
    }
    .news{
        position: relative;

        margin: 100px auto;
        width: 400px;
        height: 350px;
        background-color: #f0f0f0;
    }
    /* 
    1.脱标，不占位
    2.参照物：先找最近的已经定位的祖先元素：如果所有祖先元素没有定位
    参照浏览器可视区域改位置
    3.显示模式特点会改变，宽高生效（具备了行内块的特点）

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

        /* display: block; */
        width: 92px;
        height: 32px;
        background-color:rgb(0, 0, 0,0.5);
        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>

常用 子绝父相 来定位
3.定位居中

步骤：
* 1.绝对定位
2.水平、垂直边偏移为50%
3.子级向左、上移动自身尺寸的一半
左、上的外边距为尺寸的一半
transform: translate(-50%,-50%); *

<!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>

        /* 步骤
        1.绝对定位
        2.水平、垂直边偏移为50%
        3.子级向左、上移动自身尺寸的一半
        左、上的外边距为尺寸的一半
        transform: translate(-50%,-50%); */
    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>

4.固定定位
用于固定标签，页面下滑不移动

  position: fixed;

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

堆叠顺序

定位使得标签可以堆叠，其中顺序用

z-index: 1;

/* 取值是整数，默认是0，取值越大显示顺序越朝上 */

css精灵

用于网页小图太多时，可将小图拼成大图，减少网页读取速度和空间，减少文件读取速度。
用像素大厨定位好需要的图片样式，提前规定好盒子大小，填充图片即可。

京东服务实现

<!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>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        .serve{
            margin: 100px auto;
            width: 1190px;
            height: 42px;
            background-color: pink;
        }
        .serve ul{
            display: flex;
        }
        .serve li{
            display: flex;
            padding-left:  42px; ;
            width: 297px;
            height: 42px;
            background-color: skyblue;
        }
        .serve li h5{
            width: 36px;
            height: 42px;
            background-color: #fff;
            background:url(./images/sprite.png) 0 -192px ;
        }
        .serve li:nth-child(2) h5{
            background-position: -41px -192px;
        }
        .serve li:nth-child(3) h5{
            background-position: -82px  -192px;
        }
        .serve li:nth-child(4) h5{
            background-position: -123px  -192px;
        }
        .serve li p{
            font-size: 18px;
            color: #444;
            font-weight: 700;
            line-height: 42px;
        }
    </style>
</head>
<body>
    <div class="serve">
        <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>

字体图标

网站https://www.iconfont.cn/
可下载、引用图标库

垂直对齐

<!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{
            /* 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>

过渡效果

 img:hover{
            width: 500px;
            height: 400px;
        }

透明度

  opacity: 0.5;

给整个标签设置透明度

光标类型

 		/* 小手 */
        cursor: pointer;
        /* 文本输入 */
        cursor: text;
        /* 移动 */
        cursor: move;