web前端课设（个人博客）

本次所写的内容仅仅包括，Javascript,html,css,JQuery四项内容，纯前端，无后端。写得马马虎虎，如果不是太嫌弃的话，就进来看看吧。（源码下载链接放在评论区下方，有意者可取）

简单的页面预览如下：

1.博客资源模块（主页)

        在这个网页，用户可以浏览各类博客资源。后期会进行后端更新。顶上的四张图片采用fadein和fadeout动画函数实现轮播图。(如图1.1)

        本站的顶部导航采用固定布局，使其不会因为页面的下滑而消失（如下图）。该网页body用弹性，里面的内容整体采用div+css相对布局(浮动)。(如图1.2)

                                                                图1.1（顶部）

 

                                                                图1.2（底部）

2.博客浏览模块

当在博客资源那边点击任意一个博客时，会专门跳到一个专门用来看博客详情的网页。左边用div将该博主的信息进行显示。右边的博客详情，用户可进行滑动浏览。

                                                                        图2

3壁纸仓库模块

3.1网页顶部
        顶部采用了轮播图来增加了页面美观度，中部白色部分是导航区，用js做了相应链接处理可以帮用户定位到他们想要浏览的内容。

                                                                        图3.1

3.2小专题部分
        当点击进入某个小专题时，相应导航处经过js处理会有相应变化，给用户带来好的观感。

                                                                        图3.2

3.3小专题内容数量
在页面的下半部分会显示当前小专题有多少内容，点击会跳到下一波内容。

                                                                        图3.3

3.4图片放大观览

壁纸仓库中所有的图片点击时都会通过js获取到他们的src路径，之后利用js在body标签后加入一个包含img标签的div(css设置其全屏，背景微透明)，将获取到的路径放进img作为src的属性值，使其实现图片放大预览的效果。

                                                                图3.5.4

3.5后台管理模块
管理员可以在这个页面中实现对本站的文章控制，博客管理与审核等后台数据管理内容。

                                                                                 图3.5

附加：侧边导航栏
        当用户在任意一个界面点击头像时，会弹出一个侧边导航栏，用于实现一些小功能，小定位。

图：侧边导航

---

---

额，就先这样吧。其余的注册界面及一些链接界面，表单验证，js的各类事件，轮播图等，大家看着有兴趣的话，去下源码看就好。源码https://pan.baidu.com/s/11DvM2IFFTG4ZDjs8V6fcDw?pwd=web1（ 提取码会自动填写，如果没有自动填写自己手输 “ web1 ” 即可）

---

---