一次简陋的页面登录练习

news2024/12/26 0:10:13

看着有点丑,果然我还是不太适合写前端哈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .login_container {
            background-color: #2b4b6b;
            height: 100%;
            font-size: 18px;
         }
      .login_box{
        width: 350px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        box-shadow: 0 0 10px #ddd;
      }
      input{
        outline-style: none ;
        border: 1px solid #ccc; 
        border-radius: 1px;
        padding: 6px 8px;
        width: 240px;
        font-size: 16px;
}

       .bt{
            transform: translate(90px, -10px);
            position: absolute;

       }
       button {
            background-color: hwb(188 30% 32%); /* Green */
            border: none;
            color: white;
            padding: 10px 18px;
            margin-left: 20px;
            
            font-size: 14px;
            border-radius: 5%;
}
     


    </style>
</head>
<body>
    <div class="login_container"  >
          <div  class="login_box">
            <h3>登陸</h3>
            <div class="elform">
                <label for="id">
                    编号:
                  </label>
                <input type="text" id="id" ><br><br>
                <label for="id">
                    密碼:
                  </label>
                <input type="text" id="id" ><br><br>
               <div  class="bt">
                <button>登陸</button>
                <button>註冊</button>
               </div >
                
            </div>

          </div>
    </div>
    
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/358140.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年,Java岗大厂的架构师之路该怎样走?互联网寒冬能否有所好转?

大厂还值得去吗&#xff1f;程序员这个行业是不是不行了&#xff1f;我还有必要继续学习吗&#xff1f;答案显然是否定的&#xff0c;其实在行业里面很多年的程序员们都知道&#xff0c;大厂每年都会裁员&#xff0c;只不过是裁的数量多少而已&#xff0c;而大规模的裁员&#…

我的周刊(第079期)

我的信息周刊&#xff0c;记录这周我看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。&#x1f3af; 项目ChatGPT 项目推荐基于 ChatGPT 相关接口衍生的项目&…

计算机网络学习笔记02

学习视频&#xff1a;https://www.bilibili.com/video/BV1c4411d7jb/?p7&spm_id_frompageDriver&vd_source75dce036dc8244310435eaf03de4e330 一、计算机网络体系结构 1 常见的计算机网络体系结构 OSI体系结构和TCP/IP体系结构 TCP/IP体系结构的网络接口层并没有规…

【笔试强训】Day_02

目录 一、选择题 1、 2、 3、 4、 5、 6、 7、 8、 9、 10、 二、编程题 1、排序子序列 2、倒置字符串 一、选择题 1、 使用printf函数打印一个double类型的数据&#xff0c;要求&#xff1a;输出为10进制&#xff0c;输出左对齐30个字符&#xff0c;4位精度。…

@Valid与@Validated的区别

1.介绍 说明&#xff1a; 其实Valid 与 Validated都是做数据校验的&#xff0c;只不过注解位置与用法有点不同。 不同点&#xff1a; &#xff08;1&#xff09; Valid是使用Hibernate validation的时候使用。Validated是只用Spring Validator校验机制使用。 &#xff08;2&…

Mysql里的ibtmp1文件太大,导致磁盘空间被占满

目录 一、查看磁盘的时候发现磁盘空间100% 二、 排查的时候&#xff1a;查看是什么文件占用的时候&#xff0c;发现是数据库临时表空间增长的 三、为了避免以后再次出现ibtmp1文件暴涨&#xff0c;限制其大小&#xff0c;需在配置文件加入 四、重启Mysql实例&#xff08;重启后…

6 大经典机器学习数据集,3w+ 用户票选得出,建议收藏

内容一览&#xff1a;本期汇总了超神经下载排名众多的 6 个数据集&#xff0c;涵盖图像识别、机器翻译、遥感影像等领域。这些数据集质量高、数据量大&#xff0c;经历人气认证值得收藏码住。 关键词&#xff1a;数据集 机器翻译 机器视觉 数据集是机器学习模型训练的基础&…

【电商】OMS--零售电商系统的核心

本文讲述了OMS概念以及相关服务和功能&#xff08;包括&#xff1a;信息下发、信息上传、 订单分发协同单号生成与拉、拆单发票服务、状态更新与模板、流水、库存&#xff09; OMS即&#xff1a;订单管理中心&#xff0c;是零售电商系统的核心。 随着中台概念的火热&#xff0…

graphsage解读

传统的图方法都是直推式(transductive)的&#xff0c;学习到的是结构固定的图模型&#xff0c;一旦有新的节点加入&#xff0c;便需要重新训练整个图网络&#xff0c;泛化性不强。GraphSAGE是归纳式(inductive)的&#xff0c;它学习一种映射&#xff1a;通过采样和聚合邻居节点…

ModStartBlog v6.7.0 后台管理优化,页面宽度调整

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议。 功能特性 丰富的模块市场&#xff0c;后台一键快速安装会…

二叉树OJ(二)二叉树中和为某一值的路径 I、II、III

二叉树中和为某一值的路径(一) 描述 给定一个二叉树root和一个值 sum &#xff0c;判断是否有从根节点到叶子节点的节点值之和等于 sum 的路径。 1.该题路径定义为从树的根结点开始往下一直到叶子结点所经过的结点 2.叶子节点是指没有子节点的节点 3.路径只能从父节点到子节点&…

对JS文件中每个函数单独混淆加密

自动化脚本&#xff1a;单独对JS代码中的每个函数进行混淆加密 用自动化脚本工具&#xff0c;对JS代码中的每个函数分别进行单独混淆加密。这样加密得到的JS代码&#xff0c;比直接对整个JS代码进行混淆加密&#xff0c;效果要好很多。所谓“好”体现在&#xff1a;加密结果安…

Interspeech2022 | 一种基于元辅助学习的低资源口语语义理解方法

中国移动研究院首席科学家冯俊兰博士带领人工智能与智慧运营中心语音团队共同撰写的文章《Meta Auxiliary Learning for Low-resource Spoken Language Understanding》被语音国际顶会Interspeech2022接收。 关于Interspeech Interspeech 是国际最大且最全面关于言语科学与技…

QT for Android BLE Bluetooch QT BLE

小白式的介绍&#xff0c;很详细了&#xff0c;很多主要内容写在程序的注释里&#xff0c;慢慢看 下面是我的源码 https://download.csdn.net/download/qq_27620407/87464307 源码打不开的话可以试试下图的操作&#xff0c;之后电机确定&#xff0c;可能是加图标搞的&#xff0…

自监督表征预训练之掩码图像建模

自监督表征预训练之掩码图像建模 前言 目前&#xff0c;在计算机视觉领域&#xff0c;自监督表征预训练有两个主流方向&#xff0c;分别是对比学习&#xff08;contrastive learning&#xff09;和掩码图像建模&#xff08;masked image modeling&#xff09;。两个方向在近几…

CLEVE:事件抽取的对比预训练

CLEVE: Contrastive Pre-training for Event Extraction 论文&#xff1a;CLEVE: Contrastive Pre-training for Event Extraction (arxiv.org) 代码&#xff1a;THU-KEG/CLEVE: Source code for ACL 2021 paper “CLEVE: Contrastive Pre-training for Event Extraction” (g…

初探Upgrade内存马(内存马系列篇六)

写在前面 前面讲解了一个特殊的Tomcat内存马-Executor内存马&#xff0c;这篇同样是一个特殊&#xff0c;可以不被检测到的内存马-Upgrade内存马。 这篇就是内存马系列文章的第六篇了。 前置 在阅读这篇文章之前&#xff0c;同样需要对Tomcat的架构&#xff0c;和初始化流程…

秒懂算法 | 莫队算法

01、基础莫队算法 莫队算法 = 离线 + 暴力 + 分块。 “离线”和“在线”的概念。在线是交互式的,一问一答;如果前面的答案用于后面的提问,称为“强制在线”。离线是非交互的,一次性读取所有问题,然后一起回答,"记录所有步,回头再做”。 基础的莫队算法是一种离线…

[Java安全]—Shiro回显内存马注入

文章目录前言流程分析寻找response流程分析获取Http11Processor获取AbstractProtocol获取Connector获取WebappClassLoaderHeader 长度限制绕过1、反射修改maxHeaderSize2、自定义ClassLoader加载Body数据后记参考前言 接上篇[Java安全]—Tomcat反序列化注入回显内存马_&#x…

【基于混合激活残差块:超分】

SRNHARB: A deep light-weight image super resolution network using hybrid activation residual blocks &#xff08;SRNHARB&#xff1a;一种基于混合激活残差块的深度轻量图像超分辨率网络&#xff09; 在所有基于图像的应用中&#xff0c;特别是在计算机视觉应用中&…