WEB前端 网址练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            position: relative;
            width: 1300px;
            height: 800px;
            background-color: black;
        }

        .box1 {
            position: relative;
            width: 1300px;
            height: 150px;
            background-color: red;
        }

        .box2 {
            position: absolute;
            width: 1300px;
            height: 650px;
            background-color: blue;
            top: 150px;
        }

        .box1-1 {
            position: absolute;
            width: 1295px;
            height: 50px;
            background-color: darkgreen;
        }

        .box1-2 {
            position: absolute;
            width: 1290px;
            height: 100px;
            background-color: grey;
            top: 50px;
        }

        .box2-1 {
            position: absolute;
            width: 1285px;
            height: 500px;
            background-color: darkgreen;
        }

        .box2-2 {
            position: absolute;
            width: 1280px;
            height: 150px;
            background-color: grey;
            top: 500px;
        }

        .box1-1-1 {
            position: absolute;
            width: 700px;
            height: 50px;
            background-color: red;
        }

        .box1-1-2 {
            position: absolute;
            width: 200px;
            height: 50px;
            background-color: red;
            right: 110px;
        }

        .box1-1-3 {
            position: absolute;
            width: 100px;
            height: 50px;
            background-color: red;
            right: 5px;
        }

        .box1-2-1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        .box1-2-2 {
            position: absolute;
            width: 900px;
            height: 100px;
            background-color: yellow;
            left: 150px;
        }

        .c1-2-2 {
            display: flex;
            width: 800px;
            height: 100px;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        li {
            list-style: none;
        }

        .box1-2-3 {
            position: absolute;
            width: 100px;
            height: 50px;
            left: 1060px;
            top: 30px;
        }

        .box2-1-1 {
            position: absolute;
            width: 200px;
            height: 500px;
            background-color: brown;
            
        }

        .c2-1-1 {
            width: 200px;
            height: 450px;
        }

        .box2-1-2 {
            position: absolute;
            width: 1000px;
            height: 500px;
            background-image: url(../素材/19.png);
            left: 200px;
        }

        .box2-2-1 {
            position: absolute;
            width: 300px;
            height: 150px;
            background-color: royalblue;
        }

        .box2-2-2 {
            position: absolute;
            width: 950px;
            height: 150px;
            background-color: royalblue;
            left: 320px;
        }

        .c2-2-1 {
            display: flex;
            width: 300px;
            height: 150px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-evenly;
        }

        .l2-2-1 {
            width: 80px;
            height: 50px;
            background-color: blue;
        }

        .c2-2-2 {
            display: flex;
            width: 950px;
            height: 150px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-evenly;
        }

        .l2-2-2 {
            width: 300px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div class="box1-1">
                <div class="box1-1-1"><a href="#">1</a> <span>|</span> <a href="#">2</a> <span>|</span> <a href="#">3</a> <span>|</span> <a href="#">4</a> <span>|</span> <a href="#">5</a> <span>|</span> <a href="#">6</a> <span>|</span> <a href="#">7</a> <span>|</span> <a href="#">8</a> <span>|</span> <a href="#">9</a> <span>|</span> <a href="#">10</a> <span>|</span> <a href="#">11</a> <span>|</span> <a href="#">12</a></div>
                <div class="box1-1-2"><a href="#">1</a> <span>|</span> <a href="#">2</a> <span>|</span> <a href="#">3</a></div>
                <div class="box1-1-3"><a href="gouwuche"><em>购物车</em></a></div>
            </div>
            <div class="box1-2">
                <div class="box1-2-1"><a href="//www.mi.com">小米官网</a></div>
                <div class="box1-2-2"><ul class="c1-2-2"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li></ul></div>
                <div class="box1-2-3"><a href="#"><input type="search"></a><a href="#"><input type="submit"></a></div>
            </div>
        </div>

        <div class="box2">
            <div class="box2-1">
                <div class="box2-1-1"><ul class="c2-1-1"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li></ul></div>
                <div class="box2-1-2"></div>
            </div>
            <div class="box2-2">
                <div class="box2-2-1"><ul class="c2-2-1"><li class="l2-2-1">1</li><li class="l2-2-1">2</li><li class="l2-2-1">3</li><li class="l2-2-1">4</li><li class="l2-2-1">5</li><li class="l2-2-1">6</li></ul></div>
                <div class="box2-2-2"><ul class="c2-2-2"><li class="l2-2-2">1</li><li class="l2-2-2">2</li><li class="l2-2-2">3</li></ul></div>
            </div>
        </div>
    </div>
</body>
</html>