前端 ：用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年发布以来，一直以其简洁、高效和强大…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
python打卡day49
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...