利用H5和CSS一个简单的注册页面

最新推荐文章于 2023-01-30 22:54:00 发布

G_AHlin

最新推荐文章于 2023-01-30 22:54:00 发布

阅读量1.6k

点赞数 2

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_42554859/article/details/105889340

版权

本文介绍了如何使用HTML5和CSS构建一个简单的注册页面。通过分析布局，创建H5文件并添加必要元素，包括left、center和right三个部分。在CSS中设置样式，对页面进行美化，最终实现一个基础的注册界面。

摘要由CSDN通过智能技术生成

利用H5和CSS一个简单的注册页面

先来看看效果图：

在这里插入图片描述
首先我们先来分析一下布局

新建一个H5文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

往body里面添加我们想要的元素

我们可以先在body里面定义一个容器rg_layout，然后在容器里面再定义三个小容器left,center,right

<body>
	<div class="rg_layout">
		<div class="rg_left></div>
		<div class="rg_center></div>
		<div class="rg_right></div
	</div>
</body>

往left容器里添加我们想要的元素

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

接着继续往center容器里添加form表格

<div class="rg_center">
            <div class="rg_form">
                <form action="#" method="get" >
                    <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">邮件</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>
                        &