案例-注册页面(css)

html页面用css控制样式,画一个注册页面。

页面最终效果如下:


页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("img/register_bg.png") no-repeat center;
        padding-top: 25px;
    }

    .rg_layout{
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        /*让div水平居中*/
        margin: auto;
    }

    .rg_left{
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
    }
    .rg_left > p:first-child{
        color:#FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child{
        color:#A6A6A6;
        font-size: 20px;

    }


    .rg_center{
        float: left;
       /* border: 1px solid red;*/

    }

    .rg_right{
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
        font-size: 15px;

    }
    .rg_right p a {
        color:pink;
    }

    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
        width: 110px;
    }

    #img_check{
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub{
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026 ;
    }

</style>

</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>
    
</div>

</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【分布式事务】初步探索分布式事务的概率和理论,初识分布式事的解决方案 Seata,TC 服务的部署以及微服务集成 Seata

文章目录 一、分布式服务案例1.1 分布式服务 demo1.2 演示分布式事务问题 二、分布式事务的概念和理论2.1 什么是分布式事务2.2 CAP 定理2.3 BASE 理论2.4 分布式事务模型 三、分布式事务解决方案 —— Seata3.1 什么是 Seata3.2 Seata 的架构3.3 Seata 的四种分布式事务解决方…

JavaEE-博客系统3(功能设计)

本部分内容为&#xff1a;实现登录功能&#xff1b;强制要求用户登录&#xff1b;实现显示用户信息&#xff1b;退出登录&#xff1b;发布博客 该部分的后端代码如下&#xff1a; Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws Ser…

信息系统项目管理师第四版:第5章 信息系统工程

请点击↑关注、收藏&#xff0c;本博客免费为你获取精彩知识分享&#xff01;有惊喜哟&#xff01;&#xff01; 信息系统工程是用系统工程的原理、方法来指导信息系统建设与管理的一门工程技术学科&#xff0c;它是信息科学、管理科学、系统科学、计算机科学与通信技术相结合…

Visual Interpretability for Deep Learning: a Survey

Visual Interpretability for Deep Learning: a Survey----《深度学习的视觉可解释性:综述》 摘要 本文回顾了最近在理解神经网络表示以及学习具有可解释性/解耦的中间层表示的神经网络方面的研究。尽管深度神经网络在各种任务中表现出了优越的性能&#xff0c;但可解释性始终…

抖音双11进入决赛圈,爆款王炸单品竟是.....

今年&#xff0c;抖音将双11战线拉长&#xff0c;给足品牌和消费者时间备战&#xff0c;第一轮抢跑期战绩亮眼&#xff0c;多项双11销售增长记录被刷新&#xff0c;引爆全域流量。最后几天&#xff0c;抖音商城全面进入终局厮杀阶段&#xff0c;爆发期下半程对比抢跑期增速放缓…

通信原理板块——图像压缩编码

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 1、图像压缩编码 图像压缩编码可以…

Jmeter 基本使用以及性能测试基本流程使用总结

使用场景 需要对一部分接口做性能测试&#xff0c;并检验修改后的效果下载安装 搜索 Apache JMeter - Download Apache JMeter 或直接到官网 https://jmeter.apache.org/download_jmeter.cgi?cm_mc_uid15063477198714828218851&cm_mc_sid_502000001483277541下载 选择 zi…

2023年11月数据库流行度最新排名

点击查看最新数据库流行度最新排名&#xff08;每月更新&#xff09; 2023年11月数据库流行度最新排名 TOP DB顶级数据库索引是通过分析在谷歌上搜索数据库名称的频率来创建的 一个数据库被搜索的次数越多&#xff0c;这个数据库就被认为越受欢迎。这是一个领先指标。原始数…

Linux系统环境变量

Linux系统环境变量 1. 环境变量1.1 定义环境变量1.2 使用环境变量 2. 环境变量作用2.1 PATH 3. 设置环境变量3.1 设置系统级环境变量3.2 设置用户级环境变量3.3 设置临时环境变量 1. 环境变量 在Linux系统中&#xff0c;常用的关键信息以键值对&#xff08;KeyValue&#xff09…

用C++编写动画+音频版极乐净土

#define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<graphics.h> #include<Windows.h> #include<MMSystem.h>//播放音乐所需要的头文件 #pragma comment(lib,"winmm.lib")//告诉编译器&#xff0c;加载winmm.lib库文件 #define C…

[OS]11.9.2023 中断

中断向量表 CPU的设计者必须在中断信息和其处理程序的入口地址之间建立某种联系&#xff0c;使得CPU根据中断信息可以找到要执行的处理程序。 中断信息中包含有标识中断源的类型码。根据CPU的设计&#xff0c;中断类型码的作用就是用来定位中断处理程序。 比如CPU 根据中断类型…

【数据结构】 二叉树理论概念!一文了解二叉树!

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; 数据结构解析 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️树的概念☁️树的结构☁️树的小知识☁️树的表示与运用 &#x1f324…

python定时任务scheduler根据参数执行

python执行定时任务请参考&#xff1a;python使用apscheduler每隔一段时间自动化运行程序 传入参数时&#xff1a; 使用add_job函数中添加参数&#xff1a;args[参数1, 参数2]....传入参数顺序与对应位置一致 示例程序 import datetime from apscheduler.schedulers.backg…

一键批量删除文件名中的空格,高效整理您的文件

你是否曾经因为文件名中多余的空格而烦恼&#xff1f;这些空格不仅影响了文件的美观&#xff0c;还可能导致一些不必要的错误。现在&#xff0c;我们向您介绍一款全新的工具&#xff0c;它可以帮助您一键批量删除文件名中的空格&#xff0c;让您的文件整理更加轻松、高效&#…

【Java笔试强训】Day9(CM72 另类加法、HJ91 走方格的方案数)

CM72 另类加法 链接&#xff1a;另类加法 题目&#xff1a; 给定两个int A和B。编写一个函数返回AB的值&#xff0c;但不得使用或其他算数运算符。 题目分析&#xff1a; 代码实现&#xff1a; package Day9;public class Day9_1 {public int addAB(int A, int B) {// wr…

软件测评中心▏软件功能测试和非功能测试的区别和联系简析

在软件开发的过程中&#xff0c;功能测试和非功能测试是两个重要的环节。功能测试是指对软件的各项功能进行验证和确认&#xff0c;关注软件是否按照需求规格说明书进行了实现&#xff0c;是否满足了用户的功能需求。而非功能测试是指对软件的性能、可靠性、安全性等方面进行测…

异地传输大文件最快且安全稳定的办法

无论是企业还是个人&#xff0c;都会有传输大文件的需求&#xff0c;特别是在异地时&#xff0c;工作中最典型的就是项目资料、合同文档、视频素材等都是有一定的及时性的&#xff0c;那么在传输过程中&#xff0c;没有好的传输方式会间接性的影响到整体工作的进行&#xff0c;…

vue项目electron打包

1.设置国内镜像 npm config edit 命令行输入后会弹出npm的配置文档&#xff0c;需要文档末尾加入 electron_mirrorhttps://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirrorhttps://npm.taobao.org/mirrors/electron-builder-binaries/ 2.全局安装electron …

linux基础指令上篇

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 引用 01. ls 指令2. pwd命…