登录  /  注册
博主信息
博文 10
粉丝 0
评论 0
访问量 7398
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
表格的跨行合并、独立完成用户注册表格、制作一个简单的后台管理页面;4-23课后作业
李男_江苏_412288
原创
667人浏览过

完成表格的跨行合并功能

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
     <table border="1" cellspacing="0" width="600">
		<!--caption:表头-->
		 <caption><b>购物车</b></caption>
		 <thead>
             <tr bgcolor="#87ceeb">
			 <th height="30">编号</th>
			 <th>名称</th>
			 <th>单价</th>
			 <th>数量</th>
			 <th>金额</th>
			 <th>分类</th>
			 </tr>
		 </thead>
		 <tbody align="center">
		    <tr>
			 <td width="50" height="28">1</td>
			 <td width="200">有备无患的奔驰专用机油</td>
			 <td width="70">800</td>
			 <td width="50">1</td>
			 <td width="80">800</td>
				<td width="80">汽车</td>
		 </tr>
		 <tr>
			 <td height="28">2</td>
			 <td>能看清鞋子的京东摄像头</td>
			 <td>150</td>
			 <td>2</td>
			 <td>300</td>
			 <!--rowspan合并行-->
			 <td rowspan="2">数码</td>
		 </tr>
		 <tr>
			 <td height="28">3</td>
			 <td>带暖手宝功能的笔记本电脑</td>
			 <td>4500</td>
			 <td>2</td>
			 <td>9000</td>
		    </tr>
		 </tbody>
		 <tfoot align="center">
		 <tr>
			 <!--colspan合并列-->
			 <td colspan="3" height="28">合计</td>
			 <td>5</td>
			 <td>11000</td>
			 <td></td>
		 </tr>
		 </tfoot>
	 </table>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>加油</title>
   </head>
<body>
<!--form必须带的两个属性标签:action、method-->
   <form action="" method="get">
       <h1>调查表</h1>
       <label for="username">账号:</label>
       <input type="text" name="username" id="username" autofocus>
       <br>
       <br>
       <label for="password">密码:</label>
       <input type="password" name="password" id="password" >
       <br>
       <br>
       <!--label for="femal" 可以达到效果:当用户点击性别时,自动跳到女那个选项,checked是默认选择这个选项的意思-->
       <label for="femal">性别:</label>
       <input type="radio" name="sex" id="male" value="male">男
       <input type="radio" name="sex" id="femal" value="femal">女
       <input type="radio" name="sex" id="secrety" value="secrety" checked>保密
       <br>
       <br>
       <!--label引用的id里的值,name可以设置成数组标签,label的效果就是点这个字,然后选上这个框,实现字和框绑定-->
       <label for="daima">爱好:</label>
       <input type="checkbox" name="hobby[]" id="youyong" value="youyong"><label for="youyong">游泳</label>
       <input type="checkbox" name="hobby[]" id="paobu" value="paobu"><label for="paobu">跑步</label>
       <input type="checkbox" name="hobby[]" id="daima" value="daima"><label for="daima">代码</label>
       <input type="checkbox" name="hobby[]" id="qiche" value="qiche" checked><label for="qiche">游泳</label>
       <br>
       <br>
       <label for="xingzuo">星座:</label>
       <!--select标签的默认属性标签是selected,-->
       <!--select标签的那么标签是在select标签里,name的值是在option标签里-->
       <select name="xingzuo" id="xingzuo">
           <!--当value值为空时,不选择-->
           <option value="">请选择</option>
           <!--当值较多时,可以用optgroup分组标签-->
           <!--optgroup需要带label标签-->
           <optgroup label="好的">
               <option value="shuiping">水瓶</option>
               <option value="juxie">巨蟹</option>
               <option value="tianxie">天蝎</option></optgroup>
           <optgroup label="坏的">
               <option value="mojie">摩羯</option>
               <option value="tianchen">天秤</option></optgroup>
       </select>
       <br>
       <br>
       <button type="submit" value="submit">提交</button>
       <button type="reset" value="reset">重置</button>
   </form>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>加油2</title>
</head>
<body>
<h2>管理</h2>
<!--ul无序列表,ol有序列表-->
<ul>
    <!--target,让目标在哪里显示,可以自定义-->
    <li><a href="http://www.baidu.com" id="baidu" target="chizhi">百度</a></li>
    <li><a href="http://www.sogou.com" id="sogou" target="chizhi">搜狗</a></li>
    <li><a href="http://www.so.com" id="360" target="chizhi">360</a></li>
</ul>
<!--srcdoc本地链接,会让字出现在画中画中-->
<iframe srcdoc="<h2>管理</h2>" frameborder="1" width="500" height="450" id="dizhi" name="chizhi"></iframe>
<!--span是放在文字内的元素-->
<p>我的朋友是<span style="color: red">二狗</span></p>
</body>
</html>

运行实例 »

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



批改状态:未批改

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

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

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