前端课程作业

最新推荐文章于 2024-11-01 12:26:05 发布

oHuii

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量43

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_74392119/article/details/131733819

版权

<!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;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        input {
            outline: none;}
        .father{
            display:flex;
            flex-wrap: nowrap;
            width: 1000px;
            height: 1000px;
        flex-wrap: nowrap;
        
        
        }
         .father .son1{
            display: inline-block;}
            .father .lei ul li{
                display: inline-block;}
        .father .lei ul li a{
            color:#757575;
background-color: rgba(0,0,0,0);
        }
        .father .lei ul li a:hover{
            color: orange;
        }
        .father .sousuo span {
            display: inline-block;
            width: 223px;
            height: 48px;
            line-height: 48px;
            position: absolute;
            right: 51px;
            z-index: 1;
            padding: 0 10px;
        }
        .father .sousuo input {
            width: 245px;
            height: 40px;
            border: 1px solid #757575;
            border-radius: 5px;
            display: inline-block;
        }
        

.sebianlan{
    position: relative;
            margin-top: 20px;
}
.cebianlan .left{
    position: absolute;
            top: 0;
            left: 0;
}
.cebianlan .left ul
      {background-color: rgba(105, 101, 101, .6);
            width: 234px;
            height: 460px;
            font: 18px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            padding: 20px 0px;
        }
        .cebianlan .left ul li
       {display: flex;
            justify-content: space-between;
            padding: 0px 30px;}
            .left ul li a {
            display: inline-block;
            width: 234px;
            height: 42px;
            line-height: 42px;

            color: aliceblue;
        }

        .left ul li:hover {
                background-color: orange}

    </style>
</head>
<body>
    <div class="father">
        <div class="son1">
            <div class="logo">
                <img src="../logo-mi2.png" alt="" width="56px" height="56px"></div>
            <div class="lei">
                <ul>
                    <li><a href="#">Xiaomi手机</a></li>
                    <li><a href="#">Redmi手机</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><a href="#">社区</a></li>


                </ul>
            </div>
            <div class="sousuo">
                <input type="text">
                <span>搜索</span>
            </div>
        </div>
    </div>
    <div class="cebianlan">
        <img src="../0942f8338bc19a2cde9394479fc123c8 (1).webp"
            alt="">
        <div class="left">
            <ul>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">电器商品</a>
                    <span>></span>
                </li>
            </ul>
        </div>
</body>
</html>