精选_基于HTML和CSS实现的TC读书网页面设计_源码打包

# 基于HTML和CSS实现的TC读书网页面设计 # 一、项目总体设计 ## 1.1 需求分析 ### 1.1.1 阐述 这个网页设计我是以“TC 读书网”为主题展开，选择这个题目，是因为自己本身就很喜欢看书，喜欢看各种各样的书籍。像很多读书爱好者一样，喜欢在安静的地方静静的看书，比如自己的房间里、图书馆、书店。喜欢把自己生活中的点点滴滴都装扮带有书香的气息。自己在家里的房间里，就装有书架，并摆满了各类书。每次回家我就很喜欢待在房间里，坐在书桌前看书。在这种环境下，能让自己的身心愉悦，心情美美的。自己也养成了坚持看书的习惯，在学校一旦有时间就会去图书馆或自习室看书。在书中不但能学习到很多东西，而且还会让一个人的精神面貌有所不同。在此之前我也浏览了很多读书网页，觉得很有意思。现在学了网页设计，当然也要根据自己的想法来设计自己的网页，同时想通过自己设计的网页，来满足更多读书爱好者的需求，让更多的爱好者在我设计的网页里找到更有意思的东西。 ### 1.1.2 功能 此网页能够满足喜欢看书的书友，随时随地的打开网页就可以阅读各种各样的书籍，无论是国内还是国外的书籍都可以看，网页的设计还进行了书籍的分类，有在线阅读的书籍、近段时间书籍阅读量的排行榜、本网页出版的图书等等。网页的设计根据自己个人爱好来设计，比较简易，颜色不是浓艳，这样正是符合了读书的一个环境。本网页还设计了登录页面，可以让更多的读书爱好者加入进来。读书爱好者能及时、准确、完整阅读到自己喜欢的书籍，管理员可以在后台对书籍的更新点信息进行准确校对、修改和删除。 ### 1.1.3 技术 - HTML 语言 - CSS 样式表 ## 1.2 网站结构分析 该网站主要由首页、栏目页、内容页组成，每个页面都由头部（logo、TC 读书网）、导航栏、主体部分及尾部版权栏构成。 **导航栏** 首页、国学/古籍、出版图书、电子书、网络小说、排行榜、读书导航七个目录组成。 **主体部分** 图片展示栏、文字说明 ## 1.3 网站风格分析 网站主要以简约风格为主，简洁的表现形式来满足读书爱好者对此网页的了解。 - **总体印象**：以展示本网页优点等，主题突出，内容精干，形式简洁 - **版式布局**：栏目集中，分栏目检索明确，导航标志清晰 - **色彩运用**：总体呈浅灰色简洁风格 - **图片运用**：配合文字，以极简的图片效果吸引用户 - **语言**：中文 - **结构**：浏览路线方便快捷、清晰明确  ## 1.4 网站结构图  # 二、项目详细设计 ## 2.1 登录页面设计    登陆界面主要由顶部的滚动文字、用户输入账号登录、用户注册、忘记密码组成。在登录框中加入了超链接，只要点击登录就可以进入首页。 **所遇难点**：通过输入账号登录（未实现） ## 2.2 主页页面设计    整个主页布局主要是用了盒子嵌套和排版，内容有寻找框，右上角有注册/登录键，导航栏，图书分类。导航栏通过加入超链接点击进入对应的页面。在页面最底部还加入了网页的相关信息。 **所遇难点**：未实现中间图片为滚动的。 ## 2.3 在线读书页面设计    在线读书页面的设计很合理，设计了图书的分类、实现不同兴趣爱好的读书者的需求，图书也设计了读书推荐，读书推荐是根据广大读书者的评价做出的推荐，最大的板块是最新发行的图书，每本书都用一句话做出简介。整个页面的设计也非常简洁美观。 # 三、项目总结 在设计过程中也出现了很多的问题，如忘记使用浮动导致盒子位置错乱、class 和 id 的使用有什么区别，还有文字滚动的属性，但通过看书，上网查询，请教同学等方式，不断地学习、思考、实践、提高，最终顺利的完成了作品。但是还是有一些自己想要设计进去的东西没有办法加进去，因为技术还不够，自己时间的安排不合理没有学习到那方面的知识。例如：使用 JavaScript 脚本技术让图片滚动，输入正确的账号才可以登录。