暑假第十六记（HTML 用户注册第二弹）

最新推荐文章于 2024-09-04 23:24:54 发布

Yin yingying

最新推荐文章于 2024-09-04 23:24:54 发布

阅读量734

点赞数 1

文章标签： html servlet java

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_69237245/article/details/126409392

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>用户注册</title>
       <style>
           * {
               padding: 0;
               margin: 0;
           }

           body {
               background-image: url(图片合计/背景.jpg);
               background-repeat: no-repeat;
               background-size: 100%;
           }

           #a {
               height: 20px;
               /* background-color: #30ADFA; */
               font-size: 25px;
               margin-top: 10px;
               font-family: "宋体";
               color: white;
               box-shadow: 0px 2px 5px #aa;
           }

           #a ul {
               /* 弹性布局容器 /
               display: flex;
               / 子元素居中放置 */
               justify-content: center;
               list-style: none;

}

           #a ul li {
               width: 180px;
               height: 60px;
               text-align: center;
               line-height: 60px;
           }

           #a ul li a {
               text-decoration: none;
               color: purple;
           }

           #a ul li a:hover {
               background-color: white;
               color: #000000;
               box-shadow: 0px 4px 4px palegreen;
               /* border-bottom: 4px solid #000000; */
           }

           #main {
               width: 1024px;
               height: 600px;
               border-radius: 10px;
               background-color: white;
               margin: 60px auto;
               box-shadow: 3px 3px 10px #aaa;
               display: flex;
               justify-content: space-between;
           }

           #d {
               flex: 1;
               position: relative;
           }

           img {
               display: block;
               width: 300px;
               position: absolute;
           }

           .img1 {
               top: 250px;
               left: 30px;
               box-shadow: 3px 3px 10px #aaa;
               z-index: 3;
           }

           .img2 {
               top: 180px;
               left: 110px;
               box-shadow: 3px 3px 10px #aaa;
               z-index: 2;
           }

           .img3 {
               top: 100px;
               height: 180px;
               box-shadow: 3px 3px 10px #aaa;
               left: 150px;
               z-index: 1;
           }

form {

               flex: 1;
               /* background-color: #000080; */
               padding: 20px;
               color: black;
           }

           .img4 {
               width: 50px;
               height: 50px;
           }

           #n {
               margin-top: 20px;
               text-align: right;
           }

           #n a {
               /* top: 100px; */
               color: greenyellow;
               text-decoration: none;
           }

           #g {
               font-size: 25px;
               margin-top: 50px;
           }

           table {
               width: 400px;
               margin: 10px auto;
           }

           td {
               height: 40px;
           }

           .input {
               height: 30px;
               width: 200px;
               ;
               padding-left: 10px;
               background-color: white;
               border: 1px solid green;
               border-radius: 15px;
           }

           .center {
               text-align: center;
           }

           .submit {
               width: 150px;
               height: 40px;
               text-align: center;
               line-height: 30px;
               background-color: greenyellow;
               border-radius: 15px;
               border: none;
           }

           .kuan {
               width: 100px;
           }
       </style>
   </head>
   <body>
       <div id="a">
           <ul>
               <li><a href="#">主页</a></li>
               <li><a href="#">列表</a></li>
               <li><a href="#">发展史</a></li>
               <li><a href="#">关于我们</a></li>
           </ul>
       </div>
       <div id="main">
           <div id="d">
               <img class="img1" src="图片合计/第二张.jpg">
               <img class="img2" src="图片合计/第一张.jpg">
               <img class="img3" src="图片合计/第三张.jpg">
           </div>
           <form>
               <div id="g">
                   <img class="img4" src="555534.jpg" align="center">
                               注  册
               </div>
               <div id="n">
                   已经注册？<a href="#">请登录</a>
               </div>
               <hr>
               <table>
                   <tr>
                       <td class="kuan">手机号：</td>
                       <td><input class="input" type="phone" placeholder="请输入手机号"></td>
                   </tr>
                   <tr>
                       <td>密码：</td>
                       <td><input class="input" type="password" placeholder="请输入密码"></td>
                   </tr>
                   <tr>
                       <td>邮箱：</td>
                       <td><input class="input" type="email" placeholder="请输入邮箱"></td>
                   </tr>
                   <tr>
                       <td>生日：</td>
                       <td><input class="input" type="date" placeholder="请输入生日"></td>
                   </tr>
                   <tr>
                       <td>爱好：</td>
                       <td><input type="checkbox">篮球      
                           <input type="checkbox">足球      
                           <input
                               type="checkbox">排球                  
                           <input type="checkbox">羽毛球    
                           <input type="checkbox">乒乓球      
                           <input type="checkbox">网球      
                       </td>
                   </tr>
                   </tr>
                   <tr>
                       <td>验证码：</td>
                       <td><input class="input" type="text" placeholder="请输入验证码"> <input type="submit" value="发送验证码">
                       </td>
                   </tr>
                   </tr>
                   <tr>
                       <td class="center" colspan="2"><input type="checkbox" checked=""> 我已阅读并且遵守<a
                               href="#">《考试规范协议》</a></td>
                   </tr>
                   </tr>
                   <tr>
                       <td class="center" colspan="2"><input class="submit" type="submit" value="注册"></td>
                   </tr>

               </table>
           </form>
       </div>
   </body>
</html>

代码中的图片需要自己找然后复制地址填上去，也可以将图片保存下来然后填上路径

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
暑假第十六记（HTML 用户注册第二弹）

用户注册界面
复制链接

扫一扫

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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