1、效果图

2、所搭建文件

 

3、index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>小米商城</title>

    <link rel="stylesheet" href="./css/reset.css">

    <link rel="stylesheet" href="./css/index.css">

</head>

<body>

    <div >

        <div >

            <div >

                <a href="#">小米商城</a>

                <span>|</span>

                <a href="#">MIUI</a>

                <span>|</span>

                <a href="#">IOT</a>

                <span>|</span>

                <a href="#">云服务</a>

                <span>|</span>

                <a href="#">小爱开放平台</a>

                <span>|</span>

                <a href="#">企业团购</a>

                <span>|</span>

                <a href="#">协议规则</a>

                <span>|</span>

                <a href="#">下载app</a>

            </div>

            <div >

                <a href="#">购物车（0）</a>

            </div>

            <div >

                <a href="#">登录</a>

                <a href="#">注册</a>

                <a href="#">消息通知</a>

            </div>

        </div>

    </div>

    <div >

        <div >

            <div >

                <img src="./img/logo.jpg" alt="">

                <div >

                    <ul>

                        <li>

                            <div >

                                <a href="#">手机 电话卡</a>

                                <a >></a>

                            </div>

                        </li>

                        <li>

                            <div >

                                <a href="#">电视 盒子</a>

                                <a >></a>

                            </div>

                        </li>

                        <li>

                            <div >

                                <a href="#">笔记本 显示器 平板</a>

                                <a >></a>