运行结果如上。。。。
下面说说设计过程：
一开始试探的做的时候，是建立了一个table，这个table里面放一本图书的信息。然后建立了一个列，然后建立了个td，td里面放图片，td那个表格多占几列，然后再建一个tr放图书信息，这样做了之后发现，tr那一列直接放到图书下面去了，然后很懵逼，然后调整表格的宽度，高度，表格的占列数啥的，然后发现还是不行，然后问了问小组长，发现表格中嵌入图片之后，表格的默认高度已经确认下来了，然后想了想，决定再开一个td，在td中再建立一个table，再在table中写书的介绍啥的，这样做确实出现在了图书的右面了，但是发现写出的介绍居中，然后发现调用td中的valign属性就可以实现介绍自上而下排列。
然后设置table中的tr中的td的width来实现对表格宽度的控制。然后发现了一个问题，发现各个表格的宽度是以各个列中最长的表格宽度决定的。因此，在写比较长的文字介绍时，需要新建一个table，重新设置宽度来实现页面布局的合理性。写购买和收藏的时候也是新建了个table，为了两个表格间有空隙，想了些馊主意，一个是将一个表格设的长一些，这样看起来有缝隙，另一个是直接新建一个空的表格，设置宽度，反正都是很馊的主意...
然后在那个表格加上了个随便的超链接...
然后按照上面的方法建立了6个表格，然后发现并不居中，想让它们都居中，然后发现单个设不行，然后请教了下别人，然后发现还要建一个大的table，table里面有6个表格，然后那个大table 设为居中，就可以实现居中了...合的时候想在原来的文件上合，然后合着合着就迷糊了，只好又新建了一个文件，先建了一个大table，然后再将6个表格合进去...
最后终于是合完了...
总结：
建网页的时候一定要将整体布局先想好，不要写一点想一点。。。
做不出来的原因还是由于自己的基础知识掌握的不行，还有就是不会灵活变通，太死板。。。
Table中的border在做的表格的时候不置0真的很重要，能很快的找出问题所在。。。
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>当当网</title>
</head>
<body>
<table align="center" border="0">
<tr>
<td>
<table border="0">
<tr>
<td><img src="24003581-1_b_5.jpg"></td>
<td valign="top">
<table border="0">
<tr>
<td width="250"><font color="blue">HTML CSS JavaScript基础教程 </font></td>
<td width="100"><font color="#dc143c">Web前端开发</font></td>
<td width="350"><font color="blue">web前端开发教程 讲透HTML5 H5 CSS3 JS核心</font></td>
</tr>
<tr valign="top">
<td ><font color="#dc143c" size="5">现价 48.60</font> <font color="#a9a9a9" size="1">定价: </font><SPAN style="TEXT-DECORATION: line-through">69.00</SPAN><font color="#a9a9a9" size="1">(7.05折) </font></td>
</tr>
<tr>
<td ><font color="blue">就是我</font><font color="#a9a9a9">/2017-08-01/</font><font color="blue">人民邮电出版社</font></td>
</tr>
<tr>
<td><font color="blue"> 666评论</font></td>
</tr>
<tr>
<td><img src="hot1.png"></td>
</tr>
<table border="0" width="725">
<tr>
<td>初学入门 入门经典 针对前端新手全面打造,一本书搞定HTML CSS JavaScript 精品呈现 通俗易懂 语言轻松幽默 讲解亦真见血 全角度剖析开发核心技术</td>
</tr>
</table>
<table border="0">
<tr>
<!--<td bgcolor="#dc143c" width="120" align="center"><font color="#f0ffff">加入购物车</font></td>-->
<td bgcolor="#dc143c" align="center" width="80"><a href="http://product.dangdang.com/25160597.html" >购买</a></td>
<td width="25"></td>
<td bgcolor="#ffb6c1" width="80" align="center"><font color="#dc143c">收藏</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--2-->
<tr>
<td>
<table border="0">
<tr>
<td><img src="25108304-1_b_5.jpg"></td>
<td valign="top">
<table border="0">
<tr>
<td width="350" ><font color="#dc143c">Web前端开发</font><font color="blue">实例教程--HTML5+CSS3+JavaScript</font></td>
</tr>
<tr>
<td><font color="#dc143c" size="5">现价: 31.40 </font><font color="#a9a9a9" size="3">定价: </font><SPAN style="TEXT-DECORATION: line-through">39.80</SPAN><font color="#a9a9a9" size="1">(7.89折)</font></td>
</tr>
<tr>
<td ><font color="blue" size="3">我就是 </font><font color="#a9a9a9" size="2">等主编 /2017-09-01/</font><font color="blue" size="3">电子工业出版社</font></td>
</tr>
<tr>
<td><font color="blue"> 123评论</font></td>
</tr>
<tr>
<td><img src="QQ截图20181020153425.png"></td>
</tr>
<tr height="60"><td></td></tr>
</table>
<table border="0" valign="bottom">
<tr>
<td bgcolor="red" width="80" align="center"><a href="http://product.dangdang.com/25168143.html" >购买</a></td>
<td width="25"></td>
<td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--3-->
<tr>
<td>
<table border="0">
<tr>
<td><img src="410260224-1_b_3.jpg"></td>
<td valign="top">
<table border="0">
<tr>
<td width="580"><font color="blue" size="3">移动</font><font color="red" size="3">Web前端</font><font color="blue" size="3">高效</font>
<font color="red" size="3">开发</font><font color="blue" size="3">实战: HTML5+CSS3+JavaScript+Webpack+ReactNative+Vue</font></td>
</tr>
<tr>
<td><font color="red" size="5">现价: 59.21</font></td>
</tr>
<tr>
<td><font color="blue" size="2"> iKcamp </font><font color="#a9a9a9" size="2">/2017-09-01/</font><font color="blue" size="2">电子工业出版社</font></td>
</tr>
<tr>
<td><font color="blue"> 0评论</font></td>
</tr>
</table>
<table border="0">
<tr>
<td><img src="QQ截图20181020153425.png"><img src="电子书.png"><img src="满2件6折.png"></td>
</tr>
</table>
<table border="0">
<tr>
<td width="580"><font>移动Web前端高效实战 HTML5 CSS3 JavaScript Webpack React Native Vue.js Node.js梳理了移动前端和Native客户端技术体系
涵盖了移动Web前端各个关键技术环节。</font></td>
</tr>
</table>
<table border="0">
<tr>
<td bgcolor="red" width="80" align="center"><a href="http://e.dangdang.com/products/1901084153.html" >购买</a></td>
<td width="25"></td>
<td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--4-->
<tr>
<td>
<table border="0">
<tr>
<td><img src="410260226-1_b_2.jpg"></td>
<td valign="top">
<table border="0">
<tr>
<td width="800"><font color="red" size="3">Web前端开发</font><font color="blue" size="3">从学到用完美实践--HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJ
著名前端大牛阮晓老师力荐</font></td>
</tr>
<tr>
<td><font size="5" color="red">现价: 69.50 </font><font color="#a9a9a9" size="2">定价： </font><SPAN style="TEXT-DECORATION: line-through">39.80</SPAN><font color="#a9a9a9" size="2">(7.9折)</font></td>
</tr>
<tr>
<td><font color="blue" size="2">阮晓龙 </font><font color="#a9a9a9" size="2">著/2018-08-23/</font><font color="blue" size="2">水利水电出版社</font></td>
</tr>
<tr>
<td><font color="blue"> 0评论</font></td>
</tr>
<tr>
<td><img src="QQ截图20181020153425.png"></td>
</tr>
</table>
<table border="0">
<tr>
<td width="800">货真料足：著名一线前端开发专家阮晓龙老师多年学习，研究，授课及实战经验的结晶 内容系统全面：一站式解决HTML5 CSS3 JavaScript jQuery
AJAX AngularJS 学习</td>
</tr>
</table>
<table border="0">
<tr>
<td bgcolor="red" width="80" align="center"><a href="http://e.dangdang.com/products/1901084153.html" >购买</a></td>
<td width="25"></td>
<td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--5-->
<tr>
<td>
<table border="0">
<tr>
<td><img src="25160597-1_b_3.jpg"></td>
<td valign="top">
<table border="0">
<tr>
<td width="600"><font color="red" size="3">web前端</font><font color="blue" size="3">基础</font><font color="red" size="3">开发</font>
<font color="blue" size="3">秘籍: HTML5 CSS3 JavaScript Dreamweaver CC网页设计与制作</font></td>
</tr>
<tr>
<td><font color="red" size="5">现价: 79.80 </font><font color="#a9a9a9" size="2"> 定价:</font>
<SPAN style="TEXT-DECORATION: line-through">159.60</SPAN><font color="#a9a9a9" size="2">(5折)</font></td>
</tr>
<tr>
<td><font color="blue" size="2">未来科技 </font><font color="#a9a9a9" size="2">/2017-08-31</font></td>
</tr>
<tr>
<td><font color="blue"> 32评论</font></td>
</tr>
<tr>
<td><img src="QQ截图20181020153425.png"><font> </font><img src="限时抢.png"></td>
</tr>
</table>
<table border="0">
<tr>
<td width="600">10万 读者检验，畅销书全面升级；10年开发教学经验，一线讲师半生心血。同属于HTML CSS JavaScript HTML5移动开发
HTML5实战 HTML5 APP</td>
</tr>
</table>
<table border="0">
<tr>
<td bgcolor="red" width="80" align="center"><a href="http://product.dangdang.com/410260225.html" >购买</a></td>
<td width="25"></td>
<td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--6-->
<tr>
<td>
<table border="0">
<tr>
<td><img src="1312533142-1_b_14.jpg"></td>
<td valign="top">
<table border="0">
<tr>
<td width="700"><font color="blue" size="3">HTML5 Canvas开发详解 </font><font color="red" size="3">Web前端开发</font>
<font color="blue" size="3">精品课全彩印刷! 全面透彻介绍HTML5 Canvas开发核心知识</font></td>
</tr>
</table>
<table border="0">
<tr>
<td width="300"><font color="red" size="5">现价： 56.80 </font><font color="#a9a9a9"size="2">定价：</font>
<SPAN style="TEXT-DECORATION: line-through">79.00</SPAN><font color="#a9a9a9" size="2">(7.19折) </font></td>
<td bgcolor="#4169e1" width="100" align="center"><font color="white" size="5">电子书:</font></td>
<td><font color="blue" size="5"> 50.56</font></td>
</tr>
<tr>
<td><font color="blue" size="2">莫振杰</font><font color="#a9a9a9" size="2">/2017-03-01/</font><font color="blue" size="2">人民邮电出版社</font></td>
</tr>
<tr>
<td><font color="blue"> 278评论</font></td>
</tr>
<tr>
<td><img src="QQ截图20181020153425.png"></td>
</tr>
</table>
<table border="0">
<tr>
<td width="650">含金量高 前端精品内容荟萃，强化基础提升实战技能。 通俗易懂 语言风格轻松幽默，形象生动讲解枯燥知识。 系统学习 掌握前端高级技巧，
清晰流畅学习进阶内容。</td>
</tr>
</table>
<table border="0">
<tr>
<td bgcolor="red" width="100" align="center"><a href="http://product.dangdang.com/25065629.html">购买纸质书</a></td>
<td width="25"></td>
<td bgcolor="red" width="100" align="center"><a href="http://e.dangdang.com/products/1900783222.html">购买电子书</a></td>
<td width="25"></td>
<td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
