HTML5期末大作业：小说网页设计——在线阅读7页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计

HTML+CSS+JavaScript（毕业设计）
常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, 可满足大学生网页大作业和毕业网页设计需求!

临近期末, 很多同学苦于没有参考的资料，或者下载的资料不全、代码有问题、数据有问题等等,造成一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
作品介绍

1.用 HTML 结构标记（或 div 标记）+CSS 进行布局定位（如在 1024×768下全屏显示无横向滚动条）。

2.作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网站页面标题、创意设计制作的 Logo 图标和 Banner 广告符合网站主题。

4.首页栏目数量不少于 3 个，各栏目能正确链接到相应栏目页面，同时各栏目页面能正确返回网站首页。

5.网站内容具有原创性，内容充实，特效且运用合理。

6.网站整体色系符合视觉习惯，布局合理美观，结构层次清楚，目录结构清晰，文件及文件夹命名规范。

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>作业</title><link rel="stylesheet" href="css/style.css"><link rel="shortcut icon" href="img/icon.png">
</head><body><div class="main"><!--导航条--><header><div><!--LOGO--><div class="logo"><a href="index.html"><img src="img/logo.png" alt="LOGO"></a></div><!--导航--><nav><ul><li class="active"><a href="index.html">主页</a></li><li><a href="index.html#index">导航</a></li><li><a href="index.html#page-one">畅销推荐</a></li><li><a href="index.html#page-two">国风中文网</a></li></ul><!--注册/登录--><ul class="login"><li><a href="register.html">注册</a></li><li><a href="login.html">登录</a></li></ul></nav></div></header><div class="content"><div id="index"><header><div class="logo"><a href="/">XXX阅读</a></div><div class="search"><form><label><input type="text" name="key" value="鹤唳华亭"></label></form></div><div class="clouds"><a href="bookshelf.html">我的书架</a></div></header><aside class="menu"><div class="category"><div class="sub"><h3 class="fl">国风中文网<i style="display: block;"></i></h3><p><a class="hot" href="###" data-model="index" data-opration="man">都市生活</a><a class="hot" href="###" data-model="index" data-opration="man">历史传奇</a><a class="ll" href="###" data-model="index" data-opration="man">玄幻仙侠</a></p><p><a href="###" data-model="index" data-opration="man">悬疑探险</a><a href="###" data-model="index" data-opration="man">科幻奇幻</a><a class="ll" href="###" data-model="index" data-opration="man">短篇小说</a></p></div><div class="more" style="display: none;"><p class="f-cb"><a href="###" data-model="index" data-opration="man">军事谍战</a><a class="ll" href="###" data-model="index" data-opration="man">同人网游</a></p></div></div><div class="category"><div class="sub"><h3>采薇书院<i style="display: block;"></i></h3><p><a href="###" data-model="index" data-opration="woman">浪漫青春</a><a class="hot" href="###" data-model="index" data-opration="woman">都市言情</a><a class="ll" href="###" data-model="index" data-opration="woman">古风古韵</a></p><p><a href="###" data-model="index" data-opration="woman">穿越架空</a><a class="hot" href="###" data-model="index" data-opration="woman">宫斗宅斗</a><a class="ll" href="###" data-model="index" data-opration="woman">种田重生</a></p></div><div class="more" style="display: none;"><p class="f-cb"><a href="###" data-model="index" data-opration="woman">短篇美文</a><a href="###" data-model="index" data-opration="woman">仙侠幻情</a><a class="ll" href="###" data-model="index" data-opration="woman">同人网游</a></p></div></div><div class="category"><div class="sub"><h3>图书<i style="display: block;"></i></h3><p><a class="hot" href="###" data-model="index" data-opration="ts">小说作品</a><a class="hot" href="###" data-model="index" data-opration="ts">人文社科</a><a class="ll" href="###" data-model="index" data-opration="ts">成功励志</a></p><p><a href="###" data-model="index" data-opration="ts">经济管理</a><a href="###" data-model="index" data-opration="ts">品质生活</a><a class="ll" href="###" data-model="index" data-opration="ts">计算机&nbsp;&nbsp;&nbsp;&nbsp;</a></p></div><div class="more more-fl" style="display: none;"><p class="f-cb"><a href="###" data-model="index" data-opration="ts">文学作品</a><a href="###" data-model="index" data-opration="ts">两性情感</a><a class="ll" href="/book/category/category/2700" data-model="index" data-opration="ts">亲子少儿</a><a href="###" data-model="index" data-opration="ts">培训考试</a><a href="###" data-model="index" data-opration="ts">杂志期刊</a><a class="ll" href="###" data-model="index" data-opration="ts">外文外版</a></p></div></div><div class="category"><a href="/client"><div class="sub"><h3>客户端APP下载</h3><p style="text-align: left;text-indent: 3px;"><span style="color:#c9483c;">新用户全场免费畅读5天</span></p><p style="text-align: left;text-indent: 3px;"><span>10w+原创小说</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>8w+经典出版</span></p></div><div style="display: none;"></div></a></div></aside><article id="slider"><!--滑块内容--><div class="slider_image"><ul><li class="active"><a href=""><img src="img/1.jpg" alt="轮播图一"></a></li><li><a href=""><img src="img/2.jpg" alt="轮播图二"></a></li><li><a href=""><img src="img/3.jpg" alt="轮播图三"></a></li><li><a href=""><img src="img/4.jpg" alt="轮播图四"></a></li><li><a href=""><img src="img/5.jpg" alt="轮播图五"></a></li></ul></div><!--轮播滑块指示器--><div class="slider_indicators"><i class="active"></i><i></i><i></i><i></i><i></i></div><!--滑块控制器--><button class="slider_control slider_control_prev"><i class="iconfont">«</i></button><button class="slider_control slider_control_next"><i class="iconfont">»</i></button></article><aside><div class="user"><div><div class="user_avatar"><a href="废弃/login.html"><img src="img/logo.png" alt="user-head"></a></div><div class="user_show"><a href="">Hi~欢迎逛书城！</a><p><a href="" class="user_login">登录</a>&nbsp;|&nbsp;<a href="" class="user_reg">注册</a></p></div></div><div class="user_profit"><a href="">领取福利</a><a class="plus" href="bookshelf.html">我的书架</a></div></div><div class="new"><header><h5 class="news_tit">新书快报</h5><a>更多<i class="iconfont">»</i></a></header><ul><li><a href=""><span class="news_tag">新作</span>《大道朝天》开始连载！</a></li><li><a href=""><span class="news_tag">推荐</span>《间客》 一部不可错过的史诗级巨作！</a></li><li><a href=""><span class="news_tag">推荐</span>《庆余年》影视剧往后内容抢先看！</a></li><li><a href=""><span class="news_tag">最热</span>《映秀十年春》更新至第二百二十二章</a></li></ul></div></aside></div><div id="page-one" class="bookrack"><div class="left"><header><h2>畅销推荐</h2><a class="more" href="/yc">更多&gt;</a></header><div class="books"><div class="book"><div class="book-img"><a href=""><img src="img/books/book13.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="种春风">种春风</a></h3><p class="disc eps">写给所有的姑娘们。 愿我们——有得有失有坚持，能笑能哭能尽欢，种桃种李种...</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book7.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="好人平安">好人平安</a></h3><p class="disc eps">傅平安是个平凡的老百姓，但他的人生从十八岁那年起就变得传奇起来，风雨过后...</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book1.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="不设防的小浪漫">不设防的小浪漫</a></h3><p class="disc eps">圈内曾有资深前辈放出狠话：谁能拿下纪斯昱的第一次采访，我把他/她出过的...</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book15.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="美国陷阱">美国陷阱</a></h3><p class="disc eps">任正非接受采访时，正在读这本书</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book6.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="圣母">圣母</a></h3><p class="disc eps">“即使不择手段 ，也要保护我的女儿！”被“一骗再骗”的故事走向，最后21页，翻转世界！...</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book14.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="精进2">精进2</a></h3><p class="disc eps">精进1晋级版，让你从“厉害的人”变成真正的“大牛”</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div></div></div><div class="right"><header><h2>图书畅销榜</h2></header><div class="foldList"><ul class="topList"><li><p class="fold" style="display: none;"><a href=" "><i>01</i>蒋勋说红楼梦（套装共8册）</a></p><div class="unfold" style="display: block;"><i>01</i><div class="border f-cb"><a class="img" href=" " title="蒋勋说红楼梦（套装共8册）"><imgsrc="###"alt="蒋勋说红楼梦（套装共8册）"></a><h3><a href=" "  title="蒋勋说红楼梦（套装共8册）">蒋勋说红楼梦（套装共8册）</a></h3><p>蒋勋</p></div></div></li><li><p class="fold"><a href=" "><i>02</i>四朝高僧传（共5册）</a></p><div class="unfold" style="display:none;"><i>02</i><div class="border f-cb"><a class="img" href=" " title="四朝高僧传（共5册）"><imgsrc="###"alt="四朝高僧传（共5册）"></a><h3><a href=" "  title="四朝高僧传（共5册）">四朝高僧传（共5册）</a></h3><p>【南朝·梁】慧皎,【唐】道宣,【宋】赞宁,【明】如惺</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>03</i>沥川往事（全2册）</a></p><div class="unfold" style="display: none;"><i>03</i><div class="border f-cb"><a class="img" href=" " title="沥川往事（全2册）"><imgsrc="###"alt="沥川往事（全2册）"></a><h3><a href=" "  title="沥川往事（全2册）">沥川往事（全2册）</a></h3><p>【加】施定柔</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>04</i>羊道三部曲：春牧场+前山夏牧场+深山夏牧场（李娟作品套装共3册）</a></p><div class="unfold" style="display: none;"><i>04</i><div class="border f-cb"><a class="img" href=" " title="羊道三部曲：春牧场+前山夏牧场+深山夏牧场（李娟作品套装共3册）"><imgsrc="###"alt="羊道三部曲：春牧场+前山夏牧场+深山夏牧场（李娟作品套装共3册）"></a><h3><a href=" "  title="羊道三部曲：春牧场+前山夏牧场+深山夏牧场（李娟作品套装共3册）">羊道三部曲：春牧场+前山夏牧场+深山夏牧场（李娟作品套装共3册）</a></h3><p>李娟</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>05</i>贾志刚说战国（全五册）</a></p><div class="unfold" style="display: none;"><i>05</i><div class="border f-cb"><a class="img" href=" " title="贾志刚说战国（全五册）"><imgsrc="###"alt="贾志刚说战国（全五册）"></a><h3><a href=" "  title="贾志刚说战国（全五册）">贾志刚说战国（全五册）</a></h3><p>贾志刚</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>06</i>半小时漫画经济学2：金融危机篇</a></p><div class="unfold" style="display: none;"><i>06</i><div class="border f-cb"><a class="img" href=" " title="半小时漫画经济学2：金融危机篇"><imgsrc="###"alt="半小时漫画经济学2：金融危机篇"></a><h3><a href=" "  title="半小时漫画经济学2：金融危机篇">半小时漫画经济学2：金融危机篇</a></h3><p>陈磊,半小时漫画团队</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>07</i>中国精神读本</a></p><div class="unfold" style="display: none;"><i>07</i><div class="border f-cb"><a class="img" href=" " title="中国精神读本"><imgsrc="###"alt="中国精神读本"></a><h3><a href=" "  title="中国精神读本">中国精神读本</a></h3><p>王蒙,王绍光</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>08</i>白话资治通鉴（套装共10册）</a></p><div class="unfold" style="display: none;"><i>08</i><div class="border f-cb"><a class="img" href=" " title="白话资治通鉴（套装共10册）"><imgsrc="###"alt="白话资治通鉴（套装共10册）"></a><h3><a href=" "  title="白话资治通鉴（套装共10册）">白话资治通鉴（套装共10册）</a></h3><p>【宋】司马光,黄锦鋐</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>09</i>价值为纲：华为公司财经管理纲要</a></p><div class="unfold" style="display: none;"><i>09</i><div class="border f-cb"><a class="img" href=" " title="价值为纲：华为公司财经管理纲要"><imgsrc="###"alt="价值为纲：华为公司财经管理纲要"></a><h3><a href=" "  title="价值为纲：华为公司财经管理纲要">价值为纲：华为公司财经管理纲要</a></h3><p>黄卫伟</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>10</i>古琴之道</a></p><div class="unfold" style="display: none;"><i>10</i><div class="border f-cb"><a class="img" href=" " title="古琴之道"><imgsrc="###"alt="古琴之道"></a><h3><a href=" "  title="古琴之道">古琴之道</a></h3><p>崔益华,吕建福</p></div></div></li><li><p class="fold" style="display: block;"><a href=" "><i>11</i>大唐悬疑录：最后的狄仁杰（全5册）</a></p><div class="unfold" style="display: none;"><i>11</i><div class="border f-cb"><a class="img" href=" " title="大唐悬疑录：最后的狄仁杰（全5册）"><imgsrc="###"alt="大唐悬疑录：最后的狄仁杰（全5册）"></a><h3><a href=" "  title="大唐悬疑录：最后的狄仁杰（全5册）">大唐悬疑录：最后的狄仁杰（全5册）</a></h3><p>唐隐</p></div></div></li><li><p class="fold"><a href=" "><i>12</i>永久记录</a></p><div class="unfold" style="display:none;"><i>12</i><div class="border f-cb"><a class="img" href=" " title="永久记录"><imgsrc="###"alt="永久记录"></a><h3><a href=" "  title="永久记录">永久记录</a></h3><p>【美】爱德华·斯诺登,萧美惠,郑胜得</p></div></div></li><li><p class="fold"><a href=" "><i>13</i>再见王沥川</a></p><div class="unfold" style="display:none;"><i>13</i><div class="border f-cb"><a class="img" href=" " title="再见王沥川"><imgsrc="###"alt="再见王沥川"></a><h3><a href=" "  title="再见王沥川">再见王沥川</a></h3><p>施定柔</p></div></div></li></ul><a class="more" href=""><i></i>查看更多</a></div></div></div><div id="page-two" class="bookrack"><div class="books2"><header><h2>国风中文网</h2><a class="more" href="/yc">更多&gt;</a></header><div class="books"><div class="book"><div class="book-img"><a href=""><img src="img/books/book2.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="三体全集">三体全集</a></h3><p class="disc eps">中国科幻不可不读的里程碑之作</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book5.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="冬将军来的夏天">冬将军来的夏天</a></h3><p class="disc eps">这是一个温柔地集合了很多伤痛的故事。</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book12.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="熊镇2">熊镇2</a></h3><p class="disc eps">一个男孩被出柜，整个小镇沸腾了</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book9.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="学霸的爱情习题">学霸的爱情习题</a></h3><p class="disc eps">师弟有三好：智力爆表，可盐可甜，爱好撩人</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book8.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="嫁丑不可外扬">嫁丑不可外扬</a></h3><p class="disc eps">她以为，他是可怜巴巴的穷苦小鲜肉。 哪知道，他是心肠黑黑的撩妹小能手。 那天，他为</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div><div class="book"><div class="book-img"><a href=""><img src="img/books/book10.png" alt="book-img"></a></div><div class="book-info"><h3><a href="" title="楼边人似玉">楼边人似玉</a></h3><p class="disc eps">掌灯客栈的老板娘真的很讨人厌。 刻薄、爱财、狐媚不正经。 他修上清之道，斩世间万</p><a class="read" href="" title="立即阅读">立即阅读<i></i></a></div></div></div></div></div></div><footer><div class="g-ft"><div class="foot"><p class="link"><a href="###">XXX首页</a><span class="sep">|</span><a href="###">公司简介</a><span class="sep">|</span><a href="###">客户服务</a><span class="sep">|</span><a href="###">相关法律</a><span class="sep">|</span><a href="###">网站导航</a><span class="sep">|</span><a id="J_Service" href="javascript:void(0);">客服电话</a><span class="sep">|</span><a href="###">帮助中心</a><span class="sep">|</span><a href="###">作者中心</a></p></div><div class="right"><p>XXX公司版权所有©1997-<span id="j-year">2019</span> &nbsp;&nbsp;网络出版服务许可证（总）网出证（粤）字第030号 &nbsp;&nbsp;信息网络传播视听节目许可证号1908260 &nbsp;&nbsp;增值电信业务经营许可证 粤B2-20090191</p></div><p style="text-align: center;font-size: 16px;margin-top: 35px;"><a style="color: #888" href="http://beian.miit.gov.cn/">工业和信息化部备案管理系统网站</a></p><div class="share"><label>分享到：</label><div class="share-item"><a href="javascript:;" class="s2" data-type="xo">微信</a></div><div class="share-item"><a href="javascript:;" class="s4" data-type="xo">易信</a></div><div class="share-item"><a id="_share_b_tsina" href="javascript:;" class="s1">微博</a></div><div class="share-item"><a href="javascript:;" class="s3">QQ空间</a></div></div></div></footer><!--To TOP--><div class="slidebar"><div><button title="去上面" class="Top" onclick="toTop()"><svg t="1576802488524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2830" width="200" height="200"><path d="M233.376 722.752L278.624 768 512 534.624 745.376 768l45.248-45.248L512 444.128zM192 352h640V288H192z" fill="#181818" p-id="2831"></path></svg></button><button title="去下面" class="Bottom" onclick="toBottom()"><svg t="1576802685973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2963" width="200" height="200"><path d="M790.624 301.248L745.376 256 512 489.376 278.624 256 233.376 301.248 512 579.872zM192 736h640v-64H192z" fill="#181818" p-id="2964"></path></svg></button></div><div style="width:43px;height: 35px;background-color: #f2f2f2;display: flex;justify-content: center;align-items: center;border: 1px solid #c4c11a"><a href="info.html">版权</a></div></div></div><script src="js/main.js"></script><script src="js/toTop.js"></script><script>let topList = document.querySelectorAll(".foldList a");for (let i in topList) {topList[i].href = ' ';}let books = document.querySelectorAll('.book');for (let book of books) {book.onclick = function() {alert('欢迎阅读 !\n即将前往书籍详情页！');location.href = 'Read.html';return false;}}</script>
</body></html>

看到这里了就 [点赞+好评+收藏] 三连支持下吧！