耗时两天，Html实现小米官网
实现展示：代码总共 808行 ，其中实现了小米官网外观布局的大部分。网址和图标类似的菜单也可以实现下拉透明度为0.3每一个地方都是超链接，可以进行点击搜索栏获得焦点后会变颜色光标停留也有响应特效相关的图片和代码实现代码：html 代码<html><head><meta charset="utf-8"><title>小米商城</title>
·
实现展示：
代码总共 808行 ，其中实现了小米官网外观布局的大部分。
网址和图标
类似的菜单也可以实现下拉
透明度为0.3
每一个地方都是超链接，可以进行点击
搜索栏获得焦点后会变颜色
光标停留也有响应特效
相关的图片和代码
实现代码：
html 代码
<html>
<head>
<meta charset="utf-8">
<title>小米商城</title>
<link rel='stylesheet' href='reset.css'>
<link rel='stylesheet' href='css/all.css'>
<link rel='stylesheet' href='Index.css'>
<link rel='icon' href='favicon.ico'>
</head>
<body>
<div class='body'>
<div class='daohan'>
<div class='generallist'>
<ul>
<li>
<a href='' class='white'>小米商城</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>MIUI</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>IoT</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>云服务</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>天星数科</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>有品</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>小爱开放平台</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>企业团购</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>资质证照</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>协议规则</a>
</li>
<li class='xiazai'>
<span class='fenge'>|</span>
<a href='' class='white'>下载app</a>
<div class='app'>
<img src='img/download.png'>
小米商城APP
</div>
<div class='sanjiaoxing'></div>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>智能生活</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>Select Location</a>
</li>
</ul>
</div>
<div class='useroperate'>
<ul>
<li>
<a href='' class='white'>登录</a>
</li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>注册</a></li>
<li>
<span class='fenge'>|</span>
<a href='' class='white'>消息通知</a></li>
<li class='gouwuche'>
<a href=''>
<i class='fas fa-shopping-cart car'></i>
<span>购物车</span>
<span>(0)</span>
</a>
<div class='gw'></div>
</li>
</ul>
</div>
</div>
<div class='shouye'>
<div class='shouyetuisong'>
<div class='shouyetubiao'>
<a href=''>
<img src='img/mi.png'>
</a>
</div>
<div class='tuisongdaohang'>
<div class='xialazangshi'>
<ul>
<!--小米手机-->
<li class='zangshi'>
<a href=''>小米手机</a>
<div class='zangshilist'>
<div class='zangshiqu'>
<div class='zangshitai'>
<img src='img/xmsj1.webp'>
</br>小米手机MIX FOLD</br>
<span class='biankuang'>9999元起</span>
</div>
<div class='zangshitai'>
<img src='img/xmsj2.webp'>
</br>小米11 Ultra</br>
<span class='biankuang'>5499元起</span>
</div>
<div class='zangshitai'>
<img src='img/xmsj3.webp'>
</br>小米11 Pro</br>
<span class='biankuang'>4499元起</span>
</div>
<div class='zangshitai'>
<img src='img/xmsj4.webp'>
</br>小米11 青春版</br>
<span class='biankuang'>2099元起</span>
</div>
<div class='zangshitai'>
<img src='img/xmsj5.webp'>
</br>小米10S</br>
<span class='biankuang'>2999元起</span>
</div>
<div class='zangshitai'>
<img src='img/xmsj6.webp'>
</br>小米11</br>
<span>3799元起</span>
</div>
</div>
</div>
</li>
<!--Redmi 红米-->
<li class='zangshi'>
<a href=''>Redmi 红米</a>
<div class='zangshilist'>
<div class='zangshiqu'>
<div class='zangshitai'>
<img src='img/hmsj1.webp'>
</br>Redmi Note 10 Pro</br>
<span class='biankuang'>1699元起</span>
</div>
<div class='zangshitai'>
<img src='img/hmsj2.webp'>
</br>Redmi Note 10 5G</br>
<span class='biankuang'>1099元起</span>
</div>
<div class='zangshitai'>
<img src='img/hmsj3.webp'>
</br>K40 游戏增强版</br>
<span class='biankuang'>1999元起</span>
</div>
<div class='zangshitai'>
<img src='img/hmsj4.webp'>
</br>K40 Pro</br>
<span class='biankuang'>2799元起</span>
</div>
<div class='zangshitai'>
<img src='img/hmsj5.webp'>
</br>Redmi K40</br>
<span class='biankuang'>1999元起</span>
</div>
<div class='zangshitai'>
<img src='img/hmsj6.webp'>
</br>Redmi Note 9 4G</br>
<span>999元起</span>
</div>
</div>
</div>
</li>
<!--电脑-->
<li class='zangshi'>
<a href=''>电视</a>
<div class='zangshilist'>
<div class='zangshiqu'>
<div class='zangshitai'>
<img src='img/dn1.webp'>
</br>小米电视6 至尊版 55英寸</br>
<span class='biankuang'>5999元起</span>
</div>
<div class='zangshitai'>
<img src='img/dn2.webp'>
</br>小米电视 ES55 2022款</br>
<span class='biankuang'>3399元起</span>
</div>
<div class='zangshitai'>
<img src='img/dn3.webp'>
</br>小米电视大师 82英寸</br>
<span class='biankuang'>11999元起</span>
</div>
<div class='zangshitai'>
<img src='img/dn4.webp'>
</br>小米透明电视</br>
<span class='biankuang'>49999元起</span>
</div>
<div class='zangshitai'>
<img src='img/dn5.webp'>
</br>小米电视大师 65英寸OLED</br>
<span class='biankuang'>10999元起</span>
</div>
<div class='zangshitai'>
<img src='img/dn6.webp'>
</br>Redmi 智能电视 MAX 98</br>
<span>19999元起</span>
</div>
</div>
</div>
</li>
<!--笔记本-->
<li class='zangshi'>
<a href=''>笔记本</a>
<div class='zangshilist'>
<div class='zangshiqu'>
<div class='zangshitai'>
<img src='img/bjb1.webp'>
</br>小米笔记本 Pro X 15</br>
<span class='biankuang'>8499元起</span>
</div>
<div class='zangshitai'>
<img src='img/bjb2.webp'>
</br>Redmibook Pro 14 锐龙版</br>
<span class='biankuang'>4499元起</span>
</div>
<div class='zangshitai'>
<img src='img/bjb3.webp'>
</br>Redmibook Pro 15 锐龙版</br>
<span class='biankuang'>4999元起</span>
</div>
<div class='zangshitai'>
<img src='img/bjb4.webp'>
</br>小米笔记本 Pro 15 锐龙版</br>
<span class='biankuang'>6799元起</span>
</div>
<div class='zangshitai'>
<img src='img/bjb5.webp'>
</br>小米笔记本 Pro 15</br>
<span class='biankuang'>6499元起</span>
</div>
<div class='zangshitai'>
<img src='img/bjb6.webp'>
</br>RedmiBook Pro 14</br>
<span>4499元起</span>
</div>
</div>
</div>
</li>
<!--家电-->
<li class='zangshi'>
<a href=''>家电</a>
<div class='zangshilist'>
<div class='zangshiqu'>
<div class='zangshitai'>
<img src='img/jd1.webp'>
</br>米家风冷对开门冰箱 483L</br>
<span class='biankuang'>2399元起</span>
</div>
<div class='zangshitai'>
<img src='img/jd2.webp'>
</br>米家扫地机器人1T</br>
<span class='biankuang'>1999元起</span>
</div>
<div class='zangshitai'>
<img src='img/jd3.png'>
</br>米家互联网洗烘一体机10kg</br>
<span class='biankuang'>1799元起</span>
</div>
<div class='zangshitai'>
<img src='img/jd4.webp'>
</br>小米净水器S1 800G</br>
<span class='biankuang'>2199元起</span>
</div>
<div class='zangshitai'>
<img src='img/jd5.webp'>
</br>米家空气净化器3 高效除菌</br>
<span class='biankuang'>749元起</span>
</div>
<div class='zangshitai'>
<img src='img/jd6.jpg'>
</br>Redmi全自动波轮洗衣机1A</br>
<span>749元起</span>
</div>
</div>
</div>
</li>
<!--路由器-->
<li class='zangshi'>
<a href=''>路由器</a>
<div class='zangshilist'>
<div class='zangshiqu'>
<div class='zangshitai'>
<img src='img/lyq1.webp'>
</br>小米路由器AX6000</br>
<span class='biankuang'>599元起</span>
</div>
<div class='zangshitai'>
<img src='img/lyq2.webp'>
</br>小米路由器AX9000</br>
<span class='biankuang'>1299元起</span>
</div>
<div class='zangshitai'>
<img src='img/lyq3.webp'>
</br>小米AloT路由器AX3600</br>
<span class='biankuang'>499元起</span>
</div>
<div class='zangshitai'>
<img src='img/lyq4.webp'>
</br>Redmi路由器AC2100</br>
<span class='biankuang'>169元起</span>
</div>
<div class='zangshitai'>
<img src='img/lyq5.jpg'>
</br>小米路由器 Mesh</br>
<span class='biankuang'>999元起</span>
</div>
<div class='zangshitai'>
<img src='img/lyq6.jpg'>
</br>小米路由器4A 千兆版</br>
<span>119元起</span>
</div>
</div>
</div>
</li>
<!--智能硬件-->
<li class='zangshi'>
<a href=''>智能硬件</a>
<div class='zangshilist'>
<div class='zangshiqu'>
<div class='zangshitai'>
<img src='img/znyj1.webp'>
</br>小米全自动智能门锁</br>
<span class='biankuang'>1799元起</span>
</div>
<div class='zangshitai'>
<img src='img/znyj2.webp'>
</br>Redmi小爱触屏音箱Pro8</br>
<span class='biankuang'>599元起</span>
</div>
<div class='zangshitai'>
<img src='img/znyj3.jpg'>
</br>小米小爱触屏音箱</br>
<span class='biankuang'>249元起</span>
</div>
<div class='zangshitai'>
<img src='img/znyj4.webp'>
</br>Redmi小爱音箱 Play</br>
<span class='biankuang'>89元起</span>
</div>
<div class='zangshitai'>
<img src='img/znyj5.webp'>
</br>查看全部</br>
智能硬件
</div>
</div>
</div>
</li>
</ul>
</div>
<ul>
<li><a href=''>服务</a></li>
<li><a href=''>社区</a></li>
</ul>
</div>
<form class='sousuolan' action=''>
<input class='ssl1' type='search'>
<div class='sousuotuan'>
<input class='ssl2' type='submit' value=''>
<i class='fas fa-search'></i>
</div>
</form>
</div>
</div>
</div>
<div class='lunbotu'>
<div class='lunbodaohang'>
<div>
<a href=''>手机 电话卡</a>
<span>></span>
</div>
<div>
<a href=''>电视 盒子</a>
<span>></span>
</div>
<div>
<a href=''>笔记本 显示器</a>
<span>></span>
</div>
<div>
<a href=''>家电 插线板</a>
<span>></span>
</div>
<div>
<a href=''>出行 穿戴</a>
<span>></span>
</div>
<div>
<a href=''>智能 路由器</a>
<span>></span>
</div>
<div>
<a href=''>电源 配件</a>
<span>></span>
</div>
<div>
<a href=''>健康 儿童</a>
<span>></span>
</div>
<div>
<a href=''>耳机 音箱</a>
<span>></span>
</div>
<div>
<a href=''>生活 箱包</a>
<span>></span>
</div>
</div>
</div>
<div class='generalsantu'>
<div class='generalyewu'>
<a href=''>
<div class='yewu'>
<img class='tubiao' src='img/santu_1_1.png'>
小米秒杀
</div>
</a>
<a href=''>
<div class='yewu'>
<img class='tubiao' src='img/santu_1_2.png'>
企业团购
</div>
</a>
<a href=''>
<div class='yewu'>
<img class='tubiao' src='img/santu_1_3.png'>
F码通道
</div>
</a>
<a href=''>
<div class='yewu'>
<img class='tubiao' src='img/santu_1_4.png'>
米粉卡
</div>
</a>
<a href=''>
<div class='yewu'>
<img class='tubiao' src='img/santu_1_5.png'>
以旧换新
</div>
</a>
<a href=''>
<div class='yewu'>
<img class='tubiao' src='img/santu_1_6.png'>
话费充值
</div>
</a>
</div>
<div class='santu'>
<a href=''>
<img class='ph' src='img/santu_2.jpg'>
</a>
</div>
<div class='santu'>
<a href=''>
<img class='ph' src='img/santu_3.jpg'>
</a>
</div>
<div class='santu'>
<a href=''>
<img class='ph' src='img/santu_4.png'>
</a>
</div>
</div>
<div class='changtu'>
<a href=''>
<img src='img/changtu.webp'>
</a>
</div>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
57
0- 0
已为社区贡献2条内容
所有评论(0)