CSS学习3

╰ 羁绊

已于 2023-08-06 10:23:18 修改

阅读量46

点赞数 1

文章标签： css 学习前端

于 2023-07-08 15:44:54 首次发布

本文链接：https://blog.csdn.net/qq_44957788/article/details/131559437

版权

定位

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

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

相对定位

position：relative

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>到i的话说底帕斯机票都惧怕设计大赛觉得就打炮舰都怕设计的怕是见到啊店铺大家安排啥
        大家安排啥觉得怕谁就打谁绝对是跑到加速跑击打磐石觉得怕是担惊受怕将打破阿萨觉得
        接生婆就怕的家店铺数据分配时间都怕佛菩萨的就佩服的是积分绝对是平均分
    </p>
    <div><img src="../images/1.webp" alt=""></div>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
</body>
</html>

绝对定位

position: absolute
使用场景：（子绝父相）

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

定位居中

实现步骤：

绝对定位
水平，垂直边偏移为50%
子级向左，上移动自身尺寸的一半
·左、上的外边距为-尺寸的一半
·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>绝对定位-居中</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>

固定定位

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;
            width: 500px;
        }
    </style>
</head>
<body>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <div><img src="../images/1.webp" alt=""></div>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
        <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>
    <p>擦神婆京城怕是就怕睡觉哦差价哦啊是评价吉萨配件都怕见Copa京东派骄傲平时骄傲松平大
        按时间破大家安排啥觉得大手大脚怕时间都怕时间都撒豆加萨帕多家爬升阶段颇少多久哦啊
        多久哦爬升阶段就扫静安寺觉得怕是京东撒泼觉得撒泼的就撒手离开骄傲松平家的是家</p>      
</body>
</html>

堆叠层级 z-index

默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

定位-总结

相对定位 relative 否保持标签原有显示模式 自己原来位置
绝对定位 absolute 是 行内块特点 1. 已经定位的祖先元素 2. 浏览器可视区
固定定位 fixed 是 行内块特点 浏览器窗口

CSS精灵

CSS精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

CSS精灵-案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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: 42px;
            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>

字体图标

字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点：

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

字体图标-下载字体

iconfont图标库：https://www.iconfont.cn/
下载字体
登录-素材库-官方图标库-进入图标库-选图标，加入购物车-购物车，添加至项目，确定-下载至本地

字体图标-使用字体

引入字体样式表（iconfont.css）
标签使用字体图标类名
1. iconfont: 字体图标基本样式（字体名，字体大小等等）
2. icon-xxx: 图标对应的类名

<span class="iconfont icon-xxx"></span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

### 字体图标-上传矢量图作用：项目**特有**的图标上传到iconfont图标库，生成字体 ## 垂直对齐方式 vertical-align 属性名：vertical-align baseline-基线对齐 / top-顶部对齐 / **middle-居中对齐** / bottom-底部对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

过渡 transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition (复合属性)
属性值：过渡的属性花费时间(s)
提示：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <style>
        img{
            width: 200px;
            height: 150px;
            transition: all 1s;
        }
        img:hover{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <img src="../images/huawei.jpg" alt="">
</body>
</html>

透明度 opacity

作用：设置整个元素的透明度(包含背景和内容)
属性名：opacity
属性值：0-1

0：完全透明（元素不可见）
1：不透明
0-1之间小数：半透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

光标类型 cursor

作用：鼠标悬停在元素上时指针显示模式
属性名：cursor
属性值：
default-默认值，通常是箭头
pointer-小手效果，提示用户可以点击
text-工字形，提示用户可以选择文字
move-十字光标，提示用户可以移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

综合案例-淘宝轮播图

技术点：1.定位 2.字体图标 3.flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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区域,箭头要显示 */
        .banner:hover .prev,
        .banner:hover .next{
            display: block;
        }
        .banner .prev{
            left: 0;
            border-radius: 0px 15px 15px 0px;

        }

        .banner .next{
            right: 0;
            border-radius: 15px 0px 0px 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-icon-test4"></i>
        </a>
        <!-- 下一张  next-->
        <a href="#" class="next">
            <i class="iconfont icon-icon-test5"></i>
        </a>
        <!-- 圆点 -->
        <ol>
            <li></li>
            <li class="active"></li>
            <li></li>
        </ol>
    </div>
</body>
</html>