前端 ：用HTML和css制作一个小米官网的静态页面
1.HTML：
<body><div id = "content"><div id = "box"><div id ="top"><div id = "top-left"><span id = "logo">MI</span><span id = "text-logo">小米账号</span></div><div id = "top-right"><a class = "text1" href="#">用户协议</a><a class = "text1" href="#">隐私政策</a><a class = "text1" href="#">帮助中心</a><span class = "text1"> | </span><a class = "text1" href="#">(中文简体)</a></div></div><div id ="center"><div id = "menu"><div id = "menu-login"><span class ="menu-text" id ="id">登录</span><div id="line" class ="checked"></div></div><div id ="menu-regist"><span class ="menu-text" id = "regist">注册</span></div></div><input class = "input" id = "username" placeholder="邮箱/手机号/小米ID"/><br/><input class="input" id="password" type="password" placeholder="密码"/><div id="box-moren"><input type="checkbox"/><span id="moren">已阅读并同意小米账号用户协议和与隐私协议</span></div><span id="btn-login">登录</span><div id="other-login"><span class="other">忘记密码</span><span class="other" id="way-right">手机号登录</span></div><div id="otherway">其他方式登录</span><div id ="4img"><img src="img/1.jpg" class="image"/><img src="img/1.jpg" class="image"/><img src="img/1.jpg" class="image"/><img src="img/1.jpg" class="image"/></div></div><div id ="bottom">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</div></div></div></body>css代码：
<meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}#content{width: 100%;height: 100%;min-width: 1040px;min-height: 500px;background-color: #f2f2f2;position: relative;background-image: url("img/1.jpg");background-size:auto 100%;background-repeat: no-repeat;}#box{width:80% ;height: 100%;/* background-color: red; */position: absolute;top: 0;right: 0; }#top{width: 100%;height: 30px;/* padding-top: 20px; */}#top-left{width: 120px;height: 30px;position: relative;display: inline-block;padding: 5px;}#logo{background: rgba(255, 105, 0, 1);color: white;font-size: 25px;wargin-left:3px;bottom: 20px;text-align: center;line-height: 40px;font-weight: bold;border-radius: 3px;}#text-logo{font-size: 20px;left: 10px;font-weight: bold;coler:black;}#top-right{width: 400px;height: 30px;position: absolute;right: 0;display: inline-block;/* background-color: blue; */padding: 10px;}.text1{font-size:15px;color: gray;margin-left: 20px;text-decoration: none;}.text:hover{color: orangered;}#center{width: 41%;height: 500px;position: absolute;/* background-color: yellow; */left: 50%;margin-left: -22%;top: 130px;box-shadow: 0 0 10px gainsboro;}#menu{width: 34%;height: 40px;position: relative;}#menu-login{display: inline-block;width: 60px;height: 28px;font-size: 16px;text-align: center;position: relative;}.menu-text{margin-bottom: 10px;font-weight: 500;color: #333333;}.line{width: 30px;height: 3px;background-color: orangered;position: absolute;left: 50%;margin-left: -15px;bottom: 0;border-radius: 10px; }#menu-regist{display: inline-block;width: 60px;height: 28px;}#regist{color: gainsboro;}.input{width: 80%;display: block;margin: 20px auto;height: 30px;padding-left: 5px;border:0 solid red;background: #f1f1f1;outline: none;border-radius: 3px;}#box-moren{font-size: 12px;width: 80%;margin: 0 auto;}#moren{position: relative;font-size: 12px;top: -2px;}#btn-login{width: 80%;display: block;margin: 0px auto;background: rgba(255, 92, 0, 0.6);color: white;text-align: center;margin-top: 20px;height: 50px;line-height: 50px;border-radius: 5px;}#other-login{width: 80%;display: block;margin: 0px auto;font-size: 14px;color: orangered;position: relative;margin-top: 10px;}#way-right{position: absolute;right: 0;}#otherway{width: 100%;font-size: 15px;text-align: center;color: gray;margin-top: 15px;}#4img{width: 80%;display: block;margin: 0 auto;position: relative;margin-top: 20px;margin-bottom: 30px;}.image{width: 40px;height: 40px;border-radius: 50%;margin-left:20px ;}#bottom{width: 100%;height: 20px;position: absolute;font-size: 14px;/* background-color: green; */bottom: -130px;color: #bcbcbc;text-align: center;/* margin-left: -15%;bottom: 0px; */}</style>效果图：
小米官网图
相关文章：
前端 ：用HTML和css制作一个小米官网的静态页面
1.HTML： <body><div id "content"><div id "box"><div id "top"><div id "top-left"><span id "logo">MI</span><span id "text-logo">小米账…...
modelsim仿真报错：vlog-2388 ‘scl‘ already declared in this scope
问题背景： 1、使用vivado直接仿真的时候没有报错。 2、在vivado中调用modelsim的时候报错。 报错的代码： module iic_write(input clk,input rst,output scl,input en,inout sda);reg scl；……报错的意思是scl已经声明过了，mode…...
和EndInvoke()来实现异步)
C#中通过BeginInvoke()和EndInvoke()来实现异步
.NET Framework允许异步调用任何方法。定义与需要调用的方法具有相同签名的委托；公共语言运行库将自动为该委托定义具有适当签名的 BeginInvoke 和 EndInvoke 方法。以下介绍C#中，通过BeginInvoke()和EndInvoke()来实现异步。 1、异步编程 调用BeginInv…...
github中.gitignore不起作用啦
文章目录 前言两种方法解决清除本地缓存设置不需要 额外注意 前言 提示：人不是靠讲话来生活。每个人都应该靠行动。而行动，是需要时间来证明的。 --《自在独行》 两种方法解决 清除本地缓存 (.gitignore中已经表标明忽略的文件目录下的文件了…...
同步网盘推荐及挑选指南：便捷、安全、适用的选择
同步网盘是最近热门的文件协同工具之一，因其使用的便捷性受到了诸多用户的青睐。如今网盘市场产品众多，有什么好用的同步网盘？如何挑选同步网盘？是许多需求者关心的问题。 如何挑选同步网盘？在同步网盘挑选过程中要从…...
Java中的QName
javax.xml.namespace.QName代表XML规范中一个限定性名称（qualified name），它包含一个命名空间地址（Namespace URI）、一个本地部分、和一个前缀。QName可以用在xml的元素和属性中。 前缀提供了命名空间地址的前缀&#…...
汇编语言-div指令溢出问题
汇编语言-div指令溢出问题 8086CPU中被除数保存在ax(16位)或ax和dx（32位）中，如果被除数为16位，进行除法运算时al保存商，ah保存余数。如果被除数为32位时，进行除法运算时，ax保存商，d…...
koa搭建服务器（一）
最近有个需求需要使用到koa搭建服务器并编写接口对数据库进行增删改查，因此写一篇博客记录这段时间的收获。 一、新建koa项目 （一）安装koa及其相关依赖 npm i koa npm i koa-router// 中间件，用于匹配路由 npm i koa-bodyparse…...
qt-C++笔记之在两个标签页中按行读取两个不同的文件并且滚动条自适应滚动范围高度
qt-C笔记之在两个标签页中按行读取两个不同的文件并且滚动条自适应滚动范围高度 code review! 文章目录 qt-C笔记之在两个标签页中按行读取两个不同的文件并且滚动条自适应滚动范围高度1.运行2.文件结构3.main.cc4.main.pro5.a.txt6.b.txt7.上述代码中QVBoxLayout，…...
github搜索技巧探索
毕设涉及到推荐系统，那么就用搜索推荐系统相关资料来探索一下GitHub的搜搜技巧 文章目录 1. 基础搜索2. 限定在特定仓库搜索3. 按照语言搜索4. 按照star数量搜索5. 搜索特定用户/组织的仓库6. 查找特定文件或路径7. 按时间搜索8. 搜索不包含某个词的仓库9. 搜索特定…...
[ACTF2020 新生赛]Include
【解题思路】 1.打开链接 发现好东西，进一步分析。 2.分析页面 发现网页得到一个GET请求-->?fileflag.php 可以推断，要解答该题目需要获取 flag.php 的源代码. 将flag.php文件进行base64编码（将网页源代码转换为Base64编码ÿ…...
Go 实现插入排序算法及优化
插入排序 插入排序是一种简单的排序算法，以数组为例，我们可以把数组看成是多个数组组成。插入排序的基本思想是往前面已排好序的数组中插入一个元素，组成一个新的数组，此数组依然有序。光看文字可能不理解，让我们看看…...
--max30102 - 心率模块)
LuatOS-SOC接口文档(air780E)--max30102 - 心率模块
max30102.init(i2c_id,int)# 初始化MAX30102传感器 参数 传入值类型 解释 int 传感器所在的i2c总线id,默认为0 int int引脚 返回值 返回值类型 解释 bool 成功返回true, 否则返回nil或者false 例子 if max30102.init(0,pin.PC05) thenlog.info("max30102&q…...
设计模式(2)-创建型模式
1，创建型模式 4.1 单例设计模式 单例模式（Singleton Pattern）是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类，该类负责创建自己…...
elasticsearch一些重要的配置参数
先看一下官网给我们提供的全部的参数配置项 官网地址 官方文档链接：注意版本是8.1Configuring Elasticsearch | Elasticsearch Guide [8.1] | Elastic编辑https://www.elastic.co/guide/en/elasticsearch/reference/current/settings.html 重要（基本…...
raft和zab算法的区别
首先，二者都是通过选举一个 Leader 来简化复杂度，后续的工作都是由 Leader 来做。 投票的时候，二者都需要定义一个轮次 Raft 定义了 term 来表示选举轮次 ZooKeeper 定义了 electionEpoch 来表示 同步数据的时候，都希望选举出来…...
Arthas生成火焰图命令报错汇总
操作步骤 1、在容器中集成了arthas诊断和调试工具，想生产火焰图，执行profiler start，报错 如下： [arthas1]$ profiler start AsyncProfiler error: Can not find libasyncProfiler so, please check the arthas directory. 2、…...
【PyQt学习篇 · ⑤】：QWidget - 鼠标操作
文章目录 鼠标形状设置常用鼠标形状设置自定义鼠标形状 重置形状获取鼠标鼠标跟踪鼠标跟踪案例 鼠标形状设置 常用鼠标形状设置 在PyQt中，QWidget类提供了设置鼠标形状的功能。可以使用setCursor()方法来更改QWidget及其子类的鼠标形状。该方法接受一个Qt.CursorS…...
2-多媒体数据压缩国际标准-Part3
文章目录 视频压缩的国际标准MPEG-1&MPEG-2/H.262视频标准MPEG-4 AVC/H.264视频标准H.264编码框架概述H.264视频编码的技术创新点 H.265/HEVC视频标准HEVC性能与编解码框架概述Quadtree-based coding structureDeblocking & SAO FilterHEVC各模块运算量 视频压缩的国际…...
使用Go模块进行依赖管理
摘要：本文将介绍Go语言中的模块（module）概念，以及如何使用Go模块进行依赖管理。我们会探讨模块的基本概念、使用方法、配置和依赖关系管理等方面的内容。 一、引言 Go语言自2007年发布以来，一直以其简洁、高效和强大…...
Unity日志语义分析工具：Editor Console Pro深度解析
1. 这不是“换个皮肤”——Editor Console Pro 解决的是 Unity 开发中被长期忽视的“信息过载失能症”你有没有过这样的时刻：刚点下 Play，控制台瞬间炸出 200 行日志，红色错误、黄色警告、蓝色调试信息混作一团；你盯着屏幕三秒&am…...
如何用中文汉化包彻底解决Masa模组的语言困扰？
如何用中文汉化包彻底解决Masa模组的语言困扰？ 【免费下载链接】masa-mods-chinese 一个masa mods的汉化资源包 项目地址: https://gitcode.com/gh_mirrors/ma/masa-mods-chinese 你是否曾经在Minecraft中安装了一堆强大的Masa系列模组，却因为满屏…...
终极指南：如何使用NifSkope轻松编辑游戏3D模型文件
终极指南：如何使用NifSkope轻松编辑游戏3D模型文件 【免费下载链接】nifskope A git repository for nifskope. 项目地址: https://gitcode.com/gh_mirrors/ni/nifskope NifSkope是一款专为游戏开发者设计的开源3D模型编辑器，专注于NetImmerse文件…...
2026 年 AI 工具聚合站：从模型入口到开发基础设施的进化之路
在 2026 年的 AI 开发生态中，开发者正面临一个矛盾的现状：一方面是 GPT-5.5、Claude 4.7、Gemini 3.1 等大模型的能力持续突破，带来了前所未有的技术红利；另一方面，模型碎片化、接口异构化、成本高企等问题，…...
【全新 v 2.7.5 版本】Open Claw 本地环境一键部署教程
前言 2026 年开源圈爆火的「数字员工」OpenClaw（昵称小龙虾），GitHub 星标狂揽 28 万 ，凭「本地运行 零代码操作 自动干活」的核心优势圈粉无数！很多人误以为它是普通聊天 AI，实则是能真正操控电脑的自动…...
终极指南：如何快速实现Daz Studio到Blender的无缝资产迁移
终极指南：如何快速实现Daz Studio到Blender的无缝资产迁移 【免费下载链接】DazToBlender Daz to Blender Bridge 项目地址: https://gitcode.com/gh_mirrors/da/DazToBlender 还在为3D角色创作中的软件壁垒而烦恼吗？Daz Studio以其强大的角色创建…...
终极原神帧率解锁指南：3步突破60FPS限制，畅享丝滑游戏体验
终极原神帧率解锁指南：3步突破60FPS限制，畅享丝滑游戏体验 【免费下载链接】genshin-fps-unlock unlocks the 60 fps cap 项目地址: https://gitcode.com/gh_mirrors/ge/genshin-fps-unlock 原神帧率解锁工具是一款专为《原神》PC玩家设计的开源性…...
GPT-5.5不只是能写代码——ChatGPT Image 2模块“语义-结构-纹理“三级解耦机制详解
引言：图像生成能力的范式迁移过去两年，大模型的图像生成能力经历了从"能画"到"画对"的跃迁。早期的文生图模型普遍存在一个核心矛盾：用户想控制"画什么"，模型却同时处理"画什么""怎…...
路由算法的终极真相：为何“绝对最佳”是伪命题？从理论陷阱到工程实战的深度破局
路由算法的终极真相：为何“绝对最佳”是伪命题？从理论陷阱到工程实战的深度破局 摘要：在计算机网络的浩瀚星图中，路由选择算法如同指引数据包穿越迷雾的灯塔。然而，无数工程师和架构师曾陷入一个巨大的思维误区&#x…...
线粒体氧化磷酸化的新靶点：S-Gboxin的发现与研究进展
在肿瘤治疗的探索历程中，科学家们始终在寻找能够精准打击癌细胞而又最大限度保护正常组织的新型药物。2019年，一项发表在Nature杂志上的研究引起了学界广泛关注——施宇峰团队首次报道了Gboxin这一化合物的发现与独特的作用机制[1]。作为Gboxin的代谢稳定…...