基于HTML+CSS+JavaScript的在线图书阅读网页设计

此网页能够满足喜欢看书的书友，随时随地的打开网页就可以阅读各种各样的书籍，无论是国内还是国外的书籍都可以看，网页的设计还进行了书籍的分类，有在线阅读的书籍、近段时间书籍阅读量的排行榜、本网页出版的图书等等。网页的设计根据自己个人爱好来设计，比较简易，颜色不是浓艳，这样正是符合了读书的一个环境。该网站主要由首页、栏目页、内容页组成，每个页面都由头部（logo、TC读书网）、导航栏、主体部分及尾部版权

biyezuopinvip

5539人浏览 · 2022-09-29 09:26:07

biyezuopinvip · 2022-09-29 09:26:07 发布

目录
1.项目总体设计 2
1.1需求分析 2
1.2网站结构分析 3
1.2.1导航栏 3
1.2.2主体部分 3
1.3网络风格分析 3
1.4网站结构图 3
2.项目详细设计 4
2.1登录页面设计 4
2.2主页页面设计 5
2.3在线读书页面设计 6
3.项目总结 7
4.参考文献 7

此网页能够满足喜欢看书的书友，随时随地的打开网页就可以阅读各种各样的书籍，无论是国内还是国外的书籍都可以看，网页的设计还进行了书籍的分类，有在线阅读的书籍、近段时间书籍阅读量的排行榜、本网页出版的图书等等。网页的设计根据自己个人爱好来设计，比较简易，颜色不是浓艳，这样正是符合了读书的一个环境。本网页还设计了登录页面，可以让更多的读书爱好者加入进来。本文转载自http://www.biyezuopin.vip/onews.asp?id=14788读书爱好者能及时、准确、完整阅读到自己喜欢的书籍，管理员可以在后台对书籍的更新点信息进行准确校对、修改和删除。

技术：HTML语言、css样式表。

1．2网站结构分析
该网站主要由首页、栏目页、内容页组成，每个页面都由头部（logo、TC读书网）、导航栏、主体部分及尾部版权栏构成。
1.2.1导航栏
导航栏由：首页、国学/古籍、出版图书、电子书、网络小说、排行榜、读书导航七个目录组成。
1.2.2主体部分：图片展示栏、文字说明
1.3 网站风格分析
网站主要以简约风格为主，简洁的表现形式来满足读书爱好者对此网页的了解。
1、总体印象：以展示本网页优点等，主题突出，内容精干，形式简洁；
2、版式布局：栏目集中，分栏目检索明确，导航标志清晰；
3、色彩运用：总体呈浅灰色简洁风格；
4、图片运用：配合文字，以极简的图片效果吸引用户；
5、语言：中文；
6、结构上：浏览路线方便快捷、清晰明确；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>读书网</title>
</head>
<link rel="stylesheet" type="text/css" href="Untitled-2.css">
	
<body>
	<div align="center" id="s1">
	<div align="center" id="t1">
		<a id="ds">读书好，好读书，读好书！</a>
		<a id="dl" href="Untitled-3.html">注册|登录</a>
		</div>
	</div>
<div id="entirey">
	 <div id="sousuo">
		 <img src="../images/logo.png1.png"/>
		 <div id="ssl"><div data-reactid=".1"><form id="ssll" action="/search.do" data-reactid=".1.0"><input name="key" id="sslla" type="text" value="平凡的世界" data-reactid=".1.0.0" autocomplete="off"><input name="type" type="hidden" value="4" data-reactid=".1.0.1"><button type="submit" data-reactid=".1.0.2" id="ss"><span id="twe">搜索</span></button></form><span data-reactid=".1.1"></span></div></div>
		 <div id="dysj">
                    <a id="wddy" href="#" target="_blank">我的订阅</a>
                    <a id="wdsj" href="#" target="_blank">我的书架</a>
       </div>
	</div>
	<div id="dhlhz">
<ul  id="dhl">
	<li id="sy"><a href="index.html">首页</a></li>
	<li id="phb"><a href="Untitled-1.html">在线读书</a></li>
	<li id="gxgj"><a href="Untitled-2.html">国学/古籍</a></li>
	<li id="cbts"><a href="Untitled-4.html">出版图书</a> </li>
	<li id="dzs"><a href="#">电子书</a></li>
	<li id="wlxs"><a href="#">网络小说</a></li>
	<li id="zxds"><a href="#">排行榜</a></li>
	<li id="dsdh"><a href="#">读书导航</a></li>	
		</ul>
</div>
	<div class="shouye" ;>
                    <div class="gfzww">
                        <div class="sub">
                            <h3 class="fl">国风中文网</h3>
                            <p>
                                <a class="hot" href="#">都市生活 |</a>
                                <a class="hot" href="#" >历史传奇 |</a>
                                <a class="ll" href="#" >玄幻仙侠</a>
                            </p>
                            <p>
                                <a href="#" style="color: #FF0004">悬疑探险</a>
                                <a href="#" >| 灵异恐怖 |</a>
                                <a class="ll" href="#" >短篇小说</a>
                            </p>
						</div>
                    </div>
                    
		<div class="gfzww">
                        <div class="sub">
                            <h3 class="cw">采薇书院</h3>
                            <p>
                                <a class="hot" href="#" style="color: #FF0004">浪漫青春</a>
                                <a class="hot" href="#" >| 都市言情 |</a>
                                <a class="gfgy" href="#" style="color: #FF0004">古风古韵</a>
                            </p>
                            <p>
                                <a href="#" >穿越架空 |</a>
                                <a href="#" style="color: #FF0004">宫斗宅斗</a>
                                <a class="zt" href="#" >| 种田重生</a>
                            </p>
						</div>
                    </div>
		
		<div class="gfzww">
                        <div class="sub">
                            <h3 class="tsg">图书</h3>
                            <p>
                                <a class="hot" href="#" style="color: #FF0004">小说作品</a>
                                <a class="hot" href="#" >| 人文社科 |</a>
                                <a class="cg" href="#" style="color: #FF0004">成功励志</a>
                            </p>
                            <p>
                                <a href="#" >经济管理 |</a>
                                <a href="#" >品质生活 |</a>
                                <a class="jsj" href="#" >计算机系</a>
                            </p>
						</div>
                    </div>
		<div class="gfzww">
                        <div class="sub">
                            <h3 class="tsg">客户端APP下载</h3>
                            <p>
                                <a class="hot" href="#" style="color: #FF0004">新用户全场免费畅读5天</a>
                            </p>
                            <p>
                                <a href="#" >10W+原创小说 |</a>
                                <a href="#" >8W+经典出版</a>
                            </p>
						</div>
                    </div>
						    
                </div>
	<div class="gundong">
	<img src="../images/滚动1.jpeg.jpg"/>
	</div>
	<div class="zbtj">
	<div class="cdl">
		<h3>主编推荐</h3>
		<p>
			<a href="#">小说</a>
			<a>|</a>
			<a href="#">图书</a>
		</p>
	  </div>
		<div class="sjjj">
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="jies">
			<img src="../images/流浪地球.jpg"/>
			<h3>流浪地球</h3>
			<p><a>《三体》作者、首位雨果奖亚洲得主刘慈欣作品。同名电影由吴京、屈楚萧、李光...</a></p>
			<li><a href="#">点击阅读></a></li>
			</div>
			<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="jies">
				<img src="../images/金庸作品.jpg"/>
				<h3>金庸作品全集</h3>
				<p><a>金庸先生亲自重新修订版本。</a></p>
				<li><a href="#">点击阅读></a></li>
			</div>
			<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="jies">
				<img src="../images/情商系列.jpg"/>
				<h3>情商系列（全6册）</h3>
				<p><a>《情商》一书不仅打破了长久以来智商的天生决定论，更为心理学界探讨已久的“情绪智慧”问题提出关键性的解释。</a></p>
				<li><a href="#">点击阅读></a></li>
			</div>
		</div>
	</div>
  <div class="gf">
	<div class="gfdh"><h3>国风中文网</h3>
			<p><a href="#">更多>></a></p>
			<h4>国风中文网畅销榜</h4>
	  </div>
	<div class="gf1">
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="gfxh">
			<img src="../images/复国.jpg"/>
		<h3>复国</h3>
			<h4>小桥老树</h4>
				<p><a>大侯王朝覆灭，三皇子侯云策经过浴血奋战后复国的故事。</a></p>
				<li><a href="#">点击阅读></a></li>
		</div>
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="gfxh">
			<img src="../images/民国奇人.jpg"/>
		<h3>民国奇人</h3>
			<h4>南无袈裟理科佛</h4>
				<p><a>大乱之世，江湖浩荡，正所谓“天下风云出我辈，民国奇人北斗来”。</a></p>
				<li><a href="#">点击阅读></a></li>
		</div>
		</div>
	<div class="gf2">
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="gfxh2">
			<img src="../images/丹师剑宗.jpg"/>
		<h3>丹师剑宗</h3>
			<h4>古栋</h4>
				<p><a>热血青年手握猥琐剑法，炼丹副业威名赫赫，发誓成为史上最强暴的丹师剑宗。 </a></p>
				<li><a href="#">点击阅读></a></li>
		</div>
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="gfxh2">
			<img src="../images/万古剑帝.jpg"/>
		 <h3>万古剑帝</h3>
			<h4>虚尘</h4>
				<p><a>陨落死地离奇崩灭，一世无敌不败的凡尘大帝神秘失踪，唯有一缕剑意不灭</a></p>
				<li><a href="#">点击阅读></a></li>
		</div>
		</div>
	  <div class="sxb">
	  <ul class="phb">
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">01 绝世高手</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">02 商梯</a></li>
	      <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">03 民国奇人</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">04 天才鬼医</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">05 都市最强战医</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">06 捡漏</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">07 最佳女婿</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">08 女子监狱风云</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">09 都市最强狂兵</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">10 桃运神医</a></li>
		  </ul>
	  </div>
  </div>
	 <div class="gf">
	<div class="gfdh"><h3>采薇书院</h3>
			<p><a href="#">更多>></a></p>
			<h4>采薇书院畅销榜</h4>
	  </div>
	<div class="gf1">
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="gfxh">
			<img src="../images/一代医后.jpg"/>
		<h3>一代医后</h3>
				<p><a>玉子珊原以为穿越到侯府嫡女身上日子应该不错，没想到老爹是渣，老娘糊涂，还有个祖...</a></p>
				<li><a href="#">点击阅读></a></li>
		</div>
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="gfxh">
			<img src="../images/隐婚甜爱.jpg"/>
		<h3>隐婚甜爱</h3>
				<p><a>十五岁的顾安好，被父亲赶出家门；一年以后，相依为命的母亲撒手人寰。 隐婚后次遇到...</a></p>
				<li><a href="#">点击阅读></a></li>
		</div>
		</div>
	<div class="gf2">
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="gfxh2">
			<img src="../images/楼边人似玉.jpg"/>
		<h3>楼边人似玉</h3>
				<p><a>掌灯客栈的老板娘真的很讨人厌。 刻薄、爱财、狐媚不正经。 他修上清之道，斩世间万...</a></p>
				<li><a href="#">点击阅读></a></li>
		</div>
		<div onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'" class="gfxh2">
		<img src="../images/嫁丑不可外扬.jpg"/>
		 <h3>嫁丑不可外扬</h3>
				<p><a>她以为，他是可怜巴巴的穷苦小鲜肉。 哪知道，他是心肠黑黑的撩妹小能手。 那天，他为了和她独处...</a></p>
				<li><a href="#">点击阅读></a></li>
		</div>
		</div>
	  <div class="sxb">
	  <ul class="phb">
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">01 金庸作品全集（新修版）</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">02 大江大河（全4册）</a></li>
	      <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">03 沧月.听雪楼（共4册）</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">04 如何让你爱的人爱上你</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">05 邓小平时代</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">06 30天完美身材</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">07 穷查理宝典</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">08 崔老道传奇：三探无底洞</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">09 北方的空地</a></li>
		  <li onmouseover="this.style.backgroundColor='#F4F9FD'"  onmouseout="this.style.backgroundColor='#FFFFFF'"><a href="#">10 活着</a></li>
		  </ul>
	  </div>
  </div>
<div align="center" class="diye">
	<div align="center" class="diyek">
	<div class="weibut">
		<h4>出版图书</h4>
		<p><a href="#">小说作品</a><a> | </a><a href="#">人文社科</a></p>
		<p><a href="#">成功励志</a><a> | </a><a href="#">经济管理</a></p>
		<p><a href="#">品质生活</a><a> | </a><a href="#">计算机类</a></p>
		<p><a href="#">文学作品</a><a> | </a><a href="#">更多>>>></a></p>
		</div>
	<div class="weibu">
		<h4>国风中文网</h4>
		<p><a href="#">都市生活</a><a> | </a><a href="#">官场职场</a></p>
		<p><a href="#">玄幻仙侠</a><a> | </a><a href="#">科幻奇幻</a></p>
		<p><a href="#">军事谍战</a><a> | </a><a href="#">悬疑探险</a></p>
		<p><a href="#">灵异恐怖</a><a> | </a><a href="#">更多>>>></a></p>
		</div>	 
	<div class="weibu">
		<h4>采薇书院</h4>
		<p><a href="#">都市言情</a><a> | </a><a href="#">穿越架空</a></p>
		<p><a href="#">种田重生</a><a> | </a><a href="#">宫斗宅斗</a></p>
		<p><a href="#">古风古韵</a><a> | </a><a href="#">仙侠幻情</a></p>
		<p><a href="#">浪漫青春</a><a> | </a><a href="#">更多>>>></a></p>
		</div>
	<div class="weibu">
		<h4>杂志</h4>
		<p><a href="#">国家人文</a><a> | </a><a href="#">南方人物</a></p>
		<p><a href="#">南都周刊</a><a> | </a><a href="#">博客天下</a></p>
		<p><a href="#">环球科学</a><a> | </a><a href="#">南都娱乐</a></p>
		<p><a href="#">凤凰周刊</a><a> | </a><a href="#">更多>>>></a></p>
		</div>
	</div>
	</div>
	<div align="center" class="zuidi">
	<p><a href="#">TC首页</a><a> | </a><a href="#">公司简介</a><a> | </a><a href="#">客户服务</a><a> | </a><a href="#">网站导航</a><a> | </a><a href="#">意见反馈</a><a> | </a><a href="#">客服电话</a><a> | </a><a href="#">相关法律</a><a> | </a><a href="#">帮助中心</a><a> | </a><a href="#">作者中心</a></p>
	<p><i>TC公司版权所有©2019-2035   网络出版服务许可证（总）网出证（粤）字第287号   传播视听节目许可证号2358049   增值电信业务经营许可证 白B-2018020042</i></p>
	
	
	</div>
</div>
</body>
</html>