我的博客网站

摘  要：网站采用了DIV+CSS开发技术，有网站首页、新闻中心、文章列表、兴趣排行、个人资料和手机页面等，界面设计以灰色为主，极强的表现了网络化生活。网站板块都是使用框架，再加样式来整理位置。布局清爽大方，符合交互要求。网站结合了后台系统完成了外链版面和单页面等功能。运用js插件实现了手机版的操作。 

先将头部尾部做完，将导航做再头部中。网站首页分上下两部分做。上部分做了一个轮播的幻灯片，下面部分做了一个标题和新闻的内容加内容页面。新闻页面先放了一张主图，下面部分分了左右两块div来做。左边是列表，右面的新闻资讯。新闻资讯中添加了内容页面。文章页面还是引用了滚图，下面部分用div打框在后台添加文章内容来做。在列表和新闻页面中做了分页。最后的两个页面是使用我的后台做，在后台中添加内容和外链。

关键词：DIV+CSS 我的博客网站 October CMS 手机版面

目 录

1 引言 1

1.1 我的博客网站的开发背景 1

1.2 我的博客网站的意义与设计目的 2

2 开发软件简介 3

2.1 我的博客网站开发环境 3

2.2 本项目应用的主要开发工具 3

2.2.1 Sublime Text 3 3

2.2.2 October CMS（Sqlite数据库） 3

2.2.3 Adobe Photoshop CC 2015 4

2.2.4 node.js 4

2.2.5 Npm 5

2.2.6 Yarn 5

2.2.7 webpack 6

2.2.8 postcss 6

2.2.9 HTML 7

2.3 本项目主要开发技术 8

2.3.1 Html 8

2.3.2 DIV+CSS 12

3 项目概述 13

3.1 项目概述 13

3.2 项目进度计划 16

4 简要设计 17

4.1 网站结构图 17

4.2 现行研究存在的问题及解决办法 18

5 网站实现 19

5.1 Pc端网站的设计与布局 19

5.2 手机页面 24

5.3 网站内容页的实现 25

5.4 网站的维护 26

6总结与展望 27

致谢 28

参考文献 29