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

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

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

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

实当代码

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

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

1. <!-- 顶部广告 -->
2.     <header>
3.         <a href="https://www.mi.com/appdownload">
4.             <img src="./images/ad_banner.jpg" alt="广告">
5.         </a>
6.     </header>
7.     <!-- 顶部广告 -->
9.     <!-- 导航 -->
10.     <nav>
11.         <div class="container">
12.             <div class="topbar-nav">
13.                 <a href="https://www.mi.com/html/index.html">小米商城</a>
14.                 <span class="sep">|</span>
15.                 <a href="https://home.miui.com/">MIUI</a>
16.                 <span class="sep">|</span>
17.                 <a href="https://iot.mi.com/">IoT</a>
18.                 <span class="sep">|</span>
19.                 <a href="https://i.mi.com/">云服务</a>
20.                 <span class="sep">|</span>
21.                 <a href="https://airstar.com/home">天星数科</a>
22.                 <span class="sep">|</span>
23.                 <a href="https://youpin.mi.com/">有品</a>
24.                 <span class="sep">|</span>
25.                 <a href="https://xiaoai.mi.com/">小爱开放平台</a>
26.                 <span class="sep">|</span>
27.                 <a href="https://qiye.mi.com/">企业团购</a>
28.                 <span class="sep">|</span>
29.                 <a href="https://www.mi.com/aptitude/list/?id=41">资质证照</a>
30.                 <span class="sep">|</span>
31.                 <a href="https://www.mi.com/shop/aptitude/list">协议规则</a>
32.                 <span class="sep">|</span>
33.                 <a href="https://www.mi.com/appdownload" class="download">
34.                     <span>下载App</span>
35.                     <div class="downloadQR">
36.                         <img src="./images/download.png" alt="下载二维码">
37.                     </div>
38.                 </a>
39.                 <span class="sep">|</span>
40.                 <a href="https://xiaomishare.mi.com/?from=micom">智能生活</a>
41.             </div>
42.             <div class="topinfo-nav">
43.                 <a
44.                     href="#">登录</a>
45.                 <span class="sep">|</span>
46.                 <a
47.                     href="#">注册</a>
48.                 <span class="sep">|</span>
49.                 <a href="#">消息通知</a>
50.                 <a href="#">
51.                     <span class="shoppingcar">
52.                         <span class="iconfont icon-gouwuche"></span>
53.                         <span>购物车（0）</span>
54.                         <div class="tooltip">购物车中还没有商品，赶紧选购吧！</div>
55.                     </span>
56.                 </a>
57.             </div>
58.         </div>
59.     </nav>
60.     <!-- 导航 -->
62.     <!-- 白色导航 -->
63.     <div class="white-nav-background">
64.         <div class="white-nav wrap">
65.             <div class="logo">
66.                 <span class="iconfont icon-xiaomi mi-logo"></span>
67.                 <span class="iconfont icon-home mi-home"></span>
68.             </div>
69.             <ul class="white-nav-left">
70.                 <li>
71.                     <a href="#">小米手机</a>
72.                     <div class="nav-detial-block">
73.                         <div class="wrap">
74.                             <ul>
75.                                 <li>
76.                                     <a href="#">
77.                                         <div class="img-box">
78.                                             <img src="./images/phone2.png" alt="">
79.                                         </div>
80.                                         <p class="name">小米10至尊纪念版</p>
81.                                         <p class="price">5200元</p>
82.                                     </a>
83.                                 </li>
84.                                 <li>
85.                                     <a href="#">
86.                                         <div class="img-box">
87.                                             <img src="./images/phone2.png" alt="">
88.                                         </div>
89.                                         <p class="name">小米10至尊纪念版</p>
90.                                         <p class="price">5200元</p>
91.                                     </a>
92.                                 </li>
93.                                 <li>
94.                                     <a href="#">
95.                                         <div class="img-box">
96.                                             <img src="./images/phone2.png" alt="">
97.                                         </div>
98.                                         <p class="name">小米10至尊纪念版</p>
99.                                         <p class="price">5200元</p>
100.                                     </a>
101.                                 </li>
102.                             </ul>
103.                         </div>
104.                     </div>
105.                 </li>
106.                 <li><a href="#">电脑</a></li>
107.                 <li><a href="#">笔记本</a></li>
108.                 <li><a href="#">家电</a></li>
109.                 <li><a href="#">路由器</a></li>
110.                 <li><a href="#">智能硬件</a></li>
111.                 <li><a href="#">服务</a></li>
112.                 <li><a href="#">社区</a></li>
113.             </ul>
114.             <div class="search">
115.                 <input type="text" placeholder="元宇宙">
116.                 <button class="iconfont icon-sousuo"></button>
117.             </div>
118.         </div>
119.     </div>
120.     <!-- 白色导航 -->

复制代码

对应的CSS：

1. /* 顶部广告 start*/
2. header {
3.     width: 100%;
4.     height: 120px;
5.     /* 隐藏超出的部分 */
6.     overflow: hidden;
7.     position: relative;
8. }
10. header img {
11.     height: 120px;
12.     position: absolute;
13.     /* 实现居中 */
14.     /* 将 header img 元素的左边缘定位到其容器的左边缘的50%处 */
15.     left: 50%;
16.     /* 向左移动元素自身宽度的50%。 */
17.     transform: translateX(-50%);
18. }
20. /* 顶部广告 end*/
22. /* 黑色导航栏 start */
23. nav {
24.     height: 40px;
25.     width: 100%;
26.     margin: 0 auto;
27.     line-height: 40px;
28.     font-size: 12px;
29.     /* 简化 margin 设置 */
30.     background-color: #333;
31. }
33. nav .container {
34.     max-width: 1226px;
35.     width: 100%;
36.     display: flex;
37.     align-items: center;
38.     /* 水平居中 */
39.     margin: 0 auto;
40. }
42. .topinfo-nav {
43.     /* 填充左侧的所有剩余空间，从而推到容器的最右边 */
44.     margin-left: auto;
45.     position: relative;
46.     z-index: 60;
47. }
49. .topbar-nav {
50.     position: relative;
51. }
53. /* 导航栏链接和分隔符样式 */
54. .topinfo-nav a,
55. .topbar-nav a {
56.     color: #b0b0b0;
57.     position: relative;
58.     display: inline-block;
59. }
61. /* 鼠标悬停时链接字体颜色 */
62. .topinfo-nav a:hover,
63. .topbar-nav a:hover {
64.     color: #fff;
65. }
67. /* 分隔符样式 */
68. .sep {
69.     color: #424242;
70.     /* 设置分隔符的颜色 */
71.     font-weight: bold;
72.     /* 可选：加粗显示分隔符 */
73.     padding: 0 5px;
74. }
76. .shoppingcar:hover {
77.     background-color: #fff;
78.     color: #FE6900;
79. }
81. .downloadQR {
82.     display: none;
83.     position: absolute;
84.     left: 50%;
85.     transform: translateX(-50%);
86.     top: 110%;
87.     width: 120px;
88.     height: 120px;
89.     background-color: #fff;
90.     color: #424242;
91.     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
92.     z-index: 75;
93. }
95. .download:hover .downloadQR {
96.     display: block;
97. }
99. .downloadQR img {
100.     height: 100px;
101.     margin: 10px auto;
102. }
104. .shoppingcar {
105.     height: 40px;
106.     display: inline-block;
107.     background-color: #424242;
108.     text-align: center;
109.     padding: 0 20px;
110.     margin-left: 5px;
111.     position: relative;
112. }
114. .shoppingcar:hover .tooltip {
115.     display: block;
116. }
118. .shoppingcar .tooltip {
119.     position: absolute;
120.     /* 绝对定位 */
121.     display: none;
122.     height: 70px;
123.     line-height: 70px;
124.     top: 100%;
125.     /* 位于购物车按钮的下方 */
126.     right: 0;
127.     background-color: #fff;
128.     color: #333;
129.     font-size: 12px;
130.     padding: 10px;
131.     border: 1px solid #ccc;
132.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
133.     white-space: nowrap;
134. }
135. /* 黑色导航栏 end */
137. /* 白色导航栏 */
138. .white-nav-background{
139.     position: relative;
140.     z-index: 50;
141. }
143. /* 白色导航栏下滑框 */
144. .nav-detial-block{
145.     display: none;
146.     position: absolute;
147.     z-index: 40;
148.     top: 100px;
149.     left: 0;
150.     height: 229px;
151.     width: 100%;
152.     background-color: #ffffff;
153.     border-top: 1px solid rgba(39, 39, 39, 0.1);
154.     box-shadow: 0 3px 4px rgba(0,0,0,0.1);
155. }
157. .img-box img{
158.     width: 160px;
159.     padding-bottom:8px;
160.     padding-top: 8px;
161.     margin-right: 20px;
162. }
164. .nav-detial-block .wrap ul{
165.     float: left;
166. }
168. .nav-detial-block .wrap li{
169.     line-height: normal;
170.     border-right: 1px solid #b0b0b045;
171. }
173. .white-nav {
174.     height: 100px;
175.     background-color: #fff;
176.     line-height: 100px;
177.     display: flex;
178. }
180. .white-nav li {
181.     display: inline-block;
182.     margin-left: 10px;
183.     margin-top: 5px;
184. }
186. .white-nav li a {
187.     color: #424242;
188.     z-index: 10;
189.     position: relative;
190.     font-size: 16px;
191.     padding-left: 15px;
192. }
194. .white-nav-left {
195.     margin-left: 200px;
196. }
198. .white-nav-left li a:hover {
199.     color: #FE6900;
200.     transition: color 0.2s;
201. }
203. .white-nav-left li:hover .nav-detial-block{
204.     display: block;
205. }
207. .white-nav .logo {
208.     width: 50px;
209.     height: 50px;
210.     background-color: #FE6900;
211.     border-radius: 20px;
212.     margin: auto 0;
213.     position: relative;
214.     line-height: 50px;
215.     display: flex;
216.     overflow: hidden;
217. }
219. .white-nav .logo span {
220.     font-size: 30px;
221.     color: #fff;
222.     position: absolute;
223.     transition: all 0.2s;
224. }
226. .white-nav .logo .mi-logo {
227.     left: 10px;
228. }
230. .white-nav .logo .mi-home {
231.     right: 100%;
232. }
234. .white-nav .logo:hover .mi-logo {
235.     left: 100%;
236. }
238. .white-nav .logo:hover .mi-home {
239.     right: 10px;
240. }
242. .search {
243.     margin-left: auto;
244.     position: relative;
245.     display: flex;
246.     align-items: center;
247.     transition: border-color 0.2s;
248. }
250. .search input,
251. .search button {
252.     border: 1px solid #e0e0e0;
253.     border-radius: 0%;
254.     background-color: #fff;
255. }
257. .search input {
258.     padding: 0 10px;
259.     height: 48px;
260.     width: 223px;
261.     border-right: 0;
262.     outline: none;
263. }
265. .search button {
266.     width: 52px;
267.     height: 50px;
268.     color: #616161;
269.     font-weight: 700;
270. }
273. .search button:hover {
274.     background-color: #FE6900;
275.     color: #fff;
276. }
278. .search:hover input,
279. .search:hover button {
280.     border-color: #b0b0b0;
281. }
283. .search:focus-within input,
284. .search:focus-within button {
285.     border-color: #FE6900;
286. }
287. /* 白色导航栏 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企服之家，中国第一个企服评测及商务社交产业平台。