Blogger Information
Blog 6
fans 0
comment 0
visits 3795
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
php第二天作业:无序排列,表格和表单练习
四爽的博客
Original
518 people have browsed it

无序排列,表格和表单练习。表格的表头、表内容和表脚应合理分开。注意表单类型的使用。

实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sishuang--homework(2)</title>
</head>
<style>
  *{padding: 0; }
  ul,li{list-style: none; line-height: 30px}
  h3{padding: 4px; margin: 0 }
  a{text-decoration:none; color: #333}
  a:hover{text-decoration: underline}
  table th,table td{text-align:center}
  table caption { line-height: 40px; font-weight: bold}
  button{cursor: pointer; padding: 2px}
</style>

<body>
  
   
  <h3>时政新闻</h3>
  <ul>
     <li><a href="#">上海人均GDP超过2万美元 达到上中等发达国家水平</a></li>
     <li><a href="#">美国***片商说服特朗普放宽华为禁令 只采取“针对性行动”</a></li>
     <li><a href="#">“中国神船”要来了!南北船合并获确认,市值飙升超200亿</a></li>
     <li><a href="#">督导组赴酒店抓涉黑分子 敲错门发现公安局长等3人聚赌</a></li>
     <li><a href="#">美国拟对40亿美元欧盟输美商品加征更多关税</a></li>
  </ul>
   
  <br/><br/><br/>
  
  
  
  <table border="1" cellpadding="0" cellspacing="0">
     <caption>学生档案</caption>
      <thead>
         <tr>
            <th width="40">序号</th>
            <th width="60">姓名</th>
            <th width="60">性别</th>
            <th width="60">课程</th>
            <th width="70">分数</th>
        </tr>  
     </thead>
     <tbody>
         <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>数学</td>
            <td>100</td>
        </tr>
          <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>语文</td>
            <td>76</td>
        </tr> 
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>男</td>
            <td>数学</td>
            <td>100</td>
        </tr>
     </tbody>
     <tfoot>
         <tr>
            <td colspan="4">所有学生分数总分</td>
            
            <td>276</td>
        </tr>
     </tfoot>
  </table>
  
  <br/><br/><br/>
  
  <h3>表单</h3>
  <form id="form1" action="#" method="POST">
      <p>
        <label for="username">用户名:</label>
         <input type="text" name="username" id="username" placeholder="至少输入8个字节" required />
     </p>
     <p>
         <label for="pwd">密   码:</label>
         <input type="password" name="pwd" id="pwd" placeholder="字母加数字的8个字节组合" required />
     </p>
      <p>
         <label for="email1">邮   箱:</label>
         <input type="email" name="email1" id="email1" placeholder="XXX@XXX.XXX"  />
     </p>
      <p>
         <label for="birthday">生   日:</label>
         <input type="date" name="birthday" id="birthday" />
     </p>
      <p>
         <label for="age">年龄:</label>
        <input type="number" min="10" max="99"  id="age" name="age" />
     </p>
     
     <p>
         <label for="like">爱好:</label>
         <input type="checkbox" id="php" name="like" />
        <label for="php">php</label>
         <input type="checkbox" id="java" name="like" />
        <label for="java">java</label>
        <input type="checkbox" id="javascript" name="like" />
        <label for="javascript">javascript</label>
        
     </p>
     
     <p>
         <label for="sex">性别:</label>
         <input type="radio" id="male" name="sex" />
        <label for="male">男</label>
         <input type="radio" id="female" name="sex" />
        <label for="female">女</label>
        <input type="radio" id="herm" name="sex" />
        <label for="herm">人妖</label>
     
     </p>
     
     <p>
        <h5>下拉框</h5>
        <select name="select1" id="select">
           <optgroup label="fore">
              <option value="HTML" selected>HTML</option>
              <option value="javascript">javascript</option>
           </optgroup>
           <optgroup label="back">
              <option value="PHP">PHP</option>
              <option value="JAVA">JAVA</option>

           </optgroup>
        </select>

     </p>
     
     <p>
        <label for="info">简介:</label><br/>
         <textarea rows="10" cols="40" id="info" name="info" ></textarea>
     </p>
      <p>
         <button type="submit">submit</button>  
        <button type="reset" >reset</button>  
        <button type="button">Ajax</button>
     </p>
  </form>
  
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post