当前位置：首页 > news >正文

用vscode仿制小米官网

news 2026/5/12 2:12:47

html内容:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./08-index.css"><link rel="stylesheet" href="../作业/download/font_4488556_kzk9knke5t/iconfont.css"></head>
<body><div class="header"><div class="content"><div class="header-left"><a href="#">小米官网</a><span class="sep">|</span><a href="#">小米商城</a><span class="sep">|</span><a href="#">小米澎湃OS</a><span class="sep">|</span><a href="#">loT</a><span class="sep">|</span><a href="#">云服务</a><span class="sep">|</span><a href="#">天星数科</a><span class="sep">|</span><a href="#">有品</a><span class="sep">|</span><a href="#">小爱开放平台</a><span class="sep">|</span><a href="#">资质证照</a><span class="sep">|</span><a href="#">协议规则</a><span class="sep">|</span><a href="#">下载app</a><span class="sep">|</span><a href="#">Select Location</a></div><div class="header-right"><a href="#"class="sep">登录</a><span class="sep">|</span><a href="#"class="sep">注册</a><span class="sep">|</span><a href="#"class="sep">信息通知</a><span class="sep">|</span><span class="iconfont icon-gouwuchekong"></span><a href="#"class="shopping">购物车</a></div></div></div><div class="top-nav"><div class="content"><div class="top-nav-left"></div><div class="top-nav-mid"><ul><li><a href="#">Xiaomi手机</a></li><li><a href="#">Redmi手机</a></li><li><a href="#">电视</a></li><li><a href="#">笔记本</a></li><li><a href="#">平板</a></li><li><a href="#">家电</a></li><li><a href="#">路由器</a></li><li><a href="#">服务中心</a></li><li><a href="#">社区</a></li></ul></div><div class="top-nav-right"><form action="#"><input type="text"><span class="iconfont icon-sousuo"></span></form></div></div></div><div class="top-mid"><div class="content"><div class="top-mid-left"><ul><li><a href="#"class="title">手机      ></a></li><li><a href="#"class="title">电视      ></a></li><li><a href="#"class="title">家电      ></a></li><li><a href="#"class="title">笔记本平板 ></a></li><li><a href="#"class="title">出行 穿戴 ></a></li><li><a href="#"class="title">耳机 音箱 ></a></li><li><a href="#"class="title">健康 儿童 ></a></li><li><a href="#"class="title">生活 箱包 ></a></li><li><a href="#"class="title">智能路由器 ></a></li><li><a href="#"class="title">电源配件 ></a></li></ul></div><div class="top-mid-right" style="transition-duration: 1s ;"><div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div><div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div><div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div><div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div><div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div><div class="top-mid-right-yuan" style="transition-duration: 800ms ;"></div></div></div>    </div><div class="top-bottom"><div class="content"><ul class="top-bottom-left"><li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"width="24px"height="24px">保障服务</a></li><li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"width="24px"height="24px">企业团购</a></li><li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48"width="24px"height="24px">F码通道</a></li><li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48"width="24px"height="24px">米粉卡</a></li><li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"width="24px"height="24px">以旧换新</a></li><li><a href="#"class="other"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"width="24px"height="24px">话费充值</a></li></ul><div class="top-bottom-right1"></div><div class="top-bottom-right2"></div><div class="top-bottom-right3"></div></div></div>
</div>  </body>
</html>

css内容:

*{margin: 0;padding: 0;box-sizing: border-box;}
li{list-style: none;
}
a{text-decoration: none;
}
.content{width: 1226;margin: 0 auto;}
/* header开始 */
.header{height: 40px;background-color: #333;color: #b0b0b0;font-size: 12px;overflow: hidden;
}
.header-left{width: 769px;height: 40px;}
.header-right{width: 200px;height: 40px;}
.header .content{display: flex;justify-content:space-evenly
}
.header .content a{font-size: 12px;color: #b0b0b0;line-height: 40px;
}
.header-left .sep{margin: 0 ;
}
.header .shopping{margin-left: 0px;}
/* header结束 */
/* top-nav开始 */
.top-nav{height: 100px;overflow: hidden;}
.top-nav .content {display: flex;justify-content: space-evenly;
}
.top-nav-left{background: url("https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png") no-repeat;width: 56px;height: 56px;background-size: 56px;margin-top: 20px;
}
.top-nav-mid ul{display: flex;justify-content: space-between;width: 700px;height: 100px;line-height: 100px;
}
.top-nav-mid ul a{color: #333;
}
.top-nav-mid ul a:hover{color: chocolate;
}
.top-nav-right {padding-top: 25px;width: 296px;height: 100px;line-height: 100px;
}
.top-nav-right form {position: relative;width: 296px;height: 50px;}
.top-nav-right input{position: absolute;left: 0;top: 0;width: 245px;height: 50px;vertical-align: middle;outline: none;}
.top-nav-right span{display: inline-block;position: absolute;right: 0;top: 0;width: 52px;height: 50px;line-height: 50px;border: 1px solid black;text-align: center;font-size: 24px;}
/* top-nav 结束*/
.a{height: 100px;
}
/* top-mid */
.top-mid{width: 1226px;height: 420px;margin: 0 auto;
}
.top-mid .content {display: flex;justify-content: space-evenly;
}
.top-mid-left{background-color: #B0B0B0;width: 234px;height: 420px;position: relative;
}
.top-mid .title{width: 234px;height: 42px;text-decoration:none;color: aliceblue;padding: 0px 0px 0px 30px;display: flex;flex-direction: column;
}
.top-mid-left ul a {color: #f0f8ff;
}
.top-mid-right{width: 992px;height: 420px;background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/079f2eab16fdcb6132f7f58ffcf24b0a.jpg?thumb=1&w=1839&h=690&f=webp&q=90);background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6ddaa05fc2385ded9081a56dfb20ae0d.jpg?thumb=1&w=1839&h=690&f=webp&q=90);background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aad6b7322cba5a5c13ee316610711fdc.jpg?thumb=1&w=1839&h=690&f=webp&q=90);background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/802443805243d8505730c204a391bf0a.jpg?thumb=1&w=1839&h=690&f=webp&q=90);background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/daa8668ce81bc05a5b8a6ef05072047d.jpg?w=2452&h=920);background-size: cover;}
.top-mid-right-yuan{width: 10px;height: 10px;border-radius: 100px;display: inline-block;position: relative;left: 900px;top: 400px;background-color: #B0B0B0;
}
/* top-bottom */
.top-bottom{width: 1240px;height: 170px;margin: 0 auto;
}
.top-bottom .content {display: flex;justify-content: space-evenly;
}
.top-bottom-left{display: inline-block;background-color: #5f5750;width: 234px;height: 170px;font-display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-evenly;
}
/* .top-bottom ul{width: 76px;height: 82px;padding: 0 3px;display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-evenly;} */
.top-bottom .other{width: 70px;height: 64px;color: aliceblue;padding: 18px 0px 0px ;list-style: none;
}
.top-bottom-right1{width: 316px;height: 170px;background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340);background-size: cover;
}
.top-bottom-right2{width: 316px;height: 170px;background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dede2520f8dfff9c9b690af498cafe8.jpg?w=632&h=340);background-size: cover;
}
.top-bottom-right3{width: 316px;height: 170px;background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340);background-size: cover;
}

结果呈现:

用vscode仿制小米官网

html内容: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><link rel&quo…...

编程日记 2024/4/7 17:16:59

【Java+Springboot】------ 通过JDBC+GetMapping方法进行数据select查询、多种方式传参、最简单的基本示例!

一、JDBC如何使用、PostGresql数据库 1、在pom.xml 先引用jdbc组件。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency> 2、在pom.xml 再引用p…...

编程日记 2024/4/7 17:15:58

基于单片机光伏太阳能跟踪系统设计

**单片机设计介绍，基于单片机光伏太阳能跟踪系统设计文章目录一概要二、功能设计三、软件设计原理图五、程序六、文章目录一概要基于单片机光伏太阳能跟踪系统的设计，旨在通过单片机技术实现对光伏太阳能设备的自动跟踪，以提高太阳…...

编程日记 2024/4/7 17:14:56

Stable Diffusion 本地化部署

一、前言最近在家背八股文背诵得快吐了，烦闷的时候，看到使用 AI 进行作图，可以使用本地话部署。刚好自己家里的电脑，之前买来玩暗黑4，配置相对来说来可以，就拿来试试。此篇是按照 Github 上的 stable-d…...

编程日记 2024/4/7 17:11:54

C++ Algorithm 常用算法

C <algorithm> 头文件是标准库中提供的一系列算法，用于操作范围（range）内的元素。这些算法可以用于数组、容器如vector和list，以及其他满足相应迭代器要求的数据结构。以下是一些常用的C <algorithm> 中的算法及其使用…...

编程日记 2024/4/7 17:09:51

线程安全--深入探究线程等待机制和死锁问题

꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好，我是xiaoxie.希望你看完之后,有不足之处请多多谅解，让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如需转…...

编程日记 2024/4/7 17:08:50

量子计算获重大突破！微软和Quantinuum将量子计算错误率降低800倍，网友：AI算力的希望

量子计算迎来新突破。近日，微软和量子计算公司Quantinuum宣布：发现了一种新的量子计算系统，可以将传统量子计算的错误率下降800倍，这让高性能量子计算机走进现实更近了一步。自生成式AI爆发以来，算力是AI发展面临的…...

编程日记 2024/4/7 17:01:43

WordPress 6.5 “里贾纳”已经发布

WordPress 6.5 “里贾纳”已经发布，其灵感来自著名爵士小提琴家Regina Carter的多才多艺。雷吉娜是一位屡获殊荣的艺术家和著名的爵士乐教育家，以超越流派而闻名，她在古典音乐方面的技术基础和对爵士乐的深刻理解为她赢得了大胆超越小提琴所能…...

编程日记 2024/4/7 17:00:42

甲方安全建设之日志采集实操干货

前言没有永远的安全，如何在被攻击的情况下，快速响应和快速溯源分析攻击动作是个重要的话题。想要分析攻击者做了什么、怎么攻击进来的、还攻击了谁，那么日志是必不可少的一项，因此我们需要尽可能采集多的日志来进行分析攻击者的…...

编程日记 2024/4/7 16:58:39

dm8 开启归档模式 1 命令行 [dmdbatest1 dm8]$ disql sysdba/Dameng123localhost:5237服务器[localhost:5237]:处于普通打开状态登录使用时间 : 3.198(ms) disql V8 SQL> select name,status$,arch_mode from v$database;行号 NAME STATUS$ ARCH_MODE ----------…...

编程日记 2024/4/7 16:55:36

“AI复活”背后的数字永生：被期待成为下一个电商，培育市场认知和用户心智还需时间

“AI复活”背后的数字永生：被期待成为下一个电商，培育市场认知和用户心智还需时间© 由九派新闻提供数字永生，还是电子宠物？过去一个月，因包小柏用AI技术让爱女在数字世界“复活”一事，《流浪地球2…...

编程日记 2024/4/7 16:54:34

基于单片机钢琴电子节拍器系统设计

**单片机设计介绍，基于单片机钢琴电子节拍器系统设计文章目录一概要二、功能设计三、软件设计原理图五、程序六、文章目录一概要基于单片机钢琴电子节拍器系统设计是一个综合性的项目，它结合了单片机编程、音频处理、用户界面设计等多个领域的…...

编程日记 2024/4/7 16:52:32

我的创作纪念日（year Ⅱ）

大家好，我是Kamen Black 君，今天我与大家简单分享一下我两年来在CSDN的创作历程。 print("祝大家每天快乐，love and peace！") 机缘当初写博客是为了记录一些自己大学中做比赛的心得，没想到自己能走到这一步…...

编程日记 2024/4/7 16:49:29

应急响应实战笔记05Linux实战篇（1）

第1篇：SSH暴力破解 0x00 前言 SSH 是目前较可靠，专为远程登录会话和其他网络服务提供安全性的协议，主要用于给远程登录会话数据进行加密，保证数据传输的安全。SSH口令长度太短或者复杂度不够，如仅包含数字&#x…...

编程日记 2024/4/7 16:48:28

重装系统之后，电脑连网卡都没反应怎么办？

前言有些电脑比较奇葩，安装完成之后会出现网卡连驱动都没有，这时候要安装电脑驱动可是真的烦躁。怎么下手呢？ 如果确定电脑的网卡型号还好，直接找个电脑下载个对应的网卡驱动，用U盘复制过去就能安装。但如果不知道…...

编程日记 2024/4/7 16:47:26

【三十五】【算法分析与设计】综合练习（2），22。括号生成，77。组合，494。目标和，模拟树递归，临时变量自动维护树定义，递归回溯，非树结构模拟树

22. 括号生成数字 n 代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且有效的括号组合。示例 1： 输入：n 3 输出：["（（（））&#xff0…...

编程日记 2024/4/7 16:46:25

QT智能指针

一.概述 Qt智能指针是一种能够在不需要手动管理内存的情况下，自动释放资源的指针。它们是C11的std::shared_ptr的一种扩展，可以用于管理Qt对象，尤其是那些不是QObject的对象。使用智能指针可以避免内存泄露和悬垂指针等问题，同时…...

编程日记 2024/4/7 16:45:24

C++笔记之pkg-config详解，以及g++、gcc编译时使用pkg-config

C++笔记之pkg-config详解，以及g++、gcc编译时使用pkg-config —— 2024-04-05 code review 文章目录 C++笔记之pkg-config详解，以及g++、gcc编译时使用pkg-config1.pkg-config详解`pkg-config` 的基本用法在 `g++`/`gcc` 编译时使用 `pkg-config`注意事项2.示例C++，普通编译…...

编程日记 2024/4/7 16:41:20

[Apple Vision Pro]开源项目 Beautiful Things App Template

1. 技术框架概述： - Beautiful Things App Template是一个为visionOS设计的免费开源软件（FOSS），用于展示3D模型画廊。 2. 定位： - 该模板作为Beautiful Things网站的延伸，旨在为Apple Vision Pro用户…...

编程日记 2024/4/7 16:39:17

Qt Remote Objects (QtRO) 笔记

简介 Qt Remote Objects (QtRO) 是 Qt 的一个进程间通信模块。术语 Source 是指提供服务或提供功能供其他程序使用的对象，是 RPC 中的被调用端。 Replica 是指 Source 对象的代理对象，用于 RPC 中的调用端，对 Replica 的调用请求将被转发…...

编程日记 2024/4/7 16:35:13

基于Vue 3与Express的私有化ChatGPT Web客户端部署指南

1. 项目概述与核心价值最近在折腾一个自用的AI对话工具，核心需求很简单：想在一个自己完全掌控的界面上，方便地使用大语言模型，比如ChatGPT的API。市面上虽然有很多现成的网页应用，但要么功能太臃肿，要么部署…...

编程新知 2026/5/12 1:37:51

从“鸡尾酒会”到手机通话：用生活场景图解CDMA码分多址到底是怎么“听清”你的

鸡尾酒会里的通信密码：用生活场景拆解CDMA如何从噪音中识别你的声音 1. 当鸡尾酒会遇见通信技术想象你站在一个嘈杂的鸡尾酒会现场，四周充斥着数十人同时进行的对话。神奇的是，尽管声波在空气中混杂叠加，你的大脑却能自动过滤无关…...

编程新知 2026/5/11 23:43:12

大核小核架构的演进：从DVFS到异构计算，应对先进制程挑战

1. 项目概述：大核小核架构的十字路口在移动计算和嵌入式领域，ARM的“大核小核”（big.LITTLE）架构在过去十年里几乎成了高性能低功耗的代名词。从智能手机到平板电脑，再到如今的物联网边缘设备，这套将高性能…...

编程新知 2026/5/11 22:49:48

知网AI率30%50%80%哪个最难降？比话降AI知网专精方案！

知网AI率30%50%80%哪个最难降？比话降AI知网专精方案！ 很多硕博毕业生有个直觉：知网 AI 率 80% 比 30% 难降很多。这个直觉只对了一半。真相是：难度不是看数字高低，是看「工具的技术路线对不对知网的算法」。一篇 80% …...

编程新知 2026/5/11 21:51:53

C++ 知识点22 函数模板

C 函数模板一、为什么要有函数模板？先看痛点：你要写两个交换函数，int 版、double 版：// int 交换 void swapInt(int &a, int &b) {int t a; a b; b t; } // double 交换 void swapDouble(double &a, double &b…...

编程新知 2026/5/11 21:14:51

降AI提示词大全！10个prompt让AI输出人类味+嘎嘎降AI兜底！

降AI提示词大全！10个prompt让AI输出人类味嘎嘎降AI兜底！ 用 ChatGPT、DeepSeek、Kimi、豆包写论文最大的痛是：写得快但被检测判 AI、改起来比自己写还累。其实在写作环节就能预防一部分 AI 痕迹，靠的是会写降 AI 提示词。这篇先给…...

编程新知 2026/5/11 19:24:35

别再只调API了！微信支付Native/JSAPI开发中，订单号生成与回调处理的5个实战避坑点

微信支付开发实战：订单与回调的五个关键陷阱与解决方案在移动支付领域，微信支付作为主流平台之一，其开发文档看似详尽，但实际落地时仍存在诸多"暗坑"。许多开发者过度关注支付接口调用本身，却忽视了订单生成…...

编程新知 2026/5/11 18:27:03

从课堂到代码：三大数学可视化工具实战解析

1. 数学可视化工具的选择困境第一次接触数学可视化工具时，我被各种选项搞得眼花缭乱。作为数学老师，我需要一个能让学生快速上手的工具；作为编程爱好者，我又希望它能支持更复杂的算法可视化。经过多年实践，我发现Desm…...

编程新知 2026/5/11 16:43:10

MySQL 如何正确实现“随机采样”

在开发英语学习或社交应用时，随机展示单词或消息是一个高频需求。然而，看似简单的“随机”逻辑，如果实现方式不当，会随着数据量的增长演变为系统瓶颈。 1. 性能陷阱：order by rand() 最直观的写法是 select word from…...

编程新知 2026/5/11 15:59:50

NVIDIA Profile Inspector 5步优化指南：解锁显卡隐藏性能

NVIDIA Profile Inspector 5步优化指南：解锁显卡隐藏性能【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector NVIDIA Profile Inspector 是一款强大的显卡驱动配置工具，能够访问 NVI…...

编程新知 2026/5/11 14:22:47

html内容:

css内容:

结果呈现:

相关文章：