博主信息
博文 6
粉丝 0
评论 0
访问量 4803
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
php第二天作业:无序排列,表格和表单练习
四爽的博客
原创
705人浏览过

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

实例

<!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>

运行实例 »

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


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学