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

用vscode仿制小米官网

news 2026/1/1 21:57:27

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

GitHub 趋势日报 (2025年06月08日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐：「storms…...

编程新知 2025/12/24 20:33:48

go 里面的指针

指针在 Go 中，指针（pointer）是一个变量的内存地址，就像 C 语言那样： a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10，通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/8/18 12:09:07

Canal环境搭建并实现和ES数据同步

作者：田超凡日期：2025年6月7日 Canal安装，启动端口11111、8082： 安装canal-deployer服务端： https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

编程新知 2025/12/31 16:07:05

深入理解 React 样式方案

React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有： 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中，均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观，适合动态样式和…...

编程新知 2025/11/1 6:38:03

【记录坑点问题】IDEA运行：maven-resources-production:XX: OOM: Java heap space

问题：IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案：将编译的堆内存增加一点位置：设置setting-》构建菜单build-》编译器Complier...

编程新知 2025/12/25 1:37:36

jieba实现和用RNN实现中文分词的区别

Jieba 分词和基于 RNN 的分词在技术路线、实现机制、性能特点上有显著差异，以下是核心对比： 1. 技术路线对比维度Jieba 分词RNN 神经网络分词范式传统 NLP（规则统计）深度学习（端到端学习）核心依赖词典…...

编程新知 2025/9/14 16:36:03

【汇编逆向系列】四、函数调用包含单个参数之Double类型-mmword，movsd，mulsd，addsd指令，总结汇编的数据类型

一、汇编代码上一节开始，讲到了很多debug编译独有的汇编方式，为了更好的区分release的编译器优化和debug的区别，从本章节开始将会提供debug和release的汇编用作对比 Debugb编译 single_double_param:00000000000000A0: F2 0F 11 44 24 08…...

编程新知 2025/12/27 18:33:38

人工智能学习09-变量作用域

人工智能学习概述—快手视频人工智能学习09-变量作用域—快手视频...

编程新知 2025/12/26 6:56:43

FMC STM32H7 SDRAM

如何无痛使用片外SDRAM? stm32 已经成功初始化了 STM32H7 上的外部 SDRAM（32MB） 如何在开发中无痛使用SDRAM 使它像普通 RAM 一样“自然地”使用? [todo] 重要 MMT(Memory Management Tool) of STM32CubeMx The Memory Management Tool (MMT) disp…...

编程新知 2026/1/1 3:39:32

html内容:

css内容:

结果呈现:

相关文章：