今天是第四天在中文网学习!
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3月20号作业</title> </head> <body> <table border="0" cellspacing="1" cellpadding="5" width="960"> <tr height=80> <td colspan="2"> <iframe src="inc/top.html" name="top" height="70" width="100%" frameborder="0" scrolling="no"></iframe> </td> </tr> <tr><td width="100%" colspan="2"><hr></td></tr> <tr> <td> <iframe src="inc/left.html" name="left" height="600" width="140" frameborder="0" scrolling="no"></iframe> </td> <td> <iframe src="inc/default.html" name="right" height="600" width="800" frameborder="0" scrolling="no"></iframe> </td> </tr> <tr><td width="100%" colspan="2"><hr></td></tr> <tr> <td colspan="2"> <iframe src="inc/footer.html" name="footer" height="70" width="100%" frameborder="0"></iframe> </td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
代码:
admin.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3月20号作业</title> </head> <body> <table border="0" cellspacing="1" cellpadding="5" width="960"> <tr height=80> <td colspan="2"> <iframe src="inc/top.html" name="top" height="70" width="100%" frameborder="0" scrolling="no"></iframe> </td> </tr> <tr><td width="100%" colspan="2"><hr></td></tr> <tr> <td> <iframe src="inc/left.html" name="left" height="600" width="140" frameborder="0" scrolling="no"></iframe> </td> <td> <iframe src="inc/default.html" name="right" height="600" width="800" frameborder="0" scrolling="no"></iframe> </td> </tr> <tr><td width="100%" colspan="2"><hr></td></tr> <tr> <td colspan="2"> <iframe src="inc/footer.html" name="footer" height="70" width="100%" frameborder="0"></iframe> </td> </tr> </table> </body> </html> top.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>top</title> </head> <body> <table border="0"> <tr> <td valign="middle"><img src="../images/logo1.png" width="40"></td> <td width="650" valign="middel"><h2>天津港一站通系统</h2></td> <td valign="bottom"><p><a href="">admin</a> <a href="">退出</a></p></td> </tr> </table> </body> </html> footer.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>footer</title> </head> <body> <p> <a href="default.html" target="right">网站首页</a> <a>联系方式:15612345678</a> <a>联系地址:天津港码头</a> <a>版权所有:京ICP证000007</a> </p> </body> </html> left.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>left</title> </head> <body> <h4><img src="../images/07.jpg" width="20">计费管理</h4> <ul type="none"> <li><a href="billInforSelect.html" target="right" style="font-size: 14px;">计费信息查询</a></li> </ul> <hr> <h4><img src="../images/05.jpg" width="20">费率管理</h4> <ul type="none"> <li><a href="FeeItemManage.html" target="right" style="font-size:14px;">费收项目管理</a></li> </ul> <hr> <h4><img src="../images/06.jpg" width="20">基础数据管理</h4> <ul type="none"> <li><a href="importManage.html" target="right" style="font-size:14px;">进口舱单更正</a></li> </ul> </body> </html> default.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站首页</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption><h3>系统信息配置表</h3></caption> <tr> <th width="160" bgcolor="lightblue">服务器</th> <td width="400">Apache 2.8.1</td> </tr> <tr> <th bgcolor="lightblue">PHP版本</th> <td>PHP5.6+</td> </tr> <tr> <th bgcolor="lightblue">数据库</th> <td>MySQL 5.7</td> </tr> <tr> <th bgcolor="lightblue">可用磁盘空间</th> <td>395G</td> </tr> <tr> <th bgcolor="lightblue">可用内存</th> <td>3.2G</td> </tr> </table> </body> </html> billInforSelect.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计费信息查询</title> </head> <body> <table border="0" cellspacing="0" cellpadding="5" width="800"> <caption><h3>计费信息查询</h3></caption> <table border="0" cellspacing="0" cellpadding="5" width="80%"> <!-- tr*1>td*4 --> <tr> <td width="80">提单号:</td> <td> <input type="text" name="selectKey"> </td> <td colspan="2"> <input type="submit" name="button" value="检索" style="width: 100px"> </td> </tr> </table> <table height="20"> <tr> <td> </td> </tr> </table> <div style="overflow-x: auto; overflow-y: scroll; width: 657px; text-align: center;"> <table border="1" cellspacing="0" cellpadding="5" width="640"> <thead> <tr bgcolor="lightcyan"> <th>序号</th> <th>中文船名</th> <th>航次</th> <th>提单号</th> <th>结费期</th> <th>总费用</th> <th colspan="2">操作</th> </tr> <tr> <td>01</td> <td>凌云河</td> <td>332N</td> <td>COSU4504894210</td> <td>2016-07-07</td> <td>¥1,400</td> <td> <a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a> <a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a> </td> </tr> <tr> <td>02</td> <td>凌云河</td> <td>332N</td> <td>COSU4504894211</td> <td>2016-07-09</td> <td>¥1,500</td> <td> <a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a> <a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a> </td> </tr> <tr> <td>03</td> <td>凌云河</td> <td>332N</td> <td>COSU4504894212</td> <td>2016-07-07</td> <td>¥1,600</td> <td> <a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a> <a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a> </td> </tr> </tbody> </table> </div> </table> <p> <a href="">首页</a> <a href="">上一页</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">...</a> <a href="">下一页</a> <a href="">尾页</a> </p> </body> </html> <!-- 问题 1.tr*1>td*4没起作用 2.table怎么在div内居中显示 --> FeeItemManage.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>费收项目管理</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="80%"> <caption><h3>费收项目管理</h3></caption> <tr bgcolor="lightcyan"> <th>序号</th> <th>计费业务类型</th> <th>计费项目</th> <th>是否生效</th> </tr> <tr> <td rowspan="3">01</td> <td rowspan="3">进口提箱</td> <td>制冷费</td> <td><input type="checkbox" name=""></td> </tr> <tr> <td>保安费</td> <td><input type="checkbox" name=""></td> </tr> <tr> <td>港建费</td> <td><input type="checkbox" name=""></td> </tr> <tr> <td rowspan="3">02</td> <td rowspan="3">进口查验</td> <td>转栈费</td> <td><input type="checkbox" name=""></td> </tr> <tr> <td>保安费</td> <td><input type="checkbox" name=""></td> </tr> <tr> <td>港建费</td> <td><input type="checkbox" name=""></td> </tr> <tr> <td rowspan="3">03</td> <td rowspan="3">出口查验</td> <td>港务费</td> <td><input type="checkbox" name=""></td> </tr> <tr> <td>保安费</td> <td><input type="checkbox" name=""></td> </tr> <tr> <td>港建费</td> <td><input type="checkbox" name=""></td> </tr> </table> <p> <a href="">首页</a> <a href="">上一页</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">...</a> <a href="">下一页</a> <a href="">尾页</a> </p> </body> </html> importManage.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>进口舱单更正</title> </head> <body> <table border="0" cellspacing="0" cellpadding="5" width="100%"> <caption><h3>进口舱单更正</h3></caption> <table> <tr> <td width="20%">箱号:</td> <td> <input type="text" name="selectKey"> </td> <td colspan="2" width="59%"> <input type="submit" name="button" value="提单号筛选" style="width: 100px"> </td> </tr> </table> <table height="20"> <tr> <td> </td> </tr> </table> <table border="1" cellspacing="0" cellpadding="5" width="80%"> <tr bgcolor="lightcyan"> <th>序号</th> <th>箱号</th> <th>提单号</th> <th>添加操作</th> <th colspan="2">更新操作</th> </tr> <tr> <td rowspan="2">01</td> <td rowspan="2">TEMU29938883</td> <td>GFFF4455656444</td> <td rowspan="2"> <a href=""><img src="../images/06.jpg" width="40"></a> </td> <td> <a href=""><img src="../images/edit.jpg" width="20"></a> <a href=""><img src="../images/del.jpg" width="20"></a> </td> </tr> <tr> <td>GFFF4455656448</td> <td> <a href=""><img src="../images/edit.jpg" width="20"></a> <a href=""><img src="../images/del.jpg" width="20"></a> </td> </tr> <tr> <td rowspan="2">02</td> <td rowspan="2">TEMU29938885</td> <td>GFFF4455656450</td> <td rowspan="2"> <a href=""><img src="../images/06.jpg" width="40"></a> </td> <td> <a href=""><img src="../images/edit.jpg" width="20"></a> <a href=""><img src="../images/del.jpg" width="20"></a> </td> </tr> <tr> <td>GFFF4455656550</td> <td> <a href=""><img src="../images/edit.jpg" width="20"></a> <a href=""><img src="../images/del.jpg" width="20"></a> </td> </tr> <tr> <td rowspan="2">03</td> <td rowspan="2">TEMU29938900</td> <td>GFFF4455658650</td> <td rowspan="2"> <a href=""><img src="../images/06.jpg" width="40"></a> </td> <td> <a href=""><img src="../images/edit.jpg" width="20"></a> <a href=""><img src="../images/del.jpg" width="20"></a> </td> </tr> <tr> <td>GFFF4455658653</td> <td> <a href=""><img src="../images/edit.jpg" width="20"></a> <a href=""><img src="../images/del.jpg" width="20"></a> </td> </tr> </table> </table> </body> </html>
手写代码: