小练习

最新推荐文章于 2023-01-29 12:45:42 发布

后栀

最新推荐文章于 2023-01-29 12:45:42 发布

阅读量65

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/qq_52612197/article/details/113850493

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>
    <style>
       div{
           position: relative;
           width: 200px;
           height: 250px;
           background: yellow;
           margin: auto;
       }
       span{
           position: absolute;
           right: 20px;
           top: -20px;
           height:0;
           width: 0;
           border: 10px solid transparent;
           border-bottom-color:yellow;
       }
    </style>
</head>
<body>
   <div>
       <span></span>
   </div>
</body>
</html>

**在这里插入图片描述**
margin巧用

<!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>
        ul li{
            list-style: none;
            float: left;/*先浮动紧贴，然后在左边距-1px*/
            width: 100px;
            height: 100px;
            margin-left: -2px;/*解决边框叠加问题，实现1+1=1*/
            border: 2px solid green;
            position: relative;
        }
        li:hover{
            /* 如果盒子没有定位，鼠标经过时添加定位即可 */
            /* position: relative;
            border: 2px solid red; */
            /* 如果盒子已有定位，可以通过z-index来解决 */
            z-index: 1;
            border: 2px solid red;
        }

    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</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>
        .money{
            width: 175px;
            height: 24px;
            border: 1px solid red;
        }
        .jiao{
            position: absolute;
            right: 0px;
            height: 0;
            width: 0;
            border-top: 24px solid ;
            border-right: 10px solid;
            border-color: transparent #fff;
        }
        .miaosha{
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background: red;
            color: #fff;
            font-weight: 700;
            line-height: 24px;
            text-align: center;
            margin-right: 8px;
        }
        .yuan{
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="money">
        <span class="miaosha">
            ¥999.00
            <i class="jiao"></i>
        </span>
        <span class="yuan">¥1890.00</span>
    </div>
</body>
</html>

在这里插入图片描述
nth-child与nth-of-type

<!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>
        /* 会把所有盒子先排序，执行时先执行nth-child（1），再看这个盒子是不是要找的盒子，不是就会不会选中 */
        /* 不会变成粉色 */
        section div:nth-child(1){
            color: pink;
        }
        /* 把指定元素盒子排序，在执行时先执行指定的元素，然后再去找第几个孩子 */
        /* 会变成粉色 */
        section div:nth-of-type(1){
            color: pink;
        }
    </style>
</head>
<body>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</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>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .switch {
            position: absolute;
            display: block;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 50px;
            /* 居中 */
            background: #fff;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        label {
            position: absolute;
            right: 10px;
            top: 0px;
            width: 65px;
            height: 30px;
        }

        .switch span:nth-child(1) {
            line-height: 50px;
            padding-left: 10px;
            color: black;
        }

        .switch input {
            /* position: absolute;
            right: 10px;
            top: 7px;
            width: 65px;
            height: 30px; */
            display: none;
        }

        .box {
            position: absolute;
            display: block;
            top: 5px;
            right: 5px;
            width: 80px;
            height: 40px;
            background: #ccc;
            border-radius: 20px;
            cursor: pointer;
            transition-duration: 0.8s;
            /* 过渡持续时间 */

        }

        .box::before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            top: 5px;
            left: 5px;
            border-radius: 50%;
            background: #009cfc;
            transition-duration: 0.8s;
        }

        .switch input:checked+.box {
            background: #009cfc;
        }

        .switch input:checked+.box::before {
            transform: translateX(40px);
            background: #fff;
        }
    </style>
</head>

<body>
    <!-- <label class="switch"> -->
    <div class="switch">
        <span>飞行模式</span>
        <label>
            <input type="checkbox">
            <span class="box"></span>
        </label>
    </div>
</body>
</html>