WEB前端 网址练习

html 复制代码
<!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>
相关推荐
2401_837088501 分钟前
CSS清楚默认样式
前端·javascript·css
zwjapple12 分钟前
React 的 useEffect 清理函数详解
前端·react.js·前端框架
Jewel10522 分钟前
如何配置Telegram Mini-App?
前端·vue.js·app
s11show_1631 小时前
hz修改后台新增keyword功能
android·java·前端
二个半engineer1 小时前
Web常见攻击方式及防御措施
前端
co松柏1 小时前
程序员必备——AI 画技术图技巧
前端·后端·ai编程
前端大白话1 小时前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
五号厂房1 小时前
React 异步回调中产生的闭包问题剖析及解决
前端
用户2031196600961 小时前
GeometryProxy 和 GeometryReader 的区别
前端
前端大白话1 小时前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js