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

用vscode仿制小米官网

news 2025/7/5 17:47:08

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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制一、引言二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/6/27 2:57:24

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素文章来源： http://raspberry.dns8844.cn/documentation 原文网址使用 rpicam-app 通过网络流式传输视频本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

React Native 导航系统实战（React Navigation）

导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...

编程新知 2025/6/21 7:48:44

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。同样的技术也是 Power BI 数据…...

编程新知 2025/7/4 9:18:34

线程同步：确保多线程程序的安全与高效！

全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块第三部分&#xff…...

编程新知 2025/6/17 15:52:48

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/7/5 10:00:47

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。跨国回收网络：废料变黄金的全球棋局艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...

编程新知 2025/7/3 20:57:29

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...

编程新知 2025/7/5 15:11:11

12.找到字符串中所有字母异位词

🧠 题目解析题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。返回的答案以数组形式表示。字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...

编程新知 2025/7/5 5:31:34

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录一、目的二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结一、目的当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/7/4 11:56:13

html内容:

css内容:

结果呈现:

相关文章：