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>
相关推荐
剑亦未配妥20 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师1 天前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 天前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy1 天前
css的基本知识
前端·css
昔人'1 天前
css `lh`单位
前端·css
Nan_Shu_6141 天前
Web前端面试题(2)
前端
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 天前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 天前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5201 天前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js