小时候看到《鲁滨逊漂流记》时，就被书中所描述的一个个场景深深地吸引了，在这次网页设计作业中便想以这本书为主题来制作网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鲁滨逊漂流记</title>
<link rel="stylesheet" type="text/css" href="css/file.css"/>
</head>
<body>
<div class="boxs">
<div class="audio"><!-- 插入音频 -->
<audio src="音频视频/卡农.mp3" controls="controls" autoplay="autoplay" >
当前浏览器不支持audio
</audio>
</div>
<div class="top">
鲁滨逊漂流记
</div>
<div class="author">
制作者：子卿Up
</div>
<nav ><!-- 导航栏 -->
<ul>
<li><a class="btn" href="#1"><em>内容简介</em></a></li>
<li><a class="btn" href="#2"><em>人物介绍</em></a></li>
<li><a class="btn" href="#3"><em>作品鉴赏</em></a></li>
<li><a class="btn" href="#4"><em>作者简介</em></a></li>
<li><a class="btn" href="#5"><em>在线留言</em></a></li>
</ul>
</nav>
<div class="box box1" id="1">
<div class="main">
<video width="500" height="350" src="音频视频/视频.mp4" controls="controls"></video><!-- 插入视频 -->
鲁滨逊·克鲁索出生于一个体面的商人家庭，渴望航海，一心想去海外见识一番。他瞒着父亲出海，到了伦敦，从那购买了一些假珠子、玩具等到非洲做生意。
第四次航海时，船在途中遇到风暴触礁，船上同伴全部遇难，唯有鲁滨逊幸存，只身漂流到一个荒无人烟的孤岛上。他用沉船的桅杆做了木筏，一次又一次地把船上的食物、衣服、枪支弹药等运到岸上，并在小山边搭起帐篷定居下来。接着他用削尖的木桩在帐篷周围围上栅栏，在帐篷后挖洞居住。他用简单的工具制作桌、椅等家具，猎野味为食，饮溪里的淡水，度过了最初遇到的困难。
他开始在岛上种植大麦和稻子，自制木臼、木杵、筛子，加工面粉，烘出了粗糙的面包。他捕捉并驯养野山羊，让其繁殖。他还制作陶器等等，保证了自己的生活需要。还在荒岛的另一端建了一个“乡间别墅”和一个养殖场。虽然这样，鲁滨逊一直没有放弃寻找离开孤岛的办法。他砍倒一棵大树，花了五六个月的时间做成了一只独木舟，但船实在太重，无法拖下海去，只好前功尽弃，重新另造一只小的船。鲁滨逊在岛上独自生活了15年后，一天，他发现岛边海岸上有一个脚印。不久，他又发现了人骨和生过火的痕迹，原来外岛的一群野人曾在这里举行过人肉宴。鲁滨逊惊愕万分。此后他便一直保持警惕，更加留心周围的事物。直到第24年，岛上又来了一群野人，带着被当成祭品，准备杀死并吃掉的野人俘虏。鲁滨逊发现后，救出了其中的一个。因为那一天是星期五，所以鲁滨逊把被救的俘虏取名为“星期五”。此后，“星期五”成了鲁滨逊忠实的仆人和朋友。接着，鲁滨逊带着“星期五”救出了一个西班牙人和“星期五”的父亲。不久有条英国船在岛附近停泊，船上水手叛乱，把船长等三人抛弃在岛上，鲁滨逊与“星期五”帮助船长制服了那帮叛乱水手，夺回了船只。他把那帮水手留在岛上，自己带着“星期五”和船长等离开荒岛回到英国。此时鲁滨逊已离家35年（在岛上住了28年）。他在英国结了婚，生了三个孩子。妻子死后，鲁滨逊又一次出海经商，路经他住过的荒岛，这时留在岛上的水手和西班牙人都已安家繁衍生息。鲁滨逊又送去一些新的移民，将岛上的土地分给他们，并留给他们各种日用必需品，满意地离开了小岛。
</div>
</div>
<div class="box box2" id="2">
<div class="main">
<ul>
<li>
<img style="float: right;" src="./img/鲁滨逊.jpg" ><!-- 插入图片 -->
<strong>鲁滨逊</strong><br>
17世纪中叶，鲁滨逊·克鲁索出生在英国一个中产阶级的家庭，他本可以按照父亲的安排，依靠殷实的家产过一种平静而优裕的生活。然而。一心想外出闯荡的鲁滨逊却当上了充满惊险和刺激的水手，航行于波涛汹涌、危机四伏的大海上。后来遭遇船难而流落荒岛，英国流亡贵族鲁滨逊在极度与世隔绝的情况下，运用水手时代训练而来的地理方位标示、天象人文观测、日移与潮汐变化登计法等与奥妙的自然搏斗，同日,记录下自己的荒岛生涯，并随时等待时机逃离绝境。鲁滨逊在自制的日历星期五这一天，救下了食人族男孩星期五，星期五是被食人族作为祭祀的祭品带到荒岛上来的，无法再回到他的部族。随着两个人的朝夕相处，鲁滨逊面对一个与自己不同种族、宗教及文化的人，慢慢改变了自己，两人发展成亦父亦友的情谊。这份文明世界所缺少的友谊成为鲁滨逊后来经历20多年荒岛生活的精神支柱。
</li>
<li>
<img src="img/星期五.jpeg" ><!-- 插入图片 -->
<strong>星期五</strong><br>
星期五是一个野人，有一次在沙滩上差点被另一个部落的野人吃掉，但鲁滨逊最后救了他，正好当天是星期五，所以鲁滨逊就给他命名为“星期五”。也由于他们之间的真挚友谊他才得以存活下去，并回到了家乡。星期五是一个朴素、忠诚的朋友和智慧的勇者，他知恩图报，忠诚有责任心，适应能力强，他和鲁滨逊合作着施展不同的技能在岛上度过了许多年，星期五的到来让鲁滨逊圆了归家梦，自己则做了鲁滨逊的助手。星期五要求上进，很快就融入了文明人的生活，是个乐观，可爱的人。
</li>
</ul>
</div>
</div>
<div class="box box3" id="3">
<div style="font-size: 27px;" class="main">
小说的结构一目了然，思路非常清晰。全书以鲁滨逊冒险的经历作为线索展开，讲述他如何离家出走、逃脱海盗、流落孤岛，如何在孤岛恶劣的环境中生存，以及最后又是怎么样成为富翁、如何回到英国等等。这些情节用一条线的形式引出来，使小说的结构非常紧凑、清晰。同时，在清晰的思路下，故事情节总是一波未平一波又起，让读者的心情也跟着胆战心惊。既流畅又峰回路转的情节，正如一条潺潺的溪流般吸引着读者的眼球。比如写鲁滨逊在某一天，突然听到从海上传来了几声枪响。原来是一艘经过的船。他赶紧生起火来，传递信号。可是，那艘大船却在自己眼前触礁沉没了，获救的希望再次破灭，鲁滨逊又被重新抛入了孤独的痛苦之中。这样的记叙方式在文中屡见不鲜，它扣住读者的心弦，让读者在峰回路转之中体会小说的精彩所在。
</div>
</div>
<div class="box box4" id="4">
<div class="main">
<div class="b1">
<img src="img/作者.jpeg" ><!-- 插入图片 -->
</div>
<div class="b2">
丹尼尔·笛福（1660—1731）
<br>被誉为“英国与欧洲小说之父”。笛福生于伦敦一个油烛商家庭，年轻的时候，是一个成功的商人。在从事商业的同时，他还从事政治活动，代表当时日益上升的资产阶级出版了大量的政治性小册子，并因此被捕。笛福直到晚年才开始创作小说。写《鲁滨逊漂流记》时，他已59岁了。此后，他又创作了《辛格顿船长》《杰克上校》《摩尔·弗兰德斯》等小说，这些小说对英国及欧洲小说的发展都起了巨大的影响以及作用。
</div>
<div class="b3">
<p>悬浮有解说</p>
</div>
</div>
</div>
<div class="box box5" id="5">
<div class="main"><!-- 表单 -->
<div id="box1">姓名：<br>邮箱：<br>所在地：<br>手机号码：<br><br> 意见反馈：<br>
</div>
<div id="box2">
<input value="XXX"class="x x1"type="text"> <br>
<input value="123456@126.com"class="x x1"type="email"> <br>
<select>
<option style='color:#000' value="" selected="selected">南昌</option>
<option style='color:#000' value="">北京</option>
<option style='color:#000' value="">重庆</option>
<option style='color:#000' value="">上饶</option>
<option style='color:#000' value="">上海</option>
</select> <br>
<input class="x"type="tel"> <br>
<textarea rows="5" cols="42">如果您有什么意见或问题可以告诉我!
</textarea>
<br>
<input class="sumit x2" type="submit" value="提交">
<input class="reset x2" type="reset" >
</div>
</div>
</div>
</div>
</body>
</html>效果图
css样式明天再发
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
