本文介绍了小米官网的顶部导航栏布局，包括登录/注册、消息通知等功能，以及特色轮播图组件的使用，展示了HTML、CSS和JavaScript在页面设计中的应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="./reset.css">
<!-- 引入index.css -->
<link rel="stylesheet" href="./index.css">
<!-- 引入图标字体 -->
<link rel="stylesheet" href="./font_3602039_r29zrsuk5jl/iconfont.css">
<link rel="stylesheet" href="./font_3602094_klxu5g00k5m/iconfont.css">
<!-- 轮播图两个插件的引入 -->
<!-- 引入轮播图swiper.css -->
<link rel="stylesheet" href="./轮播图swiperplug/swiper-bundle.css">
<!-- 引入轮播图swiper.js -->
<script src="./轮播图swiperplug/swiper-bundle.min.js"></script>
</head>
<body>
<header>
<!-- 顶部导航区 -->
<div class="top-bar-wrap">
<div class="top-bar w">
<!-- 顶部导航左侧 -->
<ul>
<li>
<a href="#">小米官网</a>
</li>
<li class="line">|</li>
<li>
<a href="#">小米商誉</a>
</li>
<li class="line">|</li>
<li>
<a href="#">MIUI</a>
</li>
<li class="line">|</li>
<li>
<a href="#">loT</a>
</li>
<li class="line">|</li>
<li>
<a href="#">云服务</a>
</li>
<li class="line">|</li>
<li>
<a href="#">天星数科</a>
</li>
<li class="line">|</li>
<li>
<a href="#">有品</a>
</li>
<li class="line">|</li>
<li>
<a href="#">小爱开放平台</a>
</li>
<li class="line">|</li>
<li>
<a href="#">企业团购</a>
</li>
<li class="line">|</li>
<li>
<a href="#">资质证照</a>
</li>
<li class="line">|</li>
<li>
<a href="#">协议规定</a>
</li>
<li class="line">|</li>
<li class="downloadapp1">
<a href="#">下载app</a>
<!-- 小米商誉二维码 -->
<i class="iconfont"></i>
<div class="QRcode1">
<img src="./img/download.png" alt="">
<p>小米商誉APP</p>
</div>
</li>
<li class="line">|</li>
<li>
<a href="#">Select Location</a>
</li>
<li class="line">|</li>
</ul>
<!-- 顶部导航右侧 -->
<ol>
<li>
<a href="#">登录</a>
</li>
<li class="line">|</li>
<li>
<a href="#">注册</a>
</li>
<li class="line">|</li>
<li>
<a href="#">消息通知</a>
</li>
<li class="shopcar">
<i class="iconfont"></i>
<a href="#">购物车(0)</a>
<div class="shoplist">
购物车中还没有商品,赶紧选购吧!
</div>
</li>
</ol>
</div>
</div>
<!-- 快速导航区 -->
<div class="fast-nav-wrap">
<div class="fast-nav w">
<!-- 小米logo区 -->
<h1>
<a href="#">
<img src="./img/小米logo2.0.png" alt="">
</a>
</h1>
<!-- 分类区 -->
<ul>
<li>
<a href="#" class="allshop">全部商品分类</a>
</li>
<li>
<a href="#">小米手机</a>
<div class="xiala"></div>
</li>
<li>
<a href="#">Redmi手机</a>
<div class="xiala"></div>
</li>
<li>
<a href="#">电视</a>
<div class="xiala"></div>
</li>
<li>
<a href="#">笔记本</a>
<div class="xiala"></div>
</li>
<li>
<a href="#">平板</a>
<div class="xiala"></div>
</li>
<li>
<a href="#">家电</a>
<div class="xiala"></div>
</li>
<li>
<a href="#">路由器</a>
<div class="xiala"></div>
</li>
<li>
<a href="#">服务中心</a>
</li>
<li>
<a href="#">社区</a>
</li>
</ul>
<!-- 搜索框的结构样式 -->
<div class="search">
<input type="text">
<button>
<i class="iconfont"></i>
</button>
</div>
</div>
</div>
</header>
<main>
<!-- 侧边导航 -->
<div class="banner w">
<ul class="left-nav">
<li>
<span>手机</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>电视</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>笔记本平板</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>出行 穿戴</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>耳机 音响</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>家电</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>智能 路由器</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>电源 配件</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>健康 儿童</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
<li>
<span>生活 箱包</span>
<i class="iconfont"></i>
<div class="cela"></div>
</li>
</ul>
<!--轮播图swiper结构书写 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/轮播图第一张.webp" alt=""></div>
<div class="swiper-slide"><img src="./img/轮播图第二张.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/轮播图第三张.webp" alt=""></div>
<div class="swiper-slide"><img src="./img/轮播图第四张.webp" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<script>
var mySwiper = new Swiper ('.swiper', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
</div>
</div>
<div class="AD-wrap">
<div class="AD w">
<ul>
<li>
<a href="#">
<img src="./img/1.png" alt="">
<p>保障服务</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/2.png" alt="">
<p>企业团购</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/3.png" alt="">
<p>F码通道</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/4.png" alt="">
<p>米粉卡</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/5.png" alt="">
<p>以旧换新</p>
</a>
</li>
<li>
<a href="#">
<img src="./img/6.png" alt="">
<p>话费充值</p>
</a>
</li>
</ul>
<!-- 三张广告图样式的书写 -->
<div>
<a href="#"><img src="./img/下三1.jpg" alt=""></a>
<a href="#"><img src="./img/下三2.jpg" alt=""></a>
<a href="#"><img src="./img/下三3.jpg" alt=""></a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer-nav-wrap">
<div class="footer-nav w">
<a href="#"><img src="./img/底部.webp" alt=""></a>
</div>
</div>
</footer>
<aside>
<div class="toolbar">
<ul>
<li>
<a href="#">
<i class="iconfont"></i>
<p>手机APP</p>
</a>
<div class="QRcode2">
<img src="./img/download.png" alt="">
<p>扫码领取新人百元礼包</p>
</div>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>个人中心</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>售后服务</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>人工服务</p>
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
<p>购物车</p>
</a>
</li>
</ul>
</div>
</aside>
</body>
</html>小米官网结构html的书写(样式css明天发)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
