CSS选择器，元素，定位和背景

最新推荐文章于 2024-09-14 17:04:32 发布

lw16666

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量629

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/lw16666/article/details/121856218

版权

first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。a:hover 必须在CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。伪类可以与 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>
</head>
<style>
    * {
        text-decoration: none;
        list-style: none;
    }
    
    .image {
        position: relative;
        background: url(img/1.png) no-repeat;
        margin: 0 auto;
        height: 280px;
    }
    
    a {
        position: absolute;
        width: 20px;
        height: 30px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        background-color: #616e7d;
    }
    a:hover{
        background-color: rgb(25, 0, 255);
    }
    
    .left {
        border-radius: 0 15px 15px 0;
        top: 125px;
    }
    
    .right {
        border-radius: 15px 0 0 15px;
        top: 125px;
        left: 499px;
    }
    
    ul {
        position: absolute;
        top: 236px;
        left: 132px;
    }
    
    ul li {
        display: inline-block;
        width: 26px;
        height: 5px;
        background-color: black;
        margin-right: 5px;
    }
    
    ul li:hover {
        background-color: #97332f;
    }
</style>

<body>
    <div class="image">
        <a href="#" class="left">&lt;</a>
        <a href="#" class="right">&gt;</a>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

固定定位：它使用绝对定位后，该元素不会占有原来的位置。该元素会依据当前浏览器窗口进行定位。

粘性定位：占有原来的位置，不脱标，粘性定位可以被认为是相对定位和固定定位的混合。该元素在跨越特定阈值前为相对定位。之后为固定定位。

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 1300px;
            /* width: 2300px; */
        }
        .nav {
            height: 70px;
            background-color: yellow;
        }

        .main {
            position: relative;
            background-color: #a0a0a0;
        }
        .one {
            width: 100px;
            height: 100px;
            background-color: red;
        }
/* 相对定位 */
        /* .two {
            position: relative;
            位置偏移量   top  left  right  bottom
            left: 50px;
            top: 0px;
            width: 100px;
            height: 100px;
            background-color: blue;
        } */

        /* 绝对定位 */
        /* .two {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #ccc;
        }  */

        /* 固定定位  fixed*/
        /* .two {
            position: fixed;
            left: 200px;
            top: 200px;
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #ccc;
        } */
/* 粘性定位 */
        .two {
            position: sticky;
            left: 10px;
            top: 50px;
            width: 50px;
            height: 100px;
            background-color: blue;
            color: #ccc;
        }
        .three {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

</head>

<body>


    <!-- 定位 -->
    <!-- positon -->


    <!-- 相对定位   relative  -->
    <!-- 相对定位是，
        1.该元素基于原来位置的位置偏移
        2.占有原来的外置，不会脱离文档流
    -->
    <div class="nav"></div>
        <div class="main">
            <div class="one">one</div>
            <div class="three">three</div>
        </div>
        <div class="two">two</div>
</body>

</html>