Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格/表单
Blogger Information
Blog 10
fans 1
comment 0
visits 9014
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格/表单
枫的博客
Original
644 people have browsed it

  1. 完成表格的跨行合并功能

<!DOCTYPE html>
<html>
<head>
	<title>表格作业demo</title>
	<meta charset="utf-8">
	<style>
		table{border-collapse: collapse;text-align: center;}
		tr{height: 40px}
		caption{font-weight: bold;margin-bottom: 10px;font-size: 18px}
	</style>
</head>
<body>
	<table border="1">
		<caption>中美MBA报名表</caption>
		<tbody>
			<tr>
				<td style="width: 70px">姓名</td>
				<td style="width: 100px"></td>
				<td style="width: 60px">性别</td>
				<td style="width: 70px"></td>
				<td colspan="2">出生日期</td>
				<td colspan="2"></td>
				<td rowspan="4" style="width: 117px">照片</td>
			</tr>
			<tr>
				<td>家庭住址</td>
				<td colspan="3"></td>
				<td>邮编</td>
				<td></td>
				<td style="width: 80px">家庭电话</td>
				<td style="width: 70px"></td>
			</tr>
			<tr>
				<td>办公住址</td>
				<td colspan="3"></td>
				<td style="width: 60px">邮编</td>
				<td style="width: 100px"></td>
				<td>办公电话</td>
				<td></td>
			</tr>
			<tr>
				<td>工作单位</td>
				<td colspan="3"></td>
				<td>行业</td>
				<td></td>
				<td>企业性质</td>
				<td></td>
			</tr>
			<tr>
				<td>所在部位</td>
				<td ></td>
				<td style="display: inline-block;height: 40px">职务</td>
				<td ></td>
				<td>手机</td>
				<td></td>
				<td>E-mail</td>
				<td colspan="2"></td>
			</tr>
		</tbody>
	</table>
	

</body>
</html>

   2. 独立完成一个用户注册表单

<!DOCTYPE html>
<html>
<head>
   <title>用户注册</title>
   <meta charset="utf-8">
   <style type="text/css">
      .main{width: 600px;background: #ccc}
      .left{width: 260px;background: lightblue;float: left;}
      .left input{float: right;}
      .right{width: 300px;background: lightyellow;float: right;}
      .right input{float: right;}
   </style>
</head>
<body>
   <div class="main">
      <p>
         <label for="username">用户名：</label>
         <input type="text" name="" id="username">
      </p>

      <div class="left">
      <p>
         <label for="password">密码：</label>
         <input type="password" name="" id="password">
      </p>

      <p>
         <label for="confirmCode">确认密码：</label>
         <input type="password" name="" id="confirmCode">
      </p>
      
      <p>
         <label>证件类型：</label>
         <select style="width: 171px;border: 0;margin-left: 3px">
            <option>***</option>
            <option>户口本</option>
            <option>驾驶证</option>
         </select>
      </p>

      <p>
         <label>证件号码：</label>
         <input type="" name="">
      </p>

      <p>
         <label>联系号码：</label>
         <input type="" name="">
      </p>

      <p>
         <label>手机号码：</label>
         <input type="" name="">
      </p>

      <p>
         <label>E-mail：</label>
         <input type="" name="">
      </p>
      </div>

      <div class="right">
         <p>
            <label for="turename">真实姓名：</label>
            <input type="text" name="" id="turename">
         </p>

         <p>
            <label>性别：</label>
            <select style="float: right;width: 173px">
               <option>男</option>
               <option>女</option>
               <option>保密</option>
            </select>
         </p>

         <p>
            <label>出生日期:</label>
            <input type="" name="">
         </p>

         <p>
            <label>国家：</label>
            <input type="" name="">
         </p>

         <p>
            <label>城市：</label>
            <input type="" name="">
         </p>

         <p>
            <label>邮箱：</label>
            <input type="" name="">
         </p>
      </div>
      <p style="clear: both;">
         <label>联系地址</label>
         <input type="" name="">
      </p>

      <button>重置</button>
      <button>注册</button>
   </div>
</body>
</html>

   3. 制作一个简易的后台首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单后台首页</title>
</head>
<body>
<ul style="float: left">
    <li><a href="https://www.baidu.com/" target="main">百度</a></li>
    <li><a href="https://www.so.com/" target="main">搜狐</a></li>
    <li><a href="https://www.sogou.com/" target="main">搜狗</a></li>
</ul>
    <iframe src="" frameborder="1" name="main" height="600px" width="800px" style="float: left"></iframe>
</body>
</html>


Correction status：Uncorrected

Teacher's comments：
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