11.23周三DAY6笔记

最新推荐文章于 2024-06-13 18:31:56 发布

FoldWinCard

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量24

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/FoldWinCard/article/details/134691328

版权

<!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>
           *{margin: 0; padding: 0;}
        .nav{
            width: 1226px;
            height: 40px;
            background-color: darkgrey;
            display: flex;
            justify-content: center;
        }
        .box1{
            display: flex;
            background-color: bisque;
            list-style: none;
            width: 800px;
            height: 40px;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
        }
        .box1 li{
            display: flex;
            background-color: azure;
            float: left;
            clear: none;
            flex-wrap: wrap;
            align-content: center;
        }
        .box1 li a{
            display: block;
            text-decoration: none;
            color: black;
            border: 1px solid gray;
        }
        .box1 .box2 .pic{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 40px;
            border: 1px solid #ccc;
        }
        .pic{
            visibility: hidden;
        }
        a .pic:hover{
            visibility: visible;
        }
        .box3{
            width: 1226px;
            height: 460px;
            background-color: darkgray;
        }
        .box5{
            display: flex;
            width: 234px;
            height: 460px;
            background-color: dimgrey;
            flex-direction: column;
            justify-content: space-around;
        }
        .box5 li{}


    </style>
</head>
<body>
    <div class="nav">
        <ul class="box1">
            <li><a href="#">小米官网</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米澎湃OS</a></li>
            <li><a href="#">loT</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">天星数科</a></li>
            <li><a href="#">有品</a></li>
            <li><a href="#">小爱开放平台</a></li>
            <li><a href="#">资质证照</a></li>
            <li><a href="#">协议规则</a></li>
            <li class="box2"><a href="#">下载app <img src="./download.png" class="pic"></a></li>
            <li><a href="#">SelectLocation</a></li>
        </ul>
    </div>
    <hr />
    <div class="box3">
        <ul class="box5">
            <li>手机</li>
            <li>电视</li>
            <li>家电</li>
            <li>笔记本 平板</li>
            <li>出行 穿戴</li>
            <li>耳机 音箱</li>
            <li>健康 儿童</li>
            <li>生活 箱包</li>
            <li>智能 路由器</li>
            <li>电源 配件</li>
        </ul>
        <div class="box4"> </div>
    </div>
</body>
</html>