html网页制作之简单登入界面

最新推荐文章于 2024-07-25 11:52:08 发布

不蒸馒头曾口气

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量1.4k

点赞数 14

分类专栏：网页制作文章标签： html 前端 css vscode

本文链接：https://blog.csdn.net/qq_62652856/article/details/136450691

版权

网页制作专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个包含用户名、密码、用户类型、性别选择、兴趣爱好、出生日期和邮箱的注册表单，以及模拟注册和重置功能的实现。

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

效果图展示

功能介绍

输入注册信息
选择用户类型
设置单选框和复选框
选择出生日期
输入电子邮箱
书写自我介绍
点击注册（设置了事件触发进行模拟注册）
重置信息

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单登入界面</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="wrap">
        <div class="text_h">
            <h1>REGISTER</h1>
        </div>
        <!-- <table>是<tr>的上层标签 <tr>必须在一个<table></table>里面,
        它不能单独使用,相当于<table>的属性标签.  <table>标示一个表
        格,<tr>标示这个表格中间的一个行  <td>标示行中的一个列,
        需要嵌套在<tr></tr>中间 -->
        <form>
            <table>
                <tr>
                    <td class="tips">用户账号:</td>
                    <td>
                        <input type="text" class="textarea" placeholder="请输入账号">
                    </td>
                </tr>
                <tr>
                    <td class="tips">用户密码:</td>
                    <td>
                        <input type="password" class="textarea" minlength="6" placeholder="请输入密码（不少于6位）">
                    </td>
                </tr>
                <tr>
                    <td class="tips">确认密码:</td>
                    <td>
                        <input type="password" class="textarea" placeholder="请再次确认密码">
                    </td>
                </tr>
                <tr>
                    <td class="tips">用户类型:</td>
                    <td>
                        <select>
                            <option>企业用户</option>
                            <option>普通用户</option>
                            <option>游客</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="tips">用户性别: &nbsp;</td>
                    <td class="text1">
                        <input type="radio" name="sex">男
                        <input type="radio" name="sex">女
                    </td>
                </tr>
                <tr>
                    <td class="tips">兴趣爱好: &nbsp;</td>
                    <td class="text1"> 
                        <input type="checkbox">游泳
                        <input type="checkbox">滑冰
                        <input type="checkbox">绘画
                    </td>
                </tr>
                <tr>
                    <td class="tips">出生日期: &nbsp;</td>
                    <td> 
                        <input type="date" class="text2">
                    </td>
                </tr>
                <tr>
                    <td class="tips">电子邮箱: </td>
                    <td> 
                        <input type="email" class="textarea" required>
                        <!-- require不允许为空 -->
                    </td>
                </tr>
                <tr>
                    <td class="tips">自我介绍: </td>
                    <td> 
                        <textarea class="text_p"></textarea>
                        <!-- 自动换行 -->
                        
                    </td>
                </tr>
            </table>
            <div class="anniu">
                <button type="submit" class="button" onclick="test_zc(1)">注册</button>
                <button type="reset" class="button">重置</button>
                <!-- 重置按钮要在form中实现 -->
            </div>
        </form>
    </div>

    <script>
        function test_zc(a){
            alert("注册成功");
        }
        
    </script>

</body>
</html>

css样式

/* 初始化 */
*{
    margin: 0px;
    padding: 0px;
    font-family: "KaiTi",楷体;
}

body{
    height: 100vh;
    width: 100%;
    background-image: url(../images/3.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}

.wrap{
    position: fixed;
    /* 弹性布局 */
    top: 50%;
    left: 50%;
    width: 480px;
    height: 700px;
    background-color: rgba(255, 255, 255, 0.3);
	border-radius: 30px;
	transform: translate(-50%, -50%);
    /* ranslate() 这个 CSS 函数在水平和/或垂直方向上重新定位元素 */
    padding: 20px;
}

.text_h{
    /* border: 1px solid #000; */
    height: 50px;
    width: 200px;
    margin: auto;
}

h1{
    font-size: 3em;
}

table{
    color: #fff;
    /* width: 100%; */
    margin: 30px;
    padding: 10px 20px ;
    /* border-spacing: 15px 10px; */
    /* 水平间距 垂直间距 */
}



tr{
	height: 38px;
	line-height: 38px;
}

.tips{
    font-size: 1.5em;
}

/* .titles{
	text-align: right;
} */

/* input{
	background: none;
	border: 1px solid #fff;
	border-radius: 15px;
}  */

.textarea{
    
    height: 30px;
    width: 200px;
	background: none;
    /* 取消输入框背景色 */
	border: 1px solid #fff;
	border-radius: 13px;
    padding: 1px 15px;
    outline: none;
    /* 取消点击时的黑线 */
    font-size: 16px;
    color: #ffffff;
}

select{
    height: 30px;
    width: 110px;
    background: none;
    outline: none;
    /* 取消点击时的黑线 */
    font-size: 17px;
    color: #ffffff;
    padding: 1px 9px;
    border: 1px solid #fff;
    border-radius: 13px;

}

option{
    background-color: rgb(27, 27, 27);
}

.text1{
    font-size: 1.4em;
}

.text2{
    height: 30px;
    width: 120px;
    background: none;
    outline: none;
    /* 取消点击时的黑线 */
    font-size: 17px;
    color: #ffffff;
    padding: 1px 9px;
    border: 1px solid #fff;
    border-radius: 13px;
}

.text_p{
    margin-top: 5px;
    height: 190px;
    width: 200px;
	background: none;
    /* 取消输入框背景色 */
	border: 1px solid #fff;
	border-radius: 13px;
    padding: 1px 15px;
    outline: none;
    /* 取消点击时的黑线 */
    font-size: 19px;
    color: #ffffff;
}

.anniu{
    /* border: 1px solid #fff; */
    width: 450px;
    height: 60px;
    margin: -30px auto;
    /* 上-30 左右水平居中 */
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* 弹性布局 垂直居中 均匀分布 */

}

.button {
	width: 120px;
	height: 50px;
	background: #4d71b8;
	border-radius: 40px;
	text-align: center;
    font-size: 1.6em;
    color: #ffffff;
	float: left;
	margin: 5px 10px;
	cursor:pointer;
    /* 鼠标移入变小手 */
    border: 0;

    
}
.button:hover{
    background:rgb(247, 138, 138);color:#fff;
}

/* .one {
	margin-left: 120px;
}  */