html css 浮动与定位案例（python）

三无082

已于 2022-10-23 16:17:57 修改

阅读量293

点赞数

于 2022-10-22 19:22:36 首次发布

本文链接：https://blog.csdn.net/weixin_54450346/article/details/127465912

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        

        .beauty-title {
            position: relative;
            height: 50px;
            padding-top: 50px;
            margin-top: 50px;
        }

        .line {
            height: 1px;
            background-color: rgb(204,204,204);
        }

        .bg {
            position: absolute;
            left: 50%;
            top: 0;
            width: 420px;
            height: 100px;
            margin-left: -210px;
            background:#fff url("https://static.zzhitong.com/lesson-files/html/img/10-1-images/1.jpg") no-repeat 20px -522px;
        }

        .beauty-con{
            width: 1000px;
            height: 630px;
            margin: 20px auto;
            position: relative;

        }
        .beauty-txt{
            padding: 30px;
            float: left;
            width: 829px;
            height: 92px;
            margin-left: -444.5px;
            background-color: rgba(0,0,0,0.7);
            position: relative;
            left: 50%;
            top:-82px;


        }
        .txt-h{
            box-sizing:content-box;
            width: 300px;
            height: 92px;
            font-size: 24px;
            float: left;
            color: #DDDDDD;
            border-right: 1px solid rgb(204,204,204);
            padding-top:10px ;
            padding-right: 20px;

        }
        .txt-p{
            box-sizing:content-box;
            width: 485px;
            height: 92px;
            font-size: 14px;
            float: left;
            color: #DDDDDD;
            padding-top:10px ;
            padding-left: 20px;
        }
        .btn{
            width: 57px;
            height: 73px;
            background: url("https://static.zzhitong.com/lesson-files/html/img/10-1-images/3.png")no-repeat;
            position: absolute;
            top:50%;
            margin-top: -35px;
        }
        .left{
            background-position-y: -80px;
        }


        .right{
            right: 0;
            background-position-y: -150px;

        }


    </style>
</head>
<body>

<div class="beauty-title">
    <div class="line"></div>
    <div class="bg"></div>
</div>

<div class="beauty-con">
    <div class="beauty-banner">
        <ul>
            <li>
                <div class="beauty-img">
                    <a href="#">
                        <img src="https://static.zzhitong.com/lesson-files/html/img/10-1-images/2.jpg" alt="">
                    </a>
                </div>

                <div class="beauty-txt">
                    <a href="#">
                        <h3 class="txt-h">5分钟就能搞定的时髦派对妆 秒杀大红唇和烟熏眼</h3>
                        <p class="txt-p">红唇与烟熏妆曾是派对妆的“标配”，这个过时的规则早就该打破了。今年秋冬的彩妆流行是简洁时髦的美感：一抹亮片眼影，一个出其不意的眼线，一只镇住全场的唇膏。既然能花5分钟就搞定的派对妆，为什么要花一个小时呢？</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="left btn"></div>
    <div class="right btn"></div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }


        .beauty-title {
            position: relative;
            height: 50px;
            padding-top: 50px;
            margin-top: 50px;
        }

        .line {
            height: 1px;
            background-color: rgb(204,204,204);
        }

        .bg {
            position: absolute;
            left: 50%;
            top: 0;
            width: 420px;
            height: 100px;
            margin-left: -210px;
            background:#fff url("https://static.zzhitong.com/lesson-files/html/img/10-1-images/1.jpg") no-repeat 20px -522px;
        }

        .beauty-con{
            width: 1000px;
            height: 630px;
            margin: 20px auto;
            position: relative;

        }
        .beauty-txt{
            padding: 30px;
            float: left;
            width: 829px;
            height: 92px;
            margin-left: -444.5px;
            background-color: rgba(0,0,0,0.7);
            position: relative;
            left: 50%;
            top:-82px;


        }
        .txt-h{
            box-sizing:content-box;
            width: 300px;
            height: 92px;
            font-size: 24px;
            float: left;
            color: #DDDDDD;
            border-right: 1px solid rgb(204,204,204);
            padding-top:10px ;
            padding-right: 20px;

        }
        .txt-p{
            box-sizing:content-box;
            width: 485px;
            height: 92px;
            font-size: 14px;
            float: left;
            color: #DDDDDD;
            padding-top:10px ;
            padding-left: 20px;
        }
        .btn{
            width: 57px;
            height: 73px;
            background: url("https://static.zzhitong.com/lesson-files/html/img/10-1-images/3.png")no-repeat;
            position: absolute;
            top:50%;
            margin-top: -35px;
        }
        .left{
            background-position-y: -80px;
        }


        .right{
            right: 0;
            background-position-y: -150px;

        }


    </style>
</head>
<body>

<div class="beauty-title">
    <div class="line"></div>
    <div class="bg"></div>
</div>

<div class="beauty-con">
    <div class="beauty-banner">
        <ul>
            <li>
                <div class="beauty-img">
                    <a href="#">
                        <img src="https://static.zzhitong.com/lesson-files/html/img/10-1-images/2.jpg" alt="">
                    </a>
                </div>

                <div class="beauty-txt">
                    <a href="#">
                        <h3 class="txt-h">5分钟就能搞定的时髦派对妆 秒杀大红唇和烟熏眼</h3>
                        <p class="txt-p">红唇与烟熏妆曾是派对妆的“标配”，这个过时的规则早就该打破了。今年秋冬的彩妆流行是简洁时髦的美感：一抹亮片眼影，一个出其不意的眼线，一只镇住全场的唇膏。既然能花5分钟就搞定的派对妆，为什么要花一个小时呢？</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="left btn"></div>
    <div class="right btn"></div>
</div>

</body>
</html>