标签：
老师布置的web作业，我做了3个页面，其中有利用老师的css代码！
我有添加背景音乐，下面的是主界面的代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阅读之家</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#layout {
width: 600px;
height: 200px;
margin: 0px auto;
}
.col {
width: 240px;
padding: 8px 25px;
float: left;
}
p {
line-height: 180%;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<audio src="music/Summer.mp3" autoplay="true" loop="true"><!--音频自动播放+循环播放-->
您的浏览器不支持该格式的音频
</audio>
<div id="layout"> <!-- id="layout" -->
<div>
<img src="images/顶部.jpg" height="250px" width="600px" border=0"
class="fig" alt="阅读之家" title="阅读之家">
</div>
<hr border="1">
<table border="1" width="600px">
<caption><b>******书籍推荐******</b></caption>
<tr>
<td><b>书籍封面</td>
<td><font><b>推荐理由</b></font></td>
</tr>
<tr>
<td width="80px"><a href="web2.html">
<img src="images/李开复自传.png" height="150px" ></a>
</td>
<td>
  1.李开复唯一一部描写全面生平事迹的传记：《世界因你不同：李开复自传》书中讲述了家庭教育培育的“天才少年”；学校教育塑造的“创新青年”，走入世界顶级大公司，苹果、微软、谷歌等亲历的风云内幕，岁月30载不懈奋斗、追求事业成功的辉煌历程。<br>
  2.娓娓道来、字字珠玑、可读性和故事性皆佳。李开复博士是青少年成长成才的励志偶像，年轻家长、学校教师阅读后也能从中得到感悟和启发。<br>
  3.中信出版社金牌图书，《世界因你不同：李开复自传》畅销100万册纪念版，与李开复博士新书同步上市，多视角、立体了解人物一生的发展。<br>
</td>
</tr>
<tr>
<td width="80px"><a href="web3.html">
<img src="images/乔布斯传.png" height="150px" ></a>
</td>
<td>
  史蒂夫·乔布斯有如过山车般精彩的人生和炽热激越的性格成就了一个传奇，一个极具创造力的企业领袖，他追求完美和誓不罢休的激情使个人电脑、动画电影、音乐、手机、平板电脑以及数字出版等六大产业发生了颠覆性变革。<br>
  2011年，中信出版社出版了《史蒂夫·乔布斯传》；在2年后的今天，又推出了修订版。在原有《乔布斯传》的基础上，修订了全部译文，采纳了读者对翻译的众多建议，使得整体译文更加完善，更加精良。<br>
  此外，修订版一大亮点是新增补作者亲自撰写的后记，描述了乔布斯去世后的相关过程，包括葬礼等，对读者有新的吸引点，也更完美了此部经典著作。<br>
  全新版式设计，封面设计，也使得这本经典人物传记以新的形态面对苹果粉和乔布斯迷.<br>
  最后，乔布斯照片使用铜版纸作插页，更有质感。<br>
</td>
</tr>
<tr>
<td width="80px"><a href="web4.html">
<img src="images/四十自述.png" height="150px" ></a>
</td>
<td>
  《胡适：四十自述（图文典藏版）》是胡适生前唯一亲笔撰写的自传，是中国现代传记文学的名篇之作。在《胡适：四十自述（图文典藏版）》中，胡适讲述了自己童年、少年与青年时代的人生经历，回顾了前四十年的心路历程，是胡适先生与自己的青少年时代进行的“心灵对话”。阅读《胡适：四十自述（图文典藏版）》，我们可以从中感受到先生特有的儒雅、睿智、幽默的文人气息；让我们了解了历史上真实的胡适、鲜活的胡适。
</td>
</tr>
</table>
<br><br>
<div>
注：点击书籍封面查看该书相关内容
</div>
<div id="footer">
<div>
© Copyright 2015, <b>made by YSP</b> - All rights reserved.
</div>
</div>
</div>
</body>
</html>
在主界面我展示了3本书，点击每一本书的封皮图片都会进入一个新的网页，会单独介绍书籍的相关信息。
1.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>李开复自传</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#layout {
width: 600px;
height: 200px;
margin: 0px auto;
<!--
background: url(images/10.jpg) no-repeat;
-->
}
.col {
width: 600px;
padding: 8px 25px;
float: left;
}
p {
line-height: 180%;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<audio src="music/卡农.mp3" autoplay="true" loop="true"><!--音频自动播放+循环播放-->
您的浏览器不支持该格式的音频
</audio>
<div id="layout"> <!--id="layout" -->
<div>
<img src="images/顶部.jpg" height="250px" width="600px" border=0"
class="fig" alt="阅读之家" title="阅读之家">
</div>
<hr border="1">
<div align="center">
<img src="images/李开复自传.png" height="250px" border=0" >
</div>
<br>
<div class="col">
<p><font size="3"><b>内容简介</b></font></p>
<hr border="1">
<p>  《世界因你不同：李开复自传》是李开复唯一的一本自传，字里行间，是岁月流逝中沉淀袭来的宝贵的人生智慧和职场经验。捣蛋的“小皇帝”，11岁的“留学生”，26岁获得《商业周刊》“最重要的科学发明”奖，33岁的苹果副总裁，谷歌中国的创始人，他有着太多传奇的经历，为了他，两家最大的IT公司对簿公堂。而他的每一次人生选择，都是一次成功的自我超越。
透过这本自传，李开复真诚讲述了他鲜为人知的成长史、风雨兼程的成功史和烛照人生的心灵史，也首次全面披露了他亲历的苹果、微软、谷歌等IT巨头风云变幻的内幕。娓娓道来，字字珠玑。
抓住一切去探寻生命的意义，总有一天，世界将因你不同。</p>
</div><br><br>
<div class="col">
<p><font size="3"><b>作者简介</b></font></p>
<hr border="1">
<p>  李开复，李开复博士于2009年9月在中国北京创立创新工厂，帮助中国青年成功创业，创新工厂立足互联网、移动互联网和云计算等领域。在此之前，曾就职于谷歌、微软、苹果等世界顶尖科技公司，并分别担任全球副总裁职务。
曾以最高荣誉毕业于哥伦比亚大学，并于1988年获卡内基梅隆大学计算机学博士学位。分别于2011年、2015年被授予香港城市大学荣誉博士、卡内基梅隆大学荣誉商业管理博士。李开复博士还是美国电气电子工程协会的院士。曾任美国“百人会”副会长。
2013年当选为《时代周刊》全球最具影响力100人。<br>  范海涛，传记作家，16岁开始发表新闻作品。2001年毕业于中国西南政法大学，获文学学士和法学学士学位。2001年——2011年任《北京青年报》财经记者。2013年毕业于美国哥伦比亚大学口述历史专业，是中国第一个口述历史专业硕士，
也是目前口述历史专业最高学位拥有者。2013——2014年，任新浪网驻华盛顿记者。2014年回国创办范海涛传记与口述历史工作室，专注于人物传记写作，并致力于口述历史学科引进工作。2009年，曾获中国最佳本土商业作者奖。</p>
</div><br><br>
<div class="col">
<p><font size="3"><b>精彩书摘</b></font></p>
<hr border="1">
<p>  选择的力量<br>
  2009年8月5日，美联航UA888次航班缓缓地在加利福尼亚州降落，我又一次来到了这座再熟悉不过的港口城市—旧金山。<br>
  我曾经在这里起飞、降落过无数次。现在，眼前的一切如同油画般慢慢展开：阳光一如既往，温暖地照耀着水面，空气里有股微甜的清新味道，
远处旧金山湾的海水，灰中微微荡漾着湛蓝，横跨在海面上的那座著名的砖红色大桥，刚毅挺拔，泛着陈旧的岁月光芒。<br>
  坐在车子的驾驶座上，我摇下车窗，深深地吸了一口早晨清冽的空气，好像在用心感受一种不同于以往的心情。我闭上眼睛，再问自己一遍：“你，准备好了吗？”<br>
  “是的，我已经准备好了！”一个来自内心深处的声音做出回答。<br>
  我知道，在这里，我将做出又一个重要的人生选择。<br>
  尽管前面充满了悬念，但是我依然相信内心的声音。我知道，只有follow my heart（追随我心）的选择，才能激发起身体里最大的潜能，拼尽全力向下一个目标靠近。
一如过去很多选择曾带给我类似的人生体验。<br>
</p>
</div><br><br><br><br>
<div id="footer">
<div>
© Copyright 2015, <b>made by YSP</b> - All rights reserved.
</div>
</div>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乔布斯传</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#layout {
width: 600px;
height: 200px;
margin: 0px auto;
<!--
background: url(images/10.jpg) no-repeat;
-->
}
.col {
width: 600px;
padding: 8px 25px;
float: left;
}
p {
line-height: 180%;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<audio src="music/卡农.mp3" autoplay="true" loop="true">
您的浏览器不支持该格式的音频
</audio>
<div id="layout"> <!--id="layout" -->
<div>
<img src="images/顶部.jpg" height="250px" width="600px" border=0"
class="fig" alt="阅读之家" title="阅读之家">
</div>
<hr border="1">
<div align="center">
<img src="images/乔布斯传.png" height="250px" border=0" >
</div>
<br>
<div class="col">
<p><font size="3"><b>内容简介</b></font></p>
<hr border="1">
<p>  《史蒂夫·乔布斯传（修订版）》是乔布斯唯一授权的官方传记，由著名作家沃尔特·艾萨克森（Walter Isaacson）在过去两年与乔布斯面对面交流40多次、对乔布斯100多位家庭成员、朋友、竞争对手和同事的采访的基础上撰写而成，详尽描写了乔布斯的成长经历，创业生涯和打造苹果公司及其产品的全过程。<br>
本书是继2011年首版后的修订版。<br>
在第一版版的基础上进行了译文的重新审校修正，使这本经典著作整体上更为完善。并专门增加了作者最新撰写的后记，叙述了乔布斯去世后包括葬礼等更新的内容，使得整部书更加完整，全面。在整体包装上，对封面进行了再设计，换了乔布斯年轻时的图片；在正文的版式上也做了重新设计，从内到外使这本书面貌一新。
</p>
</div><br><br>
<div class="col">
<p><font size="3"><b>作者简介</b></font></p>
<hr border="1">
<p>  沃尔特·艾萨克森（Walter Isaacson），阿斯彭研究所（Aspen Institute）CEO，历任美国有线电视新闻网（CNN）董事长和《时代》杂志总编。主要作品有《爱因斯坦：生活和宇宙》、《基辛格传》，其中《爱因斯坦：生活和宇宙》曾荣获美国国家科学总院2008年度科学传播最佳图书奖。<br>
</p>
</div><br><br>
<div class="col">
<p><font size="3"><b>书内插图</b></font></p>
<hr border="1">
<p>
<img src="images/A.png">
<img src="images/B.png">
<img src="images/C.png">
<img src="images/D.png">
</p>
</div><br><br>
<div class="col">
<p><font size="3"><b>该书目录</b></font></p>
<hr border="1">
<p>
  主要人物<br>
  前 言 本书是如何诞生的<br>
  第一章 童年 被遗弃和被选择<br>
  第二章 奇特的一对 两个史蒂夫<br>
  第三章 出离 顿悟，修行……<br>
  第四章 雅达利与印度 禅宗与游戏设计艺术<br>
  第五章 Apple I 开机，启动，接入……<br>
  第六章 Apple II 新时代的曙光<br>
  第七章 克里斯安和丽萨 被遗弃者……<br>
  第八章 施乐和丽萨 图形用户界面<br>
  第九章 上市 名利双收<br>
  第十章 Mac诞生了你说你想要一场革命<br>
  第十一章 现实扭曲力场 以自己的游戏规则行事<br>
</p>
</div><br><br>
<br><br><br><br>
<div id="footer">
<div>
© Copyright 2015, <b>made by YSP</b> - All rights reserved.
</div>
</div>
</div>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>四十自述</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#layout {
width: 600px;
height: 200px;
margin: 0px auto;
}
.col {
width: 600px;
padding: 8px 25px;
float: left;
}
p {
line-height: 180%;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<audio src="music/卡农.mp3" autoplay="true" loop="true">
您的浏览器不支持该格式的音频
</audio>
<div id="layout">
<div>
<img src="images/顶部.jpg" height="250px" width="600px" border=0"
class="fig" alt="阅读之家" title="阅读之家">
</div>
<hr border="1">
<div align="center">
<img src="images/四十自述.png" height="250px" border=0" >
</div><br>
<div class="col">
<p><font size="3"><b>作者简介</b></font></p>
<hr border="1">
<p>  胡适（1891.12.17-1962.2.24），汉族，安徽绩溪人。现代著名学者、诗人、历史学家、文学家、哲学家。因提倡文学革命而成为新文化运动的领袖之一。
曾任北京大学校长、台湾“中央研究院”院长等。有《胡适全集》44卷存世。<br>
</p>
</div><br><br>
<div class="col">
<p><font size="3"><b>精彩书评</b></font></p>
<hr border="1">
<p>  
★错过胡适，中国错过了100年。<br>
——熊培云<br>
★我们现在是文化沙漠，胡适的重要在于他能运用他的远见、声望与“亲和力”，为沙漠打几口井。<br>
——李敖<br>
★不肯定胡适的大方向，中国便没有前途！但是，不打破胡适的框框，中国学术便没有进步！<br>
——唐德刚<br>
</p>
</div><br><br>
<div class="col">
<p><font size="3"><b>精彩书摘</b></font></p>
<hr border="1">
<p>  我母亲二十三岁做了寡妇，又是当家的后母。这种生活的痛苦，我的笨笔写不出一万分之一二。
家中财政本不宽裕，全靠二哥在上海经营调度。大哥从小就是败子，吸鸦片烟，赌博，钱到手就光，光了就回家打主意，
见了香炉就拿出去卖，捞着锡茶壶就拿出去押。我母亲几次邀了本家长辈来，给他定下每月用费的数目。但他总不够用，
到处都欠下烟债赌债。每年除夕我家中总有一大群讨债的，每人一盏灯笼，坐在大厅上不肯去。大哥早已避出去了。
大厅的两排椅子上满满的都是灯笼和债主。我母亲走进走出，料理年夜饭，谢灶神，压岁钱等事，
只当做不曾看见这一群人。到了近半夜，快要“封门”了，我母亲才走后门出去，央一位邻舍本家到我家来，
每一家债户开发一点钱。做好做歹的，这一群讨债的才一个一个提着灯笼走出去。一会儿，大哥敲门回来了。
我母亲从不骂他一句。并且因为是新年，她脸上从不露出一点怒。这样的过年，我过了六七次。<br>
  大嫂是个最无能而又最不懂事的人，二嫂是个很能干而气理很窄小的人。她们常常闹意见，
只因为我母亲的和气榜样，她们还不曾有公然相骂相打的事。她们闹气时，只是不说话，不答话，把脸放下来，
叫人难看；二嫂生气时，脸色变青，更是怕人。她们对我母亲闹气时，也是如此。我起初全不懂得这一套，
后来也渐渐懂得看人的脸色了。我渐渐明白，世间最可厌恶的事莫如一张生气的脸；
世间最下流的事莫如把生气的脸摆给旁人看。这比打骂还难受。<br>
</p>
</div><br><br>
<br><br><br><br>
<div id="footer">
<div>
© Copyright 2015, <b>made by YSP</b> - All rights reserved.
</div>
</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/yspworld/p/4905063.html
