position: relative相对定位； absolute绝对定位子绝父相盒子居中堆叠顺序z-index cursor光标 hover悬停轮播图固定定位fixed

HandsomeDanielWu

已于 2022-07-11 11:23:10 修改

阅读量144

点赞数

分类专栏： CSS 文章标签： css

于 2022-07-11 01:04:50 首次发布

本文链接：https://blog.csdn.net/HandsomeDanielWu/article/details/125554238

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

绝对定位absolute

子绝父相

<style>
        .box0{
            border: 1px solid;
            width: 402px;
            height: 402px;
            padding: 100px;
            margin: 0px auto;
        }
        .box1{
            border: 1px solid;
            width: 300px;
            height: 300px;
            padding: 50px;
            margin: 0px auto;
        }
        .box2{
            border: 1px solid;
            width: 98px;
            height: 98px;
            padding: 50px;
            margin: 0px auto;
        }

        p{
            width: 50px;
            height: 50px;
            background-color: orange;
        }

    </style>
</head> 
<body>
    <div class="box0">
        <div class="box1">
            <div class="box2">
                <p></p>
            </div>
        </div>
    </div>

盒子居中

堆叠顺序z-index

cursor光标

轮播图carousel

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
       
        .carousel {
            width: 650px;
            height: 360px;
            border: 1px solid;
            margin: 40px auto;
            position: relative;
        }
        .carousel .btn{
            position: absolute;
            width: 40px;
            height: 40px;
            border: 1px solid;
            margin: 40px auto;
            top: 50%;
            margin-top: -20px;
            border-radius: 50%;  
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直剧中:行高h = height */
            line-height: 40px;
            
            background-color: rgba(255, 255, 255, .5);
            /* 光标：手指 */
            cursor: pointer;

            font-family: consolas;
            font-size: 26px;
        }
        
        .carousel .btn:hover{
            background-color: orange;
            color: white;
        }

        .carousel .left{
            left: 10px;
        }
        .carousel .right{
            right: 10px;
        }
        .imgg{
            width: 650px;
            /* height: 150px; */
        }
        
        .carousel ol{
            position: absolute;
            width: 120px;
            height: 20px;
            right: 20px;
            bottom: 20px;
            background-color: red;
            list-style: none;
        }
        .carousel ol li{
            float: left;
            width: 20px;
            height: 20px;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 50%;
            margin-right: 10px;
        }
        /* li.current 之间不能有空格 */
        .carousel ol li.current{
            background-color: gold;
        }
    </style>
</head> 
<body>
    <div class="carousel">
        <img src="images/img2.JPG" class="imgg">
        <!-- 转义字符&lt &gt -->
        <a  class="left btn">&lt;</a>
        <a  class="right btn">&gt;</a>
        <ol>
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
<body>

固定定位