当前位置: 首页 > news >正文

【前端基础】Day 6 CSS定位

目录

1. 定位

1.1 定位的用途

1.2 定位的组成

1.3 静态定位(了解)

1.4 相对定位

1.5 绝对定位

1.6 子绝父相

1.7 固定定位

1.8 粘性定位(了解)

1.9 定位的总结

1.10 定位叠放次序 z-index

1.11 定位的拓展

2. 综合案例——淘宝轮播图

3. 网页布局总结

4. 元素的显示与隐藏

4.1 display(重要)

4.2 visibility

4.3 overflow 溢出

4.4 案例——土豆网隐藏遮罩


1. 定位

1.1 定位的用途

1.2 定位的组成

1.3 静态定位(了解)

1.4 相对定位

1.5 绝对定位

1.6 子绝父相

1.7 固定定位

            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            /* 2.利用margin走版心盒子宽度的一半 */
            margin-left: 400px;

1.8 粘性定位(了解)

1.9 定位的总结

1.10 定位叠放次序 z-index

1.11 定位的拓展

2. 综合案例——淘宝轮播图

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

        li {
            list-style: none;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        /* 并集选择器可以集体声明相同的样式 */
        .prev,
        .next {
            position: absolute;
            /* 绝对定位的盒子垂直居中 */
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
        }

        .prev {

            left: 0;
            /* top和right不能颠倒 */
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .next {
            /* 如果一个盒子既有left属性也有right属性,则默认执行left属性 */
            /* 同理既有top也有bottom会执行top */
            right: 0;
            /* top和right不能颠倒 */
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background: rgba(255, 255, 255, .3);
            border-radius: 7px;
        }

        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }

        .promo-nav .selected {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="../img1.jpg" alt="">
        <!-- 左侧按钮 -->
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
        <!-- 小圆点 -->
        <ul class="promo-nav">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
</body>

</html>

3. 网页布局总结

4. 元素的显示与隐藏

4.1 display(重要)

4.2 visibility

4.3 overflow 溢出

4.4 案例——土豆网隐藏遮罩

<!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>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 30px auto;

        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(arr.png ) no-repeat center;
        }

        /* 当鼠标经过tudou这个盒子,就让里面的遮罩层显示出来 */
        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="../img1.jpg" alt="">
    </div>
</body>

</html>

http://www.dtcms.com/a/46382.html

相关文章:

  • 数据库原理与使用全解析:从理论到实践
  • React低代码项目:问卷编辑器 I
  • 什么是Agentic AI?(Doubao-1.5-pro-32k 大模型开启联网回答)
  • Qt | 实战继承自QObject的IOThread子类实现TCP客户端(安全销毁)
  • 迅雷下载实现原理解析
  • LLaMA(Meta开源的AI模型)与Ollama(本地运行和管理大模型的工具)简介(注意这俩虽然名字相似但没有直接联系)
  • 现代未来派品牌海报设计液体装饰英文字体安装包 Booster – Liquid Font
  • 算法随笔_62: 买卖股票的最佳时机
  • 面试常问的压力测试问题
  • 【数据结构】堆与二叉树
  • python第十一课:并发编程 | 多任务交响乐团
  • 原型链与继承
  • bdf「md」2
  • 【心得】一文梳理高频面试题 HTTP 1.0/HTTP 1.1/HTTP 2.0/HTTP 3.0的区别并附加记忆方法
  • Spring Cloud LoadBalancer详解
  • Raspberry Pi边缘计算网关设计与LoRa通信实现
  • 使用Python SciPy库来计算矩阵的RCS特征值并生成极坐标图
  • 【网络安全 | 扫描子域+发现真实IP】CloakQuest3r安装使用详细教程
  • Python 如何实现烟花效果的完整代码
  • Ollama 的庐山真面目
  • check 单元测试框架
  • 【vue-echarts】——01.认识echarts
  • SVN 简介
  • Java中的CyclicBarrier是什么?
  • 什么是 jQuery
  • 慢sql治理
  • 天锐绿盘 | 文档安全管理系统
  • 【构建企业级Spring Boot应用:从基础到高级的全面指南】
  • 同步类型对比
  • 【每日学点HarmonyOS Next知识】全局调整字体、h5选择框无法取消选中、margin不生效、Length转换为具体值、Prop和link比较