WEB前端 开始学习 7.4
·
1.今天老师带写了小米官网，让我找到了许多自己的不足，同时也解决了许多问题，但我依然有点不理解的，感觉一周的第一天有点走神，后面几天找回状态吧。
2.现在写东西有点反应不过来的感觉，是知识点没复习的原因吧，每周总要花点时间复习一下，还有经常自己写的东西自己看不懂的情况，还是理解太浅了。
3.后面只会越来越难，现在还不是说难的时候，在后面的学习要尽可能吃透，不然只会越来越不容易。
<!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>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD，小米电视官方网站</title>
<link rel="icon" href="./img/favicon.ico" type="image/x-icon" />
<!-- 引入重制样式表 -->
<link rel="stylesheet" href="./css/reset.css" />
<!-- 引入公共的样式 -->
<link rel="stylesheet" href="./css/base.css" />
<!-- 引入主体样式 -->
<link rel="stylesheet" href="./css/index.css" />
<!-- 引入图标字体的样式 -->
<link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css" />
<!-- 引入轮播插件 -->
<link rel="stylesheet" href="./js/swiper-master 2/package/swiper-bundle.min.css" />
<!-- 引入轮播插件js -->
<script src="./js/swiper-master 2/package/swiper-bundle.min.js"></script>
</head>
<body>
<header>
<div id="top-bar-warp">
<div class="top-bar w">
<ul class="top-bar-left">
<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="#" class="app-a"
>下载app
<div class="app-wrap">
<div class="QRcode">
<img src="./img/download.png" alt="" />
<p>小米商城app</p>
</div>
</div>
</a>
</li>
<li class="line">｜</li>
<li><a href="#">Select Location</a></li>
</ul>
<ol class="top-bar-right">
<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>
</ol>
</div>
</div>
<!-- 快速导航区 -->
<nav id="fast-nav-wrap">
<ul class="w fast-nav">
<li class="nav-left">
<a href="#">
<img src="./img/logo-mi2.png" alt="" />
</a>
</li>
<li class="nav-center">
<div class="allshop">
<a href="#">全部商品分类</a>
</div>
<div><a href="#">Xiaomi手机</a></div>
<div><a href="#">Redmi红米</a></div>
<div><a href="#">电视</a></div>
<div><a href="#">笔记本</a></div>
<div><a href="#">平板</a></div>
<div><a href="#">家电</a></div>
<div><a href="#">路由器</a></div>
<div><a href="#">服务中心</a></div>
<div><a href="#">社区</a></div>
<!-- 设置一个弹出层 -->
<section class="popups"></section>
</li>
<li class="nav-right">
<form action="#">
<input type="text" />
<button>
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
</li>
</ul>
</nav>
</header>
<!-- 主体的内容 -->
<main>
<!-- nav-banner -->
<div class="w">
<!-- 左侧导航 -->
<div class="left-nav-warp">
<ol class="left-nav">
<li>
<a href="#">手机</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">电视</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">笔记本 平板</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">出行 穿戴</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">耳机 音响</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">家电</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">智能 路由器</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">电源 配件</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">健康 儿童</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
<li>
<a href="#">生活 箱包</a>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</li>
</ol>
</div>
<!-- banner -->
<div class="swiper">
<!-- 图片 -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#"><img src="./img/banner img/1.webp" alt="" /></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./img/banner img/2.webp" alt="" /></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./img/banner img/3.jpg" alt="" /></a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script>
var mySwiper = new Swiper(".swiper", {
autoplay: true, //设置自动循环播放
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, //配置点击切换效果
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
<!-- 广告区 -->
<ol class="adv w clearfix">
<li class="six-adv">
<div>
<a href="#">
<img src="./img/sub-nav-img/img1.png" alt="" />
<p>保障服务</p>
</a>
</div>
<div>
<a href="#">
<img src="./img/sub-nav-img/img2.png" alt="" />
<p>企业团购</p>
</a>
</div>
<div>
<a href="#">
<img src="./img/sub-nav-img/img3.png" alt="" />
<p>F码通道</p>
</a>
</div>
<div>
<a href="#">
<img src="./img/sub-nav-img/img4.png" alt="" />
<p>米粉卡</p>
</a>
</div>
<div>
<a href="#">
<img src="./img/sub-nav-img/img5.png" alt="" />
<p>以旧换新</p>
</a>
</div>
<div>
<a href="#">
<img src="./img/sub-nav-img/img6.png" alt="" />
<p>话费充值</p>
</a>
</div>
</li>
<li class="img-list">
<img src="./img/sub-nav-img/img2-1.jpg" alt="" />
<img src="./img/sub-nav-img/img2-2.jpg" alt="" class="img-center" />
<img src="./img/sub-nav-img/img2-3.png" alt="" />
</li>
</ol>
</main>
</body>
</html>
openvela 操作系统专为 AIoT 领域量身定制，以轻量化、标准兼容、安全性和高度可扩展性为核心特点。openvela 以其卓越的技术优势，已成为众多物联网设备和 AI 硬件的技术首选，涵盖了智能手表、运动手环、智能音箱、耳机、智能家居设备以及机器人等多个领域。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)