【HTML+CSS+JS】注册页面模板

你的名字 2023-09-29 10:01 15阅读 0赞

利用基本的html+css逻辑实现一个简易的注册页面

![watermark,type\_d3F5LXplbmhlaQ,shadow\_50,text\_Q1NETiBA5oeS576K576KLmphdmE=,size\_20,color\_FFFFFF,t\_70,g\_se,x\_16][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oeS576K576KLmphdmE_size_20_color_FFFFFF_t_70_g_se_x_16]

源码如下：

<html>
    <style>
    body{
      background-image:url("/i/paper.jpg");
    }
    </style>
    <body>
    <h1 style="background-color:hsl(39, 100%, 50%)" align=center>注&nbsp册</h1>
    <style>
    div{
    	text-align:center;
    	color:black;
        font-size:18;
        font-weight:900;
    }
    .button {
      background-color:#555555;
      border-radius: 4px;
      transition-duration: 0.4s;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 18px;
      margin: 4px 2px;
      cursor: pointer;
    }
    .button1:hover {
      background-color: #4CAF50;
      color: white;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid #e7e7e7;
      background-color: #f3f3f3;
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: #666;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover:not(.active) {
      background-color: #ddd;
    }
    
    li a.active {
      color: white;
      background-color: #4CAF50;
    }
    input[type=text1] {
      width: 30%;
      padding:20px ;
      margin:10px 0;
      box-sizing: border-box;
      text-align:left;
    }
    </style>
    <ul>
      <li><a class="active" href="###">首页</a></li>
      <li><a href="###">公告</a></li>
      <li><a href="###">客服</a></li>
      <li><a href="###">关于我们</a></li>
      <li style="float:right"><a class="active" href="###">退出</a></li>
    </ul>
    <script>
    window.alert("欢迎注册，编程猿！");
    </script>
    <div>
    <form  method="get" action="login.jsp">
    设置用户名：<br>
    <input type="text" name="beginNum" value="请输入用户名" maxlength="10" size="40" ><br><br>
    性别：
    <input type="radio" name="sexy" value="男" checked="true">男
    <input type="radio" name="sexy" value="女" >女<br><br>
    设置密码：<br>
    <input type="text" name="endNum" value="请输入密码" maxlength="10" size="40" ><br><br>
    确认密码：<br>
    <input type="text" name="endNum" value="请输入密码" maxlength="10" size="40" ><br><br>
    学历：
    <select >
      <option value="volvo">初中</option>
      <option value="saab">高中</option>
      <option value="opel">专科</option>
      <option value="audi">本科</option>
    </select><br>
    就业方向:
    <input type="radio" name="subject" value="java" checked="true">Java后端
    <input type="radio" name="subject" value="web" >web前端
    <input type="radio" name="subject" value="C#" >C#
    <input type="radio" name="subject" value="python">python<br><br>
    期望薪资：
    <input list="money" name="money">
    <datalist id="money">
      <option value="5k以上">
      <option value="8-10k">
      <option value="10k-12k">
      <option value="12-15k">
      <option value="15k以上">
    </datalist>
    <input  type="submit"><br>
    备注：
    <input type="text1" name="beginNum" value="说点什么吧....."   maxlength="1000" size="40" ><br><br>
    <button class="button button1" type="button" onclick="alert('注册成功')" align=center>点击完成注册</button>
    <input class="button button1" type="reset" value="退出">
    </div>
    </form>
    
    </body>
    </html>

如果觉得起到帮助，帮忙一键三连哦~~~

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oeS576K576KLmphdmE_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7c030f96152c4ba3b893ce2fabbb18cd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oeS576K576KLmphdmE=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oeS576K576KLmphdmE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/6bf988cd0bc84f5d94de4413f64b879c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oeS576K576KLmphdmE=,size_20,color_FFFFFF,t_70,g_se,x_16