ASCII码 ASCII码

注册效果与简易后台界面演示如何用html代码来写

发布于：2022-07-06 18:30:20  栏目：技术文档

1. 注册页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     .reg{ width: 800px;}
  11.     .reg form{text-align: left;}
  12. </style>
  13. <body>
  14.     <div class="reg">
  15.             <h1>注册表单</h1>
  16.             <form action="reg.php" method="post">
  17.                 <div>
  18.                     <label for="name">名字:</label>
  19.                     <input type="text" name="name" id="name" value=""  placeholder="用户名不能为空,不能少于2个汉字">
  20.                 </div>
  21.                 <div>
  22.                     <label for="pwd">密码:</label>
  23.                     <input type="password" name="pwd" id="pwd" />
  24.                 </div>
  25.                 <div>
  26.                     <label for="rpwd">确认密码:</label>
  27.                     <input type="password" name="rpwd" id="rpwd" />
  28.                 </div>
  29.                 <div>
  30.                     <label for="boy">性别:</label>
  31.                     <input type="radio" name="sex" id="girl"><label for="girl">女</label>
  32.                     <input type="radio" name="sex" id="boy" checked><label for="boy">男</label>
  33.                 </div>
  34.                 <button>注册</button>
  35.             </form>  
  36.     </div>
  37. </body>
  38. </html>

1.1注册页面实际效果图

注册页面实际效果图

2. 建议版本后台

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>后台</title>
  8. </head>
  9. <style>
  10.     h2{text-align: center;}
  11.     .top{border: 1px solid red;  height: 80px;}
  12.     .top div{ text-align: right;line-height: 80px;}
  13.     .content{border: 1px solid yellow;height: 200px;overflow: hidden; }
  14.     .nav,.main{float: left;}
  15.     .nav{width: 10%;}
  16.     .nav li{list-style: none; text-align: left;}
  17.     .main{width: 90%;}
  18.     .footer{text-align: center ; border: 1px solid rebeccapurple;}
  19. </style>
  20. <body>
  21.     <!-- 头部 -->
  22. <div class="top">
  23.             <div>登录名称:name<a href="logout.php">退出</a></div>
  24. </div>
  25.     <!-- 主体 -->
  26.     <div class="content">
  27.             <div class="nav">
  28.                 <h2>导航目录</h2>
  29.                 <ul>
  30.                     <li><a href="0705/demo1.html" target="kc" >演示1</a></li>
  31.                     <li><a href="0705/demo2.html" target="kc" >演示2</a></li>
  32.                     <li><a href="0705/demo3.html" target="kc" >演示3</a></li>
  33.                 </ul>
  34.             </div>
  35.             <div class="main">
  36.                 <iframe src="0705/test.mp4" width="100%" height="200px" name="kc" frameborder="0"></iframe>
  37.             </div>
  38.     </div>
  39.     <!-- 底部 -->
  40.     <div class="footer">版权：后台版权归kira所有</div>
  41. </body>
  42. </html>

2.1 后台效果演示图

后台效果演示图

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行