第四天作业

最新推荐文章于 2024-11-12 22:56:44 发布

myrouya

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量55

点赞数

文章标签： css

本文链接：https://blog.csdn.net/myrouya/article/details/131649490

版权

这段代码展示了如何使用HTML和CSS创建一个小米官网风格的头部布局，包括品牌logo、导航菜单、以及一个简单的搜索框。导航菜单包含了多个产品类别，如手机、电视和家电等，每个类别后面都有一个小箭头图标。搜索框位于导航下方，提供搜索功能。

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

作业要求：

代码截图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Desktop">
    <style>
        .box1 {
            display: flex;
            height: 50px;
            width: 1000px;
        }
        .mi{
            width: 120px;
        }
        .lan{
            width: 500px;
        }
        ul li {
            width:auto;
            display: inline-block;
        }
        a {
            text-decoration: none;
            color: rgb(81, 79, 77);
        }
        .sou {
            position: relative;
            bottom: -15px;
            width: 300px;
            height: 50px;
        }
        .box2{
            display: flex;
        }
        .hang{
            height: 480px;
            width: 200px;
            background-color: rgb(162, 160, 154);
            padding: 30px 10px 30px 30px;
        }
        .hang li{
            width: 210px;
            height: 50px;
        }
        .hang a{
                color:white;
            }
        .hang img{
            position: relative;
            bottom: -6px;
        }
        .img {
            height: 540px;
            width: 1000px;
            padding: 16px;
        }
    </style>
</head>

<body>
<div class="box1">
    <div class="mi"><img src="C:\Users\86183\Desktop\web素材\7.9\1688911621057.png" width="50px" height="50px"></div>
    <div>
        <ul class="lan">
            <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>
        </ul>
    </div>
    <div class="sou"><input type="text" name="搜索框" value="显示器">
    <input type="button" value="搜索">
    </div> 
</div>
<div class="box2">
    <div>
        <ul class="hang">
            <li><a href="#">手机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">电视&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">家电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">笔记本 电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">出行 穿戴&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">耳机 音箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">健康 儿童&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">生活 箱包&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">智能 路由器&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
            <li><a href="#">电源 配件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><img src="C:\Users\86183\Desktop\web素材\7.9\小箭头.jpg"></li>
        </ul>
    </div>
    <div class="img"><img src="C:\Users\86183\Desktop\web素材\7.9\xiaomishouji.png" width="650px" height="545px">
    </div>
</div>
</body>
</html>

作业结果：