html&css实现简单的注册页面

最新推荐文章于 2024-05-31 11:20:07 发布
最新推荐文章于 2024-05-31 11:20:07 发布
阅读量379 收藏 1
点赞数
原文链接：http://www.cnblogs.com/gujun1998/p/11304725.html
版权

使用HTML实现注册页面

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>注册页面</title>
  </head>
   <body>

    <form action="#" method="post">
        <table  border="1" align="center">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" placeholder="请输入用户名" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" placeholder="请输入密码" id="password"></td>
            </tr>
            <tr>
                <td><label for="Email">Email</label></td>
                <td><input type="email" name="email" placeholder="请输入Email" id="Email"></td>
            </tr>
            <tr>
                <td><label for="rename">姓名</label></td>
                <td><input type="text" name="rename" placeholder="请输入真实姓名" id="rename"></td>
            </tr>
            <tr>
                <td><label for="Telphone">手机号</label></td>
                <td><input type="text" name="telphone" placeholder="请输入您的手机号" id="Telphone"></td>
            </tr>
            <tr>
                <td><label>性别</label></td>
                <td><input type="radio" name="gender" value="male" checked> 男
                   <input type="radio" name="gender" value="female" > 女
                </td>
            </tr>
            <tr>
                <td><label>出生日期</label></td>
                <td><input type="date" name="birthday"></td>
            </tr>
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td><input type="text" name="checkcode" id="checkcode"> <img src="../image/10.jpg"></td>
                        <!-- 10.png为验证码图片 -->
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" ></td>
            </tr>
        </table>
    </form>

  </body>
</html>

页面效果

1722264-20190805182208725-216715402.png

单纯使用HTML实现的注册页面太难看了，使用css对其进行简单的美化。

使用HTML和CSS实现简单的注册页面

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="../css/register.css">
  </head>
  <body>

    <div class="reg_back">
        <div class="reg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="reg_center">
            <div class="reg_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" placeholder="请输入用户名"
                                                        id="username"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right"><input type="password" name="password" placeholder="请输入密码"
                                                        id="password"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="Email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="rename">姓名</label></td>
                            <td class="td_right"><input type="text" name="rename" placeholder="请输入真实姓名" id="rename">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="Telphone">手机号</label></td>
                            <td class="td_right"><input type="text" name="telphone" placeholder="请输入您的手机号"
                                                        id="Telphone"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label>性别</label></td>
                            <td class="td_right"><input type="radio" name="gender" value="male" checked> 男
                                <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">
                                <img src="../image/10.png" id="img_check"></td>
                                <!-- 10.png为验证码图片 -->
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="reg_right">
            <p>已有账号?<a href="#">立即登录</a></p>
        </div>
    </div>
  </body>
</html>

register.css

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

body {
    background: url("../image/9.jpg") no-repeat center;
    /*设置图片适应整个页面*/
    background-size: 100% 100%;
    background-attachment:fixed;
}

.reg_back {
    /*设置整体的尺寸、背景色、边距等*/
    width: 850px;
    height: 400px;
    border: 8px solid #eeeeee;
    background: white;
    margin: auto;
    margin-top: 20px;
}

.reg_left {
    /*设置左浮动和外边距*/
    float: left;
    margin: 10px;
}

.reg_left > p:first-child {
    /*设置段落（新用户注册）颜色和字体大小*/
    color: yellow;
    font-size: 20px;
}

.reg_left > p:last-child {
    /*设置段落（USER REGISTER）颜色和字体大小*/
    color: #A6A6A6;
    font-size: 20px;
}

.reg_center {
    /*设置中间的各种输入框等*/
    float: left;
    width: 450px;
}

.reg_right {
    /*设置右边段落浮动和外间距*/
    float: right;
    margin: 30px;
}

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

.reg_right p a {
    /*设置超链接（立即登录）颜色*/
    color: crimson;
}

.td_left {
    /*设置表单中字体对齐方式和宽度、高度*/
    width: 100px;
    text-align: right;
    height: 40px;
}

.td_right {
    /*设置输入框内边距*/
    padding-left: 40px;
}

#username ,#password,#Email, #rename ,#Telphone,#Birthday,#checkcode{
    /*设置输入框大小和边框*/
    width: 200px;
    height: 30px;
    border: 1px solid #A4A4A4;
    /* 设置边框为圆角 */
    border-radius: 8px;
    padding-left: 10px;
}
#checkcode{
    /*验证码宽度*/
    width: 100px;
}
#img_check{
    /*验证码图片*/
    vertical-align: middle;
    height: 30px;
    width: 95px;
}
#btn_sub{
    /*注册按钮*/
    background: lime;
    width: 100px;
    height: 40px;
    border: 1px solid lime ;
}

页面效果

1722264-20190805182102341-1865314932.png

背景图片
1722264-20190805182128446-1271664524.jpg

验证码图片
1722264-20190805182135277-1775615383.png

转载于:https://www.cnblogs.com/gujun1998/p/11304725.html

weixin_30768175
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS登录注册界面
m0_55586329的博客
05-26 1万+
目录一、效果演示1、注册界面2、登录界面二、代码实现2.1、HTML主页面2.2、CSS代码2.3、JS代码 一、效果演示 1、注册界面 2、登录界面 [注]: 这里需要我们创建三个文件，一个是index.html文件，一个是style.css文件还有一个是login.js文件，把代码copy上去 只要路径找好就能正常运行了。 二、代码实现 2.1、HTML主页面 <!DOCTYPE html> <html lang="en"> <head> <me
html+css+php+mysql实现注册+登录+修改密码（附完整代码）
m0_67402125的博客
07-31 1万+
目的在利用QT软件进行登录软件开发时，就想要实现点击按钮跳转到指定网页进行注册以及修改密码等操作，就像QQ客户端那样可以实现网页端修改密码，申请账户等操作；（因需要开启花生壳内网穿透，如需体验可私聊！）目前已经实现的操作html界面；html跳转php；php连接数据库；php实现对数据库的增删改查。...
HTML+CSS实现简单登录界面
woloveself的博客
06-27 1819
无
HTML,CSS编写简单的登录注册界面
最新发布
weixin_57383920的博客
05-31 360
HTML,CSS编写简单的登录注册界面。
写一个uniapp的登录注册页面
weixin_68443051的博客
04-15 4355
【代码】写一个uniapp的登录注册页面。
简单的HTML+css完成的用户注册界面（新手第一次写）
weixin_45928499的博客
03-06 1万+
下面是css部分的代码实现： 用户注册 <style type="text/css"> /*初始化属性*/ *{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-image: url("....
简单登录注册页面（HTML5、CSS、JS）
03-24
总结，这个“简单登录注册页面”项目展示了HTML5、CSS和JavaScript在前端开发中的基本应用，通过它们的组合，可以创建出交互性强、视觉效果良好的用户界面。了解并熟练掌握这些技术对于任何前端开发者来说都是至关...
html css jquery简约登陆注册页面.zip
05-08
在"html css jquery简约登陆注册页面.zip"这个压缩包中，我们可以预见到一个基于这三个技术实现的简单登录和注册页面。 HTML（HyperText Markup Language）是网页的基础，用于创建网页的结构。在这个项目中，`index...
html&css入门资料
04-27
CSS通过选择器和规则定义，可以指定HTML元素的样式，实现精确的布局控制。它可以应用于整个网站，确保页面样式的一致性，并且支持媒体查询，以适应不同设备的屏幕尺寸。 HTML与CSS的共同作用： HTML与CSS的结合使用...
html+css登录页面
06-12
"html+css登录页面"这个主题涵盖了如何使用这两种技术来设计和实现登录界面的关键知识点。 首先，HTML（HyperText Markup Language）负责构建页面的结构。在登录页面中，HTML元素如`<form>`用于创建表单，`<input>`...
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
这个“简单登录注册界面模板”结合了HTML、CSS和JavaScript三个核心技术，为开发者提供了一个基础的框架，用于快速构建用户认证系统。以下是关于这些技术及其在模板中的应用的详细说明： 1. **HTML（HyperText ...
html结合css实现一个简单的注册页面
Amanda_wr的博客
04-02 816
用html结合css设计一个简单的注册页面，依据图片如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ ...
html和css制作注册页面
cmyhahh的博客
05-13 1637
代码 基本按钮 样式 效果图
HTML&&CSS实现一个简单的注册页面
jb18602754485的博客
03-10 480
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> * { margin: 0px; padding: 0px; box-sizing: border-box; }
Java Web 2.2.3 案例——利用CSS对注册页面实现修饰（2）
Boyka1046的博客
09-23 445
【实现2】设计CSS样式表文档 #title{color:#DD7B0B;font-size:20px;font-weight:bod;} #i{width:350px;height:15px;color:blue;font-size:12px;} table{text-align:left;} #t{text-align:right;} 【实现3】利用CSS对页面实现修
html+css+js实现注册页面
m0_53446118的博客
09-26 4246
登录页面html+cssjs 用html+css+js实现注册页面大概是这样的，当前只完成了注册界面，还在不断完善功能 html+css 使用HTML和CSS做出如上图所示简约的界面，代码核心主要是整体布局的设定，以及输入input属性的一些设置，主要代码如下所示 CSS 下面展示一些 内联代码片。 // A code block var foo = 'bar'; // An highlighted block <style> * { margin: 0
前端案例 ——注册页面（html+css实现）
Xiong-er 的博客
02-23 5165
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册页面</ti...
html 编写用户注册界面
zcx1203的博客
10-01 7583
编写用户注册界面(友好型并通过js校验信息是否合法) &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script&gt;
div中class属性的理解
热门推荐
liulang68的博客
07-01 5万+
div 在网页设计中是表示块、区域的意思，比如你在制作一个卖衣服的网页时，把男装和女装各分一个区域这是就可以定义两个div，两个块，class则可以表示你可以给这个块加一些属性啊，比如长和宽，背景颜色什么的，你可以给这些属性取一个名字，class=shuxing就表示你给这个属性的集合取了个shuxing的名称 <div class=nanzhuang>、<div class=nvzhuang> 就可以表示你给男装区域和女装区域定义的属性名，这样你就可以设疑class改变他的属性了
用HTML+css实现华为商城注册页面
04-17
好的，华为商城注册页面是一个常见的表单页面，可以使用HTML和CSS来实现。您可以参考以下代码实现： HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>华为商城注册页面</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>欢迎来到华为商城，请注册成为我们的会员</h2> <form> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password" name="confirm_password" required> <label for="email">电子邮件：</label> <input type="email" id="email" name="email" required> <label for="phone-number">手机号码：</label> <input type="tel" id="phone-number" name="phone_number" required> <label for="address">地址：</label> <input type="text" id="address" name="address" required> <input type="submit" value="注册"> </form> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #EFEFEF; } h2 { margin-top: 50px; text-align: center; } form { max-width: 500px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } label { display: block; margin-top: 20px; font-size: 18px; color: #333; } input { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } input[type="submit"] { margin-top: 30px; background-color: #FFA500; color: white; font-size: 20px; border: none; border-radius: 5px; padding: 10px; cursor: pointer; } input[type="submit"]:hover { background-color: #FF8C00; } ``` 这段代码会生成一个简单的表单，包括用户名、密码、确认密码、电子邮件、手机号码和地址输入框，以及一个注册按钮。您可以在这个基础上进行样式的修改和添加。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值