基于swiper和Less的小米商城

---

前言

使用HTML5、CSS、JavaScript、swiper编程技术及less的相关知识，仿写小米商城官方网页，

---

一、环境搭建

安装vscode

1.登录vscode官网. 根据系统选择安装包下载，下载安装包后选择安装在D盘目录下或其他目录，完成即可。
2.安装好vscode后，首次使用需要下载相关插件如下：
——Auto Close Tag：自动添加HTML和XML的结束标语，编译代码起来更加方便
——Beautify：美化代码包括HTML、JS、CSS等
——Chinese：为vscode提供中文界面
——Easy-less：每次保存.less文件都会生成.css文件、可以嵌套的书写代码
——Open in Browser：右键HTML文件可以在默认的浏览器中打开
3.创建.html文件.css文件.js文件就可以编写我们的代码了

Easy-less的使用步骤：

1.创建一个.less的文件
2.复制一个.css文件作为备用（因为保存.less文件会自动删除.css文件里面的内容）
3.将.css文件里面的内容复制到.less文件中保存即可

下载Google浏览器：

登录Google 浏览器官网选择对应版本下载，下载后选择安装在D盘目录下或其他目录，完成即可。

二、部分代码展示

.HTML

代码如下（示例）：

<div class="wrap">
        <div class="main content">
            <div class="topmenu">
                <img src="./img/logo-mi2.png" class="logo" alt="">
                <ul>
                    <li>小米手机</li>
                    <li>Redmi红米</li>
                    <li>电视</li>
                    <li>笔记本</li>
                    <li>家电</li>
                    <li>路由器</li>
                    <li>智能硬件</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
                <div class="search"><input type="text"><i class="iconfont icon-search"></i></div>
            </div>
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/78.jpg" alt="">
                        </div&