作业——小米官网

最新推荐文章于 2024-08-31 13:30:09 发布

tan &

最新推荐文章于 2024-08-31 13:30:09 发布

阅读量70

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_74747565/article/details/131657819

版权

这是一个网页头部及轮播图的HTML和CSS代码示例，包括了品牌logo、导航菜单、搜索功能以及一个带有导航点的轮播图。代码中使用了Flexbox布局，定义了各种元素的样式，并实现了响应式设计。

摘要由CSDN通过智能技术生成

<!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;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        input{
            outline: none;
        }
        .container{
            width: 1226px;
            margin:0 auto;
        }
        .header .left img{
            width: 56px;
            height: 56px;
        }
        .head{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .head .mid ul{
            display: flex;
        }
        .head .mid ul li{
            margin-right: 30px;
        }
        .head .mid ul a{
            color: #757575;
        }
        .head .mid ul a:hover{
            color:orange;
        }
        .head .right{
            position: relative;
        }
        .head .right input{
            width: 245px;
            height: 40px;
            border: 1px solid #757575;
            border-radius: 5px;
        } 
        .head .right span{
            display: inline-block;
            width: 52px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            right: 0;
        }
        .a{
            position: absolute;
            top: 50%;
            margin-top: -33,5px;
            right: 240px;
        }
        .b{
            position: absolute;
            top: 50%;
            margin-top: -33,5px;
            right: 0;
        }
        .banner .circle span{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: pink;
            border-radius: 50%;
        }
        .banner{
            position: relative;
            margin-top: 20px;
        }
        .nav{
            position: absolute;
            top: 0;
            left: 0;
        }
        .nav ul{
            background-color: #343333;
            width: 234px;
            height: 460px;
            font: 18px/1.5 Helvetice Neue,Helvetice,Arical;
            padding: 20px 0px;
        }
        .nav ul li {
            display: flex;
            justify-content: space-between;
            padding: 0px 30px;
        }
        .nav ul li a{
            display: inline-block;
            width: 234px;
            height: 42px;
            line-height: 42px;
            color: aliceblue;
        }
        .nav ul li:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container head">
            <div class="left"><img src="../font_4159917_uqjzdz8xf5/屏幕截图 2023-07-10 191430.png" alt=""></div>
            <div class="mid">
                <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="right">
                <input type="text">
                <span>搜索</span>
            </div>
        </div>
    </div>
    <div class="banner container">
        <img src="../font_4159917_uqjzdz8xf5/屏幕截图 2023-07-10 185718.png" alt="">
         <div class="nav">
            <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>
         <i class="a">&lt;</i>
         <i class="b">&gt;</i>
         <div class="circle">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
         </div>
    </div>
</body>
</html>