Web小练习01

罪恶克星  金牌会员 | 2025-1-20 00:20:34 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 855|帖子 855|积分 2565

#制作浅易网页#
本章包括主页、注册页面、登岸页面
主页

1.1主页代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>主页</title>
  7.     <style>
  8.         html,body{
  9.             background: linear-gradient(20deg,rgb(141, 180, 211),rgb(207, 155, 209));
  10.             }
  11.     </style>
  12. </head>
  13. <body>
  14.     <h1 align="center">主页</h1>
  15.     <hr>
  16.     <p>
  17.         <a href="login.html" target="_blank">登录</a>
  18.     </p>
  19.    
  20.     <p>
  21.         <a href="register.html" target="_blank">注册</a>
  22.     </p>
  23.    
  24. </body>
  25. </html>
复制代码
1.2 展示


注册页面

2.1 注册页面代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>注册页面</title>
  7.     <style>
  8.         html,body{
  9.             height:100%;
  10.             width:100%;
  11.             background: linear-gradient(20deg,rgb(148,207,255),rgb(253,200,255));
  12.             display: flex;
  13.             justify-content: center;
  14.             align-items: center;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <form method="get" action="index.html">
  20.         <table width="500" border="0" cellpadding="10" align="center" bgcolor="pink">
  21.         <tr align="center">
  22.             <td colspan="2">
  23.                 会员登录
  24.             </td>
  25.         </tr>
  27.         <tr align="center">
  28.             <td align="right">
  29.                 <label for="zhanghao">
  30.                     账号：
  31.                 </label>
  32.             </td>
  34.             <td>
  35.                 <input type="text" id="zhanghao" placeholder="请输入账号"/>
  36.             </td>
  37.         </tr>
  39.         <tr align="center">
  40.             <td align="right">
  41.                 <label for="mima">
  42.                     密码：
  43.                 </label>
  44.             </td>
  45.             <td >
  46.                 <input type="password" id="miman" placeholder="请输入密码">
  47.             </td>
  48.         </tr>
  49.         <tr>
  50.             <td colspan="2" height="50" align="center">
  51.                 <input type="submit" value="登录" />
  52.                 <input type="reset" value="重置" />
  53.             </td>
  54.         </tr>
  56.         </table>
  59.     </form>
  62.    
  63. </body>
  64. </html>
复制代码
2.2 展示


登岸页面

3.1 登岸页面代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>登陆页面</title>
  7.     <style>
  8.         html,body{
  9.             height:100%;
  10.             width:100%;
  11.             background: linear-gradient(20deg,rgb(148,207,255),rgb(253,200,255));
  12.             display: flex;
  13.             justify-content: center;
  14.             align-items: center;
  15.         }
  16.     </style>
  18. </head>
  19. <body>
  20.     <form method="get" action="login.html">
  22.         <table border="0" width="650" align="center" cellspacing="0" celladding="10" bgcolor="#9E7AC0">
  23.             <caption align="center" style="text-align: center;">
  24.                 <font size="8">注册</font>
  25.             </caption>
  27.             <tr>
  28.                 <td colspan="2">注册</td>
  29.             </tr>
  31.             <tr align="center">
  32.                 <td align="right"><label for="yonghuming">用户名：</label></td>
  33.                 <td><input type="text" id="yonghuming" placeholder="请输入用户名"/></td>
  34.             </tr>
  36.             <tr align="center">
  37.                 <td align="right"><label for="zhanghao">账号：</label></td>
  38.                 <td><input type="text" id="zhanghao" placeholder="请输入账号"/></td>
  39.             </tr>
  41.             <tr align="center">
  42.                 <td align="right"><label for="mima">密码：</label></td>
  43.                 <td ><input type="password" id="mima" placeholder="请输入密码"></td>
  44.             </tr>
  46.             <tr align="center">
  47.                 <td align="right"><label for="miman">再次输入密码：</label></td>
  48.                 <td ><input type="password" id="miman" placeholder="请再次输入密码"></td>
  49.             </tr>
  51.             <tr>
  52.                 <td colspan="2" height="50" align="center">
  53.                     <input type="submit" value="注册" />
  54.                     <input type="reset" value="重置" />
  55.                 </td>
  56.             </tr>
  59.         </table>
  60.     </form>
  61.    
  62. </body>
  64. </html>
复制代码
3.2 展示



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

罪恶克星

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表