前端开发-小米商城界面项目HTML+CSS代码

商道如狼道 发表于 2025-1-4 01:14:11

小米商城界面项目HTML+CSS代码

刚学前端，做了小米商城的界面练习，写完了把代码分享一下，内里可能有许多实现的不规范的地方，请各位大佬多指正！
实现效果

实现了大部分的鼠标交互效果，包罗字体变色，动画，滑动门等。
成品链接

完整实现效果可以直接在这里看：
https://johanacomlan.github.io/mi_website/
效果截图

https://i-blog.csdnimg.cn/direct/5c9d2564f6b54c50a5c77fc0d8c16f0f.png
https://i-blog.csdnimg.cn/direct/52b5b412c52d464e83d9346dd5770037.png
https://i-blog.csdnimg.cn/direct/f0c103659ba1433dba2c5eb3a0d71c6f.png
https://i-blog.csdnimg.cn/direct/24908c29f5724ae0b515a6c0405b87b7.png
https://i-blog.csdnimg.cn/direct/6c969e9f6c80450f87c85ce88f2c2541.png
实当代码

因为代码比较多，完整代码和用到的图片资源传到传到GitHub上了：
https://github.com/JohanaComlan/mi_website
导航栏部分实现

顶部广告和导航的HTML代码：

<header>
   <a href="https://www.mi.com/appdownload">
         <img src="./images/ad_banner.jpg" alt="广告">
   </a>
</header>



<nav>
   <div class="container">
         <div class="topbar-nav">
            <a href="https://www.mi.com/html/index.html">小米商城</a>
            <span class="sep">|</span>
            <a href="https://home.miui.com/">MIUI</a>
            <span class="sep">|</span>
            <a href="https://iot.mi.com/">IoT</a>
            <span class="sep">|</span>
            <a href="https://i.mi.com/">云服务</a>
            <span class="sep">|</span>
            <a href="https://airstar.com/home">天星数科</a>
            <span class="sep">|</span>
            <a href="https://youpin.mi.com/">有品</a>
            <span class="sep">|</span>
            <a href="https://xiaoai.mi.com/">小爱开放平台</a>
            <span class="sep">|</span>
            <a href="https://qiye.mi.com/">企业团购</a>
            <span class="sep">|</span>
            <a href="https://www.mi.com/aptitude/list/?id=41">资质证照</a>
            <span class="sep">|</span>
            <a href="https://www.mi.com/shop/aptitude/list">协议规则</a>
            <span class="sep">|</span>
            <a href="https://www.mi.com/appdownload" class="download">
               <span>下载App</span>
               <div class="downloadQR">
                     <img src="./images/download.png" alt="下载二维码">
               </div>
            </a>
            <span class="sep">|</span>
            <a href="https://xiaomishare.mi.com/?from=micom">智能生活</a>
         </div>
         <div class="topinfo-nav">
            <a
               href="#">登录</a>
            <span class="sep">|</span>
            <a
               href="#">注册</a>
            <span class="sep">|</span>
            <a href="#">消息通知</a>
            <a href="#">
               <span class="shoppingcar">
                     <span class="iconfont icon-gouwuche"></span>
                     <span>购物车（0）</span>
                     <div class="tooltip">购物车中还没有商品，赶紧选购吧！</div>
               </span>
            </a>
         </div>
   </div>
</nav>



<div class="white-nav-background">
   <div class="white-nav wrap">
         <div class="logo">
            <span class="iconfont icon-xiaomi mi-logo"></span>
            <span class="iconfont icon-home mi-home"></span>
         </div>
         <ul class="white-nav-left">
            <li>
               <a href="#">小米手机</a>
               <div class="nav-detial-block">
                     <div class="wrap">
                        <ul>
                           <li>
                                 <a href="#">
                                    <div class="img-box">
                                       <img src="./images/phone2.png" alt="">
                                    </div>
                                    <p class="name">小米10至尊纪念版</p>
                                    <p class="price">5200元</p>
                                 </a>
                           </li>
                           <li>
                                 <a href="#">
                                    <div class="img-box">
                                       <img src="./images/phone2.png" alt="">
                                    </div>
                                    <p class="name">小米10至尊纪念版</p>
                                    <p class="price">5200元</p>
                                 </a>
                           </li>
                           <li>
                                 <a href="#">
                                    <div class="img-box">
                                       <img src="./images/phone2.png" alt="">
                                    </div>
                                    <p class="name">小米10至尊纪念版</p>
                                    <p class="price">5200元</p>
                                 </a>
                           </li>
                        </ul>
                     </div>
               </div>
            </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 class="search">
            <input type="text" placeholder="元宇宙">
            <button class="iconfont icon-sousuo"></button>
         </div>
   </div>
</div>
 对应的CSS：
/* 顶部广告 start*/
header {
width: 100%;
height: 120px;
/* 隐藏超出的部分 */
overflow: hidden;
position: relative;
}

header img {
height: 120px;
position: absolute;
/* 实现居中 */
/* 将 header img 元素的左边缘定位到其容器的左边缘的50%处 */
left: 50%;
/* 向左移动元素自身宽度的50%。 */
transform: translateX(-50%);
}

/* 顶部广告 end*/

/* 黑色导航栏 start */
nav {
height: 40px;
width: 100%;
margin: 0 auto;
line-height: 40px;
font-size: 12px;
/* 简化 margin 设置 */
background-color: #333;
}

nav .container {
max-width: 1226px;
width: 100%;
display: flex;
align-items: center;
/* 水平居中 */
margin: 0 auto;
}

.topinfo-nav {
/* 填充左侧的所有剩余空间，从而推到容器的最右边 */
margin-left: auto;
position: relative;
z-index: 60;
}

.topbar-nav {
position: relative;
}

/* 导航栏链接和分隔符样式 */
.topinfo-nav a,
.topbar-nav a {
color: #b0b0b0;
position: relative;
display: inline-block;
}

/* 鼠标悬停时链接字体颜色 */
.topinfo-nav a:hover,
.topbar-nav a:hover {
color: #fff;
}

/* 分隔符样式 */
.sep {
color: #424242;
/* 设置分隔符的颜色 */
font-weight: bold;
/* 可选：加粗显示分隔符 */
padding: 0 5px;
}

.shoppingcar:hover {
background-color: #fff;
color: #FE6900;
}

.downloadQR {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 110%;
width: 120px;
height: 120px;
background-color: #fff;
color: #424242;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
z-index: 75;
}

.download:hover .downloadQR {
display: block;
}

.downloadQR img {
height: 100px;
margin: 10px auto;
}

.shoppingcar {
height: 40px;
display: inline-block;
background-color: #424242;
text-align: center;
padding: 0 20px;
margin-left: 5px;
position: relative;
}

.shoppingcar:hover .tooltip {
display: block;
}

.shoppingcar .tooltip {
position: absolute;
/* 绝对定位 */
display: none;
height: 70px;
line-height: 70px;
top: 100%;
/* 位于购物车按钮的下方 */
right: 0;
background-color: #fff;
color: #333;
font-size: 12px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
/* 黑色导航栏 end */

/* 白色导航栏 */
.white-nav-background{
position: relative;
z-index: 50;
}

/* 白色导航栏下滑框 */
.nav-detial-block{
display: none;
position: absolute;
z-index: 40;
top: 100px;
left: 0;
height: 229px;
width: 100%;
background-color: #ffffff;
border-top: 1px solid rgba(39, 39, 39, 0.1);
box-shadow: 0 3px 4px rgba(0,0,0,0.1);
}

.img-box img{
width: 160px;
padding-bottom:8px;
padding-top: 8px;
margin-right: 20px;
}

.nav-detial-block .wrap ul{
float: left;
}

.nav-detial-block .wrap li{
line-height: normal;
border-right: 1px solid #b0b0b045;
}

.white-nav {
height: 100px;
background-color: #fff;
line-height: 100px;
display: flex;
}

.white-nav li {
display: inline-block;
margin-left: 10px;
margin-top: 5px;
}

.white-nav li a {
color: #424242;
z-index: 10;
position: relative;
font-size: 16px;
padding-left: 15px;
}

.white-nav-left {
margin-left: 200px;
}

.white-nav-left li a:hover {
color: #FE6900;
transition: color 0.2s;
}

.white-nav-left li:hover .nav-detial-block{
display: block;
}

.white-nav .logo {
width: 50px;
height: 50px;
background-color: #FE6900;
border-radius: 20px;
margin: auto 0;
position: relative;
line-height: 50px;
display: flex;
overflow: hidden;
}

.white-nav .logo span {
font-size: 30px;
color: #fff;
position: absolute;
transition: all 0.2s;
}

.white-nav .logo .mi-logo {
left: 10px;
}

.white-nav .logo .mi-home {
right: 100%;
}

.white-nav .logo:hover .mi-logo {
left: 100%;
}

.white-nav .logo:hover .mi-home {
right: 10px;
}

.search {
margin-left: auto;
position: relative;
display: flex;
align-items: center;
transition: border-color 0.2s;
}

.search input,
.search button {
border: 1px solid #e0e0e0;
border-radius: 0%;
background-color: #fff;
}

.search input {
padding: 0 10px;
height: 48px;
width: 223px;
border-right: 0;
outline: none;
}

.search button {
width: 52px;
height: 50px;
color: #616161;
font-weight: 700;
}

.search button:hover {
background-color: #FE6900;
color: #fff;
}

.search:hover input,
.search:hover button {
border-color: #b0b0b0;
}

.search:focus-within input,
.search:focus-within button {
border-color: #FE6900;
}
/* 白色导航栏 end*/ 参考

实现思路参考了这个课，但实当代码不一样。
https://www.bilibili.com/video/BV1iM4y117yH/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=d719979df761c70ec6ee171ae3145870

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

qidao123.com技术社区-IT企服评测·应用市场's Archiver

小米商城界面项目HTML+CSS代码