尝试只用table标签来模仿一个静态页面，这样做可以很好的增加对网页结构理解。
要尝试模仿的页面如下：
附上我自己写的代码，因为只是用了HTML，没有用到CSS和js，所以有些样式写出来和原图有些出入
<!DOCTYPE html>
<html>
<head>
<title>只用table来模仿一个网页</title>
<meta charset="utf-8">
</head>
<body>
<!-- 需要注意代码的可读性，即要对齐；其次是注意语义化 -->
<!-- 先暂时把border设置为“1”，这样有利于观察显示效果，在最后需要把它设置为“0” -->
<!-- 把整个网页设置为两个表格，第一个表格用来放置页首图，第二个表格用来放置网页内容 -->
<!-- 第二个表格有多个大的行，要做好标记 -->
<table><!-- the first table,放置页首图片 -->
<tr>
<td>
<img src="./img/images/目标_01.gif" title="页首" alt="我们的联系方式">
</td>
</tr>
</table>
<table border="0" style="margin:0 auto;" width="960px"> <!-- the second table -->
<tr><!-- 第1大行 -->
<!-- 第1大行里面需要再嵌套一个表格，这个表格有1行，5列 -->
<td ><!-- 这个表格只能嵌套在<td>里面 -->
<table border="0" width="600px" height="80px" style="margin-left:195;">
<!-- ???如何让这个表格距离窗口左侧195px -->
<tr>
<td align="center"><a href="">首页</a></td>
<td align="center"><a href="">关于利牛</a></td>
<td align="center"><a href="">行业资讯</a></td>
<td align="center"><a href="">主要业务</a></td>
<td align="center"><a href="">安全保障</a></td>
</tr>
</table>
</td>
</tr>
<tr><!-- 第2大行 -->
<td>
<img src="./img/images/目标_04.gif">
</td>
</tr>
<tr><!-- 第3大行 -->
<td height="42px">
</td>
</tr>
<tr><!-- 第4大行 -->
<td><!-- 这一行需要再嵌套一个表格 -->
<table border="0" ><!-- 这个表格有1行6列，放入图片和文字 -->
<tr>
<td>
<img src="./img/images/目标_08.gif">
</td>
<td width="280px">
<h3>稳定高收益</h3>
<p>40倍银行活期存款利息<br>100元起投，交易0手续费</p>
</td>
<td>
<img src="./img/images/目标_10.gif">
</td>
<td width="255px">
<h3>安全严保障</h3>
<p>本息保障、风控审核贷<br>后管理</p>
</td>
<td>
<img src="./img/images/目标_12.gif">
</td>
<td width="172px">
<h3>便捷优服务</h3>
<p>24小时放款，提前还款减免费用</p>
</td>
</tr>
</table>
</td>
</tr>
<tr><!-- 第5大行 -->
<td height="140px">
<p align="center"><strong>主要业务</strong>/ PRODUCTS SERVICES</p>
</td>
</tr>
<tr><!-- 第6大行,这一行内嵌1个表，表分为4列3行 -->
<td>
<table>
<tr>
<td><img src="./img/images/目标_17.gif"></td>
<td><img src="./img/images/目标_19.gif"></td>
<td><img src="./img/images/目标_21.gif"></td>
<td><img src="./img/images/目标_23.gif"></td>
</tr>
<tr>
<td>
<h3 style="color: red">投资业务</h3>
<p>证券投资业务，指银行购买有价证券的活动。</p>
</td>
<td>
<h3 style="color: red">理财增值</h3>
<p>通过发行基金单位，集中投资者的资用金，由基金管理人管理和运基金。</p>
</td>
<td>
<h3 style="color: red">信托服务</h3>
<p>信托服务建立了以项目为中心，以风险贯穿其间的业务运作平台。</p>
</td>
<td>
<h3 style="color: red">产品代理</h3>
<p>通过代理的形式，推广和买卖产品是产品的一种交易和流通方式。</p>
</td>
</tr>
<tr>
<td><img src="./img/images/立即咨询.jpg"></td>
<td><img src="./img/images/立即咨询.jpg"></td>
<td><img src="./img/images/立即咨询.jpg"></td>
<td><img src="./img/images/立即咨询.jpg"></td>
</tr>
</table>
</td>
</tr>
<tr height="60px"></tr><!-- 第7大行，设置行高为70px-->
<tr><!-- 第8大行-->
<td>
<img src="./img/images/目标_29.gif">
</td>
</tr>
<tr><!-- 第9大行,设置行高为60px-->
<td height="70px">
</td>
</tr>
<tr ><!-- 第10大行，在这一行里嵌套一个表，这个表分为两列，左侧一列再嵌套一个表，放置图片。右侧一列嵌套一个表，放置右侧的内容-->
<td>
<table >
<tr>
<td>
<table border="0" ><!-- 这个是左侧的table -->
<tr>
<td colspan="2" >
<h3>新闻资讯/ NEWS</h3>
</td>
</tr>
<tr>
<td align="center"><img src="./img/images/目标_39.gif"></td>
<td align="center"><img src="./img/images/目标_41.gif"></td>
</tr>
<tr>
<td>
<ul>
<li><p>证监会：分级基金投资者门...<br>2016-11-29</p></li>
<li><p>两市震荡下行 次新股板块...<br>2016-11-29</p></li>
<li><p>机场民航板块起飞 上海机...<br>2016-11-29</p></li>
<li><p>人民币汇率有条件保持基本...<br>2016-11-29</p></li>
</ul>
</td>
<td>
<ul>
<li><p>年关将至，4件大事发生将...<br>2016-11-29</p></li>
<li><p>投资理财5个地方该花的钱...<br>2016-11-29</p></li>
<li><p>关于年终奖的这些秘密...<br>2016-11-29</p></li>
<li><p>活用理财小公式让财富轻...<br>2016-11-29</p></li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<table border="0"><!-- 这是右边的table，分为9行1列 -->
<tr>
<td><h3>常见问题 / Q&A</h3></td>
</tr>
<tr>
<td><!-- 为了让图片和文字处于同一列，在此处又嵌套了一个table，但这是一种低效的方法，有更好的吗？ -->
<table>
<tr>
<td>
<img src="./img/images/目标_46.gif">
</td>
<td>
<p>个人征信记录要注重哪些？</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<img src="./img/images/目标_49.gif">
</td>
<td>
<p>个人信息：姓名、证件类型证件号码。</p>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td>
<img src="./img/images/目标_52.gif">
</td>
</tr>
<tr>
<td>
<table>
<tr >
<td>
<img src="./img/images/目标_46.gif">
</td>
<td>
<p>银行理财产品该如何选？</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr height="35px">
<td>
<img src="./img/images/目标_49.gif">
</td>
<td>
<p>现在各大银行都推出了琳琅满目的理财产品，我们该如何选。</p>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td>
<img src="./img/images/目标_52.gif">
</td>
</tr>
<tr>
<td><!-- 为了让图片和文字处于同一列，在此处又嵌套了一个table，但这是一种低效的方法，有更好的吗？ -->
<table>
<tr>
<td>
<img src="./img/images/目标_46.gif">
</td>
<td>
<p>个人消费贷款如何办理？</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<img src="./img/images/目标_49.gif">
</td>
<td>
<p>个人消费贷款也叫消费者贷款，是银行以消费者信用为基础。</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><!-- 第11大行，放置合作机构的logo -->
<td>
<img src="./img/images/目标_50.gif">
</td>
</tr>
<tr><!-- 联系我们，客服热线 -->
<td>
<table>
<tr>
<td height="236px" width="380px">
<h3>联系我们</h3>
<p>地址：广州市海珠区苏州街18号F栋3单元3A02</p>
<p>邮编：510000</p>
<p>邮件：[email protected]</p>
</td>
<td width="338px">
<h3>客服热线</h3>
<P>18825039863</P>
<p>（工作时间 9:00-21:00）</p>
<img src="./img/images/目标_53.gif">
</td>
<td width="144px" align="ce">
<h3>商家服务</h3>
<P>
商家入驻<br>
培训中心<br>
广告服务<br>
服务市场<br>
</p>
</td>
<td width="286px" align="center">
<h3>帮助信息</h3>
<P>
帮助中心<br>
赎回投资<br>
新手指引<br>
安全保障<br>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr ><!-- 利牛金融有限公司 版权所有 -->
<td align="center">
<p>?2016 利牛金融有限公司 版权所有</p>
<p>本站使用凡科建站搭建</p>
</td>
</tr>
</table>
</body>
</html>
把上面的代码用浏览器打开之后的效果是这样的：
等学了css之后再调整一下。
时间： 2024-10-16 20:27:33