欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

用 HTML 和 css 编写的小米商城界面

最编程 2024-03-19 11:01:26
...

 



 


 


 


 


 练习css，模仿了部分js的效果，所以有点长，css代码块在后面，


大神勿喷！
练习写的，就页脚部分有点赶时间，是个缺陷，后面有时间改一下


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>小米商城</title>
    <link rel="stylesheet" href="css/xiaomi.css">
</head>
<body>
<!--头部导航栏-->
<div class="header">
    <div class="wrap">
        <ul class="header-left">
            <li><a href="#">小米商城</a><span>|</span></li>
            <li><a href="#">MIUI</a><span>|</span></li>
            <li><a href="#">loT</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="#">下载app</a><span>|</span>
                <div class="download">
                    <a href="#">
                        <img src="img/download.png" alt="">
                        <p>小米商城app</p>
                    </a>
                </div>
                <div class="triangle"></div>
            </li>
            <li><a href="#">智能生活</a><span>|</span></li>
            <li><a href="#">Select Location</a></li>
        </ul>
        <ul class="header-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a></li>
            <li class="cart">
                <a href="#">购物车</a>
                <div class="cart-list">
                        哦！购物车是空的！
                </div>
            </li>
        </ul>
    </div>
</div>
<!--头部导航栏结束-->
<!--导航开始-->
<div class="nav">
    <div class="wrap">
        <div class="logo">
            <a href="#">
                <img src="img/logo-mi2.png" alt="">
            </a>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="#">小米手机</a>
                    <div class="nav-bar-list">
                    <div class="wrap">
                        <ul>
                            <li>
                                 <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                        </div>
                                     <p>小米11</p>
                                     <p>2599元</p>
                                 </a>
                             </li>
                            <li>
                                 <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                        </div>
                                     <p>小米12</p>
                                     <p>2599元</p>
                                 </a>
                             </li>
                            <li>
                                <a href="#">
                                    <div class="nav-img-box">
                                        <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                    </div>
                                    <p>小米13</p>
                                    <p>2599元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-img-box">
                                        <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                    </div>
                                    <p>小米14</p>
                                    <p>2599元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-img-box">
                                        <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                    </div>
                                    <p>小米15</p>
                                    <p>2599元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-img-box">
                                        <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt="">
                                    </div>
                                    <p>小米16</p>
                                    <p>2599元</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                </li>
                <li><a href="#">Red米</a>
                    <div class="nav-bar-list">
                        <div class="wrap">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt="">
                                        </div>
                                        <p>红米耳机</p>
                                        <p>2599元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                        </div>
                                        <p>红米11</p>
                                        <p>2599元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                        </div>
                                        <p>红米9</p>
                                        <p>2599元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                        </div>
                                        <p>红米10</p>
                                        <p>2599元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                        </div>
                                        <p>小米11</p>
                                        <p>2599元</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-img-box">
                                            <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                        </div>
                                        <p>小米11</p>
                                        <p>2599元</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">电视</a>
                    <div class="nav-bar-list">
                    <div class="wrap">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="nav-img-box">
                                        <img src="img/3d47879ec183e25a36e67e0219636e60.jpg" alt="" width="60%" height="60%">
                                    </div>
                                    <p>红米耳机</p>
                                    <p>2599元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-img-box">
                                        <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
                                    </div>
                                    <p>红米11</p>
                                    <p>2599元</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="nav-img-box">
                                  					

																				

						

							上一篇：							
								2020雷军小米十周年演讲PPT附下载地址							
						

						

							下一篇：							
								小米手机销量暴跌36% 雷军做错了什么？(人的需求是复杂的，不是单纯的性价比；要做体验性价比，不是配置性价比）好							
						

					

															

						

							推荐阅读