zoukankan      html  css  js  c++  java
  • HTML个人网页的实现

    效果如下:(背景图来源于百度百科,若有侵权,请联系删除)

    代码如下:

    first.html

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>个人网页</title>
     6     
     7     <style>
     8         .biaoge{
     9             position: absolute;
    10             bottom: 265px;
    11             width: 100%;
    12             height: 100px;
    13             text-align:center;
    14         }
    15     </style>
    16     
    17     <!--    a:link,定义正常链接的样式; 
    18             a:visited,定义已访问过链接的样式; 
    19             a:hover,定义鼠标悬浮在链接上时的样式; 
    20             a:active,定义鼠标点击链接时的样式。     -->
    21     <style>
    22         a:link { 
    23             color:#FFFFFF; 
    24             font-size: 28px;
    25             text-decoration:none; 
    26         } 
    27         a:visited { 
    28             color:#FFFFFF; 
    29             text-decoration:none; 
    30         } 
    31         a:hover { 
    32             color:#000000; 
    33             text-decoration:none; 
    34         } 
    35         a:active { 
    36             color:#FFAEB9; 
    37             text-decoration:none; 
    38         } 
    39     </style>
    40     
    41 </head>
    42 <body background="background.jpg" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;">
    43 <h1 style="text-align:center;padding-top: 100px">个人网页</h1>
    44 <div class="biaoge">
    45     <table align="center">
    46         <tr>
    47             <td><a href="../实验一/Submit_Form.html">提交注册</a></td>
    48         </tr>
    49         <tr>
    50             <td><a href="http://www.baidu.com">百度</a></td>
    51         </tr>
    52         <tr>
    53             <td><a href="https://www.bilibili.com/">哔哩哔哩</a></td>
    54         </tr>
    55     </table>
    56 </div>
    57 </body>
    58 </html>

    Submit_Form.html

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>表单提交</title>
     6 </head>
     7 <body background="background.jpg" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;">
     8 <style type="text/css">
     9     .mytable{
    10         width:500px;
    11         height:500px;
    12         margin:0 auto;
    13     }
    14 </style>
    15      <table border="1px" class="mytable" width="500px" height="300px" cellpadding="0px" cellspacing="0px" align="center">
    16     <!-- 10行3列  -->
    17         <tr>
    18             <td colspan='3' align="center" style="color:red;">注册</td>
    19         </tr>
    20         <tr>
    21             <td width="33.3%" align="center">用户名</td>
    22             <td colspan="2"><input type="text" name="name" id="name" ></td>
    23         </tr>
    24         <tr>
    25             <td width="33.3%" align="center">头像</td>
    26             <td colspan="2"><input type="file"></td>
    27         </tr>
    28         <tr>
    29             <td width="33.3%" align="center">密码</td>
    30             <td colspan="2"><input type="password" name="password" id="password"></td>
    31         </tr>
    32         <tr>
    33             <td width="33.3%" align="center">性别</td>
    34             <td colspan='2'>
    35                 <input type="radio" name="sex" value="男" checked="checked">36                 <input type="radio" name="sex" value="女">37             </td>
    38         </tr>
    39         <tr>
    40             <td width="33.3%" align="center">生日</td>
    41             <td colspan='2'>
    42                 <select name="birth" id="birth">
    43                     <option value="1">1月</option>
    44                     <option value="2">2月</option>
    45                     <option value="3">3月</option>
    46                     <option value="4">4月</option>
    47                     <option value="5">5月</option>
    48                     <option value="6">6月</option>
    49                     <option value="7">7月</option>
    50                     <option value="8">8月</option>
    51                     <option value="9">9月</option>
    52                     <option value="10">10月</option>
    53                     <option value="11">11月</option>
    54                     <option value="12">12月</option>
    55                 </select>
    56             </td>
    57         </tr>
    58         <tr>
    59             <td width="33.3%" align="center">出生日期</td>
    60             <td colspan="2"><input type="text" name="birth" id="birth"></td>
    61         </tr>
    62         <tr>
    63             <td width="33.3%" align="center">电话</td>
    64             <td colspan="2"><input type="text" name="phone" id="phone" ></td>
    65         </tr>
    66         <tr>
    67             <td width="33.3%" align="center">邮箱</td>
    68             <td colspan="2"><input type="text" name="email" id="email" ></td>
    69         </tr>
    70         <tr>
    71             <td colspan='3' align="center">
    72                 <a href="../实验一/first.html">
    73                     <input type="button" value="提交" />
    74                 </a>
    75                 <input type="reset" value="重置" />
    76             </td>
    77         </tr>
    78     </table>
    79 </body>
    80 </html>
  • 相关阅读:
    第十四周总结
    《走出软件作坊》读后感
    航空公司信息可视化
    周总结
    REDIS实验
    第二阶段个人总结07
    第二阶段个人总结06
    第二阶段个人总结05
    第二阶段个人总结04
    第二阶段个人总结03
  • 原文地址:https://www.cnblogs.com/miao-com/p/14708995.html
Copyright © 2011-2022 走看看