小米官网（前一部分）html

最新推荐文章于 2024-10-06 20:16:20 发布

get棒棒

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量386

点赞数 4

分类专栏： CSS HTML 文章标签： servlet java html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_67979925/article/details/126413419

版权

CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

这是一个小米官网的页面结构，包含头部导航栏，包括小米官网、小米商城、MIUI等链接，以及登录、注册和消息通知功能。页面中部是商品分类，如手机、电视、笔记本等，并有一个搜索框。底部有热门产品推荐和各类服务入口，如保障服务、企业团购等。页面右侧有一个轮播图展示区，可进行滑动切换。

摘要由CSDN通过智能技术生成

<body>

<header>

<nav>

<div class="zhongjian">

<ul class="s1">

<li>

<a href="#">小米官网</a>

</li>

<li>|</li>

<li>

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

</li>

<li>|</li>

<li>

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

</li>

<li>|</li>

<li>

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

</li>

<li>|</li>

<li>

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

</li>

<li>|</li>

<li>

<a href="#">天星科技</a>

</li>

<li>|</li>

<li>

<a href="#">有品</a>

</li>

<li>|</li>

<li>

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

</li>

<li>|</li>

<li>

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

</li>

<li>|</li>

<li>

<a href="#">资质证照</a>

</li>

<li>|</li>

<li>

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

</li>

<li>|</li>

<li class="a1">

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

<div id="s5"></div>

<div class="s7">

<img src="./download.png" alt="" height="100px"><br>

<span>小米商城app</span>

</div>

</li>

<li>|</li>

<li>

<a href="#">Select Location</a>

</li>

</ul>

<ul class="s2">

<li>

<a href="#">

登录

</a>

</li>

<li>|</li>

<li>

<a href="#">

注册

</a>

</li>

<li>|</li>

<li class=>

<a href="#">

消息通知

</a>

</li>

</ul>

<div class="s3">

<div class="s8">

<span class="iconfont icon-gouwuchekong"></span>

<span>购物车（0）</span>

</div>

<div class="s6">

<span>

购物车还没有商品,赶快选购吧！

</span>

</div>

</div>

</div>

</nav>

<div id="a1">

<div id="a5">

<div id="a2">

<a href="#" class="iconfont icon-icon-xiaomiguishu"></a>

</div>

<ul id="a3">

<li class="c2">

<a href="#">Xiaomi手机</a>

<div class="c1">

</div>

</li>

<li class="c2">

<a href="#">Redmi手机</a>

<div class="c1">

</div>

</li>

<li class="c2">

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

<div class="c1">

</div>

</li>

<li class="c2">

<a href="#">笔记本</a>

<div class="c1">

</div>

</li>

<li class="c2">

<a href="#">平板</a>

<div class="c1">

</div>

</li>

<li class="c2">

<a href="#">家电</a>

<div class="c1">

</div>

</li>

<li class="c2">

<a href="#">路由器</a>

<div class="c1">

</div>

</li>

<li>

<a href="#">服务中心</a>

</li>

<li>

<a href="#">社区</a>

</li>

</ul>

<div class="search" id="a4">

<input type="text" placeholder="点击搜索" id="a6" >

<span class="iconfont icon-sousuo"></span>

<div id="o1">

<p><a href="#">小米</a></p>

<p><a href="#">华为</a></p>

<p><a href="#">苹果</a></p>

<p><a href="#">vivo</a></p>

<p><a href="#">oppo</a></p>

</div>

</div>

</div>

</div>

</header>

<main class="d1">

<div class="d2">

<ul class="d3">

<li class="d4">

<a href="#">手机</a>

<span class="iconfont icon-right"></span>

<div></div>

</li>

<li>

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

<span class="iconfont icon-right"></span>

<div></div>

</li>

<li>

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

<span class="iconfont icon-right"></span>

</li>

<li>

<a href="#">出行穿戴</a>

<span class="iconfont icon-right"></span>

</li>

<li>

<a href="#">耳机音响</a>

<span class="iconfont icon-right"></span>

</li>

<li>

<a href="#">家电</a>

<span class="iconfont icon-right"></span>

</li>

<li>

<a href="#">智能路由器</a>

<span class="iconfont icon-right"></span>

</li>

<li>

<a href="#">电源配件</a>

<span class="iconfont icon-right"></span>

</li>

<li>

<a href="#">健康儿童</a>

<span class="iconfont icon-right"></span>

</li>

<li>

<a href="#">生活箱包</a>

<span class="iconfont icon-right"></span>

</li>

</ul>

</div>

<div class="swiper">

<div class="swiper-wrapper">

<div class="swiper-slide">

<img src="./cbe159245d840285e98a4ba213eecba2.webp" alt="">

</div>

<div class="swiper-slide">

<img src="./d5bcaeb5b2c0d8853a1f26036951364c.webp" alt="">

</div>

<div class="swiper-slide">

<img src="./d20d536690f6de775aefb113812122b3.webp" alt="">

</div>

<div class="swiper-slide">

<img src="./71139db54251442981e61cb1064152fc.jpg" alt="" height="540px">

</div>

</div>

<div class="swiper-pagination" id="p1"></div>

<div id="v1"> <div class="swiper-button-prev"></div></div>

<div class="swiper-button-next"></div>

</div>

<script language="javascript">

var mySwiper = new Swiper('.swiper',{

loop: true, // 循环模式选项

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

effect: 'fade',

pagination :{

el: '.swiper-pagination',

clickable :true,

}

})

//鼠标滑过pagination控制swiper切换

for(i=0;i<mySwiper.pagination.bullets.length;i++){

mySwiper.pagination.bullets[i].οnmοuseοver=function(){

this.click();

};

}

//如果你在swiper初始化后才决定使用clickable，可以这样设置

mySwiper.params.pagination.clickable = true ;

//此外还需要重新初始化pagination

mySwiper.pagination.destroy()

mySwiper.pagination.init()

mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');

</script>

</main>

<footer>

<div class="e2">

<div class="e1">

<ul>

<li class="f1 f2">

<a href="#">

<img src="./82abdba456e8caaea5848a0cddce03db.png" alt="" height="24px">

<p>保障服务</p>

</a>

</li>

<li class="f1 f2">

<a href="#">

<img src="./806f2dfb2d27978e33fe3815d3851fa3.png" alt="" height="24px">

<p>企业团购</p>

</a>

</li>

<li class="f1">

<a href="#">

<img src="./eded6fa3b897a058163e2485532c4f10.png" alt="" height="24px">

<p>F码通道</p>

</a>

</li>

<li class="f2">

<a href="#">

<img src="./43a3195efa6a3cc7662efed8e7abe8bf.png" alt="" height="24px">

<p>米粉卡</p>

</a>

</li>

<li class="f2">

<a href="#">

<img src="./f4846bca6010a0deb9f85464409862af.png" alt="" height="24px">

<p>以旧换新</p>

</a>

</li>

<li>

<a href="#">

<img src="./9a76d7636b08e0988efb4fc384ae497b.png" alt="" height="24px">

<p>花费充值</p>

</a>

</li>

</ul>

</div>

<ul class="g1">

<li class="g2">

<img src="./32a62196b9af47752c96e7a50c86417c.jpg" alt="" width="320px" height="170px">

</li>

<li class="g3">

<img src="./5668146e20fc025caa756a0f8a3c7da4.jpg" alt="" width="320px" height="170px">

</li>

<li class="g4">

<img src="./28c13d0d11b38ec17fa5d83bc6ba5912.jpg" alt="" width="320px" height="170px">

</li>

</ul>

</div>

</footer>

<ul class="m1">

<li>

<a href="#">

<span class="iconfont icon-shouji"></span>

<p>手机app</p>

</a>

</li>

<li>

<a href="#">

<span class="iconfont icon-icon03"></span>

<p>个人中心</p>

</a>

</li>

<li>

<a href="#">

<span class="iconfont icon-banshou"></span>

<p>售后服务</p>

</a>

</li>

<li>

<a href="#">

<span class="iconfont icon-kefu"></span>

<p>人工客服</p>

</a>

</li>

<li>

<a href="#">

<span class="icon-gouwuche"></span>

<p class="p1">购物车</p>

</a>

</li>

</ul>

</body>

</html>

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

get棒棒 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。