通过表格的方式将登录格式设置再页面主题内容部分

后通过CSS设置登录表格部分需要的美化设置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录界面</title>
  6.     <link rel="stylesheet" href="style1.css">
  7.     <script type="text/javascript" src="javascript.js"></script>
  8. </head>
  9. <body>
  10.     <div class="header">
  11.         <div class="logo">
  12.             <img src="image/logo.png" alt="">
  13.         </div>
  14.         <div class="menu" onmouseleave="show_menu1()">
  15.             <div class="menu_title" onclick="show_menu()">
  16.                 <a href="#">内容分类</a>
  17.             </div>
  18.             <ul id="menu1">
  19.                 <li>现实主义</li>
  20.                 <li>抽象主义</li>
  21.             </ul>
  22.         </div>
  23.         <div class="auth">
  24.             <ul>
  25.                 <li><a href="youhuadenglu.html">登录</a></li>
  26.                 <li><a href="youhuazhuce.html">注册</a></li>
  27.             </ul>
  28.         </div>
  29.     </div>
  30.     <div class="banner">
  31.         <ul>
  32.             <li class="left">
  33.                     <img src="image/left.png" alt="">
  34.             </li>
  35.             <li class="right">
  36.                 <div class="right-big">
  37.                     <div class="btn">用户登录</div>
  38.                     <div class="ider">
  39.                         <form action="youhua.html" method="get">
  40.                         <table border="0" align="center">
  41.                             <tr>
  42.                                 <td align="left">用户名:</td>
  43.                                 <td>
  44.                                     <input type="text" name="username" id="" class="yonghu">
  45.                                 </td>
  46.                             </tr>
  47.                             <tr>
  48.                                 <td align="left">密码:</td>
  49.                                 <td>
  50.                                     <input type="password" name="" id="" class="yonghu">
  51.                                 </td>
  52.                             </tr>
  53.                             <tr>
  54.                                 <td align="left">验证码:</td>
  55.                                 <td>
  56.                                     <input type="text" name="" id="" class="yanzheng">
  57.                                 </td>
  58.                             </tr>
  59.                         </table>
  60.                         <input type="submit" value="登录" class="denglu">
  61.                     </form>
  62.                     </div>
  63.                 </div>
  64.             </li>
  65.         </ul>
  66.     </div>
  67.     <!-- 页尾部分 -->
  68.     <div class="footer">
  69.         <div class="fuhao">
  70.         <p class="hongse">&#77;&#45;&#72;&#65;&#76;&#76;&#82;&#89;</p><p>&copy;&#50;&#48;&#49;&#55;&nbsp;&#80;&#79;&#87;&#69;&#82;&#69;&#68;&nbsp;&#66;&#89;&nbsp;&#68;&#79;&#68;&#79;&#75;&#69;&#46;&#73;&#78;&#67;</p></div>
  71.     </div>
  72. </body>
  73. </html>