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>
相关推荐
GIS之路11 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴19 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥23 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记34 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js