4月23日作业
完成表格的跨行合并功能
独立完成一个用户注册表单
制作一个简易的后台首页
#########################################
表格的跨行跨列合并功能
使用的到的标签
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
实例
<table border="1px" cellspacing="0" cellpadding="2"> <caption>购物车</caption> <thead> <tr> <th>序号</th> <th>名称</th> <th>类型</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>有备无患的奔驰专用机油</td> <td>汽车</td> <td> 800元</td> <td>1个</td> <td>800元</td> </tr> <tr> <td>2</td> <td>能看清鞋子的京东摄像头</td> <td rowspan="2">电子科技</td> <td>150元</td> <td>2个</td> <td>300元</td> </tr> <tr> <td>3</td> <td>带暖手宝功能的笔记本电脑</td> <td>4500元</td> <td>2个</td> <td>9000元</td> </tr> <tr> <td colspan="4">合计</td> <td>5</td> <td>10200</td> </tr> </tbody> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
重点：跨列合并 td标签的 colspan属性 值为需要合并的单元格数量 向右合并
跨行合并 td标签的 rowspan属性 值为合并单元格数量 向下合并
用户注册表单
实例
<form action="" align="center" method="POST"> <h2 style="color: #2aabd2">新用户注册</h2> <p> <label for="username">用户名：</label> <input type="text" name="username" id="username" placeholder="请输入6-12位的字母与数字组合"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入6-14位包含大、小写字母及数字"> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="example@mail.com"> </p> <P> <label for="secrecy">性别</label> <input type="radio" name="gender" id="male" value="male"><label for="male">男生</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女生</label> <input type="radio" name="gender" id="secrecy" value="secrecy"><label for="secrecy">保密</label> </P> <p> <label for="course">课程</label> <select name="course" id="course"> <option value="1">HTML</option> <option value="2">CSS</option> <option value="3">Javascript</option> <option value="4">PHP</option> <option value="5">ThinkPHP</option> </select> </p> <P> <button>保存</button> <input type="reset" name="reset" value="重置"> <button style="reset">重置1</button> </P> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
简易的后台首页
重点
<a>标签的 target属性 用于设置新窗口打开的位置 并与<iframe>标签的name属性值进行绑定
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户管理后台</title> </head> <body> <h1 style="line-height: 60px">用户管理后台</h1> <hr color="red"> <!-- 偷了个懒所有的链接全部是搜索引擎--> <ul style="float: left; margin-top: 50px"> <li><a href="http://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> <li><a href="https://cn.bing.com" target="main">系统管理</a></li> </ul> <iframe srcdoc="<h3>用户管理后台</h3>" height="600px" width="80%" name="main" style="float: left;margin-left:40px;margin-top: 50px" ></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
