JavaWeb CSS专题简单案例 注册页面

最新推荐文章于 2023-02-28 20:32:42 发布
最新推荐文章于 2023-02-28 20:32:42 发布
阅读量664 收藏 8
点赞数 2
分类专栏： javaWeb 笔记 入门 文章标签： html5 javaweb CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DAurora/article/details/109298871
版权
笔记 同时被 3 个专栏收录
78 篇文章 4 订阅
订阅专栏
入门
21 篇文章 0 订阅
订阅专栏
javaWeb
2 篇文章 0 订阅
订阅专栏

简单注册页面及CSS简单应用

注册页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
</head>
<body>
        <!--定义表单-->
        <form action="#" method="post">
            <table border="1" align="center" width="500">
                <tr>
                    <td colspan="2"align="center">欢迎注册！</td>
                </tr>
                <tr>
                    <td align="center"><label for="username">用户名:</label> </td>
                    <td><input type="text"name="username"id="username"></td>
                </tr>
                <tr>
                    <td align="center"><label for="password">密码:</label> </td>
                    <td ><input type="password"name="username"id="password"></td>
                </tr>
                <tr>
                    <td align="center"><label for="usersname">姓名：</label></td>
                    <td><input type="text" name="username"id="usersname"></td>
                </tr>
                <tr>
                    <td align="center"><label for="email">Email:</label></td>
                    <td><input type="email"name="useremail"id="email"></td>
                </tr>
                <tr>
                    <td align="center"><label for="tel">手机号:</label> </td>
                    <td><input type="tel"name="tel"id="tel"></td>
                </tr>
                <tr>
                    <td align="center"><label >性别：</label></td>
                    <td>
                        <input type="radio" name="gender"value="male">男
                        <input type="radio" name="gender"value="female">女
                    </td>
                </tr>
                <tr>
                    <td align="center"><label for="birthday">出生日期:</label></td>
                    <td><input type="date"name="birthday"id="birthday"></td>
                </tr>
                <tr>
                    <td align="center"><label for="checkcode">验证码:</label></td>
                    <td>
                        <input type="text"name="checkcode"id="checkcode">
                        <img src="image/验证码.jpg"><!--这里的图片只是一个静止的验证码的图片，如果电脑上没有这个图片可以任意指定一张自己电脑上的图片来显示。-->
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="注册"></td>
                </tr>
            </table>
        </form>

</body>
</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("image/bg.jpg");
        }
        .rg_layout{
            width: 1000px;
            height: 500px;
            border: 8px solid #ffd700;
            background: darkturquoise;
            /*水平居中*/
            margin: auto;
            margin-top: 20px;
        }
        .rg_left{
            /*border: 1px red solid; 可解开注释查看被操作的区域*/
            float: left;
            margin: 15px;
        }
        .rg_center{
            /*border: 1px red solid; 可解开注释查看被操作的区域*/
            float: left;
            width: 500px;
        }
        .rg_left > p:first-child{ /*选择其中的第一个 p 标签*/
            color: #FFD026;
            font-size: 30px;
        }
        .rg_left > p:last-child{ /*选择其中的最后一个 p 标签*/
            color: #A6A6A6;
            font-size: 30px;
        }
        .rg_right{/**/
            /*border: 1px red solid; 可解开注释查看被操作的区域*/
            float: right;
            margin: 15px;
        }
        .rg_right > p:first-child{ /*选择其中的最后一个 p 标签*/
             font-size: 20px;
         }
        .rg_right p a{
            color: palevioletred;
        }
        .td_left{
            width: 80px;
            height: 45px;
            text-align: right;
        }
        .td_right{/**/
            padding-left: 30px;

        }
        #username,#password,#checkcode,#birthday,#email,#tel,#name{/*并集选择器设置输入框的宽、高等样式*/
            width: 240px;
            height: 39px;
            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 #FFD026;

        }
    </style>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
            <!--<p class="p_reg">新用户注册</p>-->
            <p>新用户注册</p>
            <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单-->
            <form action="#" method="post">
                <table >
                    <tr>
                        <td colspan="2"align="center">欢迎注册！</td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="username">用户名:</label> </td>
                        <td class="td_right"><input type="text" placeholder="请输入用户名" name="username"id="username"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码:</label> </td>
                        <td class="td_right"><input type="password"name="username"id="password"placeholder="请输入密码"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名:</label></td>
                        <td class="td_right"><input type="text" name="username"id="name"placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email:</label></td>
                        <td class="td_right"><input type="email"name="useremail"id="email"placeholder="请输入Email"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="tel">手机号:</label> </td>
                        <td class="td_right"><input type="tel"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"></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="image/验证码.png">
                        </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>

源文件图片获取（百度网盘）：

链接：https://pan.baidu.com/s/1XPeLUdX6NRCwDdbtZLiAPA
提取码：vgev

点击查看相关专题

Dawn·D
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
炫酷的 java 登录注册界面 css 样式
04-28
比较炫酷实用的java登录界面，可以用来学习 或者直接使用，使用简单快捷
javaweb简单登陆注册案例
06-21
这个"javaweb简单登陆注册案例"是一个基础的教学示例，旨在帮助初学者理解如何在JavaWeb环境中实现用户登录和注册功能。以下是这个案例可能涉及的关键知识点： 1. **Servlet**：JavaWeb的核心组件之一，它是一个...
JavaWeb——CSS应用实例详解（概述、语法、选择器、属性、用户登录界面实例）
数字世界 万物互联
05-18 693
目录 1、CSS概述 2、CSS的使用 3、CSS的基本语法与选择器 4、CSS属性 5、CSS使用案例实战 1、CSS概述 CSS是用来页面美化与布局控制的，英文全称为Cascading Style Sheets 层叠样式表，层叠：多个样式可以同时作用在同一个html的元素上，同时生效。 使用CSS的好处有哪些？ 功能强大 将内容展示和样式控制分离，降低耦合度，让分工更容易，提高开发效率。 2、CSS的使用 CSS与html的结合方式有三种：内联样式、内部样式、外部样式： 内联样式
java css网页布局实例_java代码例子
weixin_30666407的博客
02-23 153
JAVA 类名.方法名(这里面写的是什么)能不能写个代要是类名直接调用的方法，那这个方法就是静态的(static)方法，是不用new出新对象实例就可以直接调用的方法。看下面例子： class A{ public static void Method1(int a, int b){ //方法体 } public void Method2(int c){ //方法体 } public stati用JA...
JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
weixin_34261739的博客
05-03 352
现在框架已经做好了，即下来我们要对页面进行装饰了，第一步给每一个元素添加id 1、最外面的div添加id为divMain 2、第二个div添加id为divTitle，里面的span对应的id为spanTitle 3、第三个div添加id为divBody，里面的table对应的id为tableForm 4、table里面对应的input 对应的id的名称就是其那么对应的名称 添加的id...
JavaWeb01_HTML+CSS实现注册页面
SeafyLiang的博客
02-24 1617
Web概念概述 JavaWeb 使用Java语言开发基于互联网的项目 软件架构： 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... * 优点： 1. 用户体验好 * 缺点： 1. 开发、安装，部署，维护 麻烦 2. B/S: Browser/Server 浏览器/服务器端 * 只需要一个浏览...
javaweb 简单案例
06-16
在本JavaWeb简单案例中，我们探讨了一个基于Java技术栈的音乐播放器应用程序。这个案例主要涉及了几个关键技术和框架，包括DOM4J、JSTL（JavaServer Pages Standard Tag Library）以及EL（Expression Language）...
JavaWeb登录注册页面
08-02
JavaWeb登录注册页面是Web应用开发中的基础模块，主要用于用户的身份验证和信息管理。这个项目集成了验证码生成与验证、记住账号密码的功能，并且利用了Filter进行请求拦截，以提高系统的安全性和用户体验。同时，该...
JavaWeb简单用户登录注册实例代码(有验证码)
08-24
JavaWeb简单用户登录注册实例代码详解 基于JavaWeb的简单用户登录注册实例代码是Web开发中非常重要的一个部分，本文将详细介绍该实例代码的设计思想和实现过程。 知识点1： JavaWeb登录注册的设计思想 在设计登录...
javaweb——serlvet简单登录案例.rar
11-28
本案例"javaweb——serlvet简单登录案例"是用于演示如何使用Servlet实现一个基本的用户登录功能。 首先，Servlet生命周期包括加载、初始化、服务、销毁四个阶段。在这个登录案例中，我们关注的是初始化和服务阶段。...
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。
js css 实现的登录注册页面
08-13
js css 实现的登录注册页面（达内老师写的）
用户注册登录界面设计+代码
10-12
简单的用户注册登录界面设计+源代码，采用DIV+CSS结构，简洁
html，css和js写的登录与注册界面
10-18
html，css和js写的登录与注册界面。本人菜水平，希望对初学者有帮助
Web前端设计HTML5+CSS3+JQuery设计登陆注册无刷新页面
09-23
小编自己编写的一款透明的登陆界面，log可随意自己添加，美美的！！！
JavaWeb CSS样式
qq_38557784的博客
03-19 2116
css基本使用 1、使用css的好处 css样式， 就是用来美化网页(美颜)。非常方便，维护性好。 层叠: 一层一层:强调的是优先级. 样式表: 很多的属性和属性值 回顾: html使用标签把要操作的数据包裹起来，通过修改标签的属性值，来实现标签内数据的变化 2、css将网页内容和显示样式 进行分离，提高了显示功能 3.提取出html标签中的大部分属性，进行统- -的管理。简化html网页代码结构,同时还可以对多个html网页进 行统- -管理 2、css基本使用 1、内嵌样式 1)需要在head标
JavaWeb --- CSS
乌云的博客
02-28 733
CSS是「层样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS 属性 索引 详解 Myself~~
洪文聊架构
01-15 1186
W3SCHOOL---CSS参考手册：http://www.w3school.com.cn/css/css_reference.asp 请点击表格中属性列的链接，可以查看相关属性的详细信息。 CSS 属性组： 背景文本字体边框和轮廓外边距内边距列表内容生成尺寸定位打印表格伪类伪元素 提示和注释： 属性：“属性” 列指向语法、实例、浏览器支持等内容。
java使用css写页面样式,JavaWeb-CSS样式表
weixin_35473667的博客
03-15 365
一 CSS规则1 选择符，也称选择器2 属性3 属性值a{font-size:9px;color:#F93;}这里需要注意，要写在前面二 CSS选择器1 标记选择器2 类别选择器3 id选择器这里需要注意 在HTML中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。以“#”开头。#one{font-size:18px}#two{font-size:24px}#third{fon...
javaweb简单项目案例
最新发布
07-26
5. 设计前端界面：使用HTML、CSS、JavaScript等前端技术，设计网页界面，使其符合项目需求，可以通过JSP或者模板引擎将后台数据渲染到前端页面上。 6. 完成数据库操作：根据项目需求，使用Java的数据库访问技术（如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值