其他分享
首页 > 其他分享> > 简单页面操作任务

简单页面操作任务

作者:互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        body,div,img,p,h1{/* 去除框架 */
            margin: 0px;
            padding: 0px;
        }
            .outer{
                height: 400px;
                width: 650px;
                background-color: #1E2B3D;
            }
            .left{
                width: 300px;
                height: 400px;
                float: left;
                background-image: url(img/road.png);/* 插入图片 */
                background-position: 50px;
                background-repeat: no-repeat;/* 取消平铺 */
            }
            .right{
                width: 300px;
                height: 400px;
                float: right;
                position: absolute;
                padding-top: 120px;
                padding-left: 380px;
            }
            body{
                font-family: "楷体";
                font-style: italic;/* 斜体 */
            }
            .x{
                position: absolute;/* 子绝父相 */
                padding-top: 134px;
            }
            .c{
                position: absolute;
                padding-top: 130px;
                padding-left: 220px;
            }
            .v{
                position: absolute;
                padding-top: 15px;
                padding-left: 105px;
            }
            .b{
                position: absolute;
                padding-top: 8px;
                padding-left: 220px;
            }/* 命名后开始调节图片位置 */
            h1{
                font-size: 60px;
                color: red;
                letter-spacing: 18px;/* 字体之间的距离 */
            }
            p{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="left">
                <img src="img/icon2.png" class="x"> <!-- 命名class -->
                <img src="img/icon4.png" class="c">
                <img src="img/icon6.png" class="v">
                <img src="img/icon8.png" class="b">
            </div>
            <div class="right">
                <h1>查违</h1>
                <p>及时、迅速、精准、便捷</p>
                <img src="img/car.png">
            </div>
            
        </div>
    </body>
</html>

标签:top,padding,任务,absolute,background,简单,position,页面,left
来源: https://blog.csdn.net/m0_63837329/article/details/121788325