# blog

**Repository Path**: sodacat/blog

## Basic Information

- **Project Name**: blog
- **Description**: 个人网页博客制作，web学习
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-26
- **Last Updated**: 2023-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# blog

### **介绍**
个人网页博客制作，web学习

###  **项目目的** 


(1)	制作个人博客：登录和注册页面版型差不多，算作一部分。其次分开写了三个基本页面：index主页、about个人信息页、show兴趣（文件上传下载）页。

(2)	主页主要展示了博客的版型设计，插入了喜欢的元素，通过轮播图和视频以及音频展现博主的个人兴趣爱好领域内容。
主页定下整个博客的基调，头部和尾部部分后面都是没有较大变化的。个人信息页就是简单展现了博主的个人信息，兴趣页则是可以下载博主喜欢的内容以及上传文件。

PS:导航的样式借鉴网络



###  **项目内容** 


(1)	主要采用了盒子模型设计页面，通过普通流与定位以及部分flex弹性布局来实现页面。

(2)	使用的前端内容主要有：div、span、i、form、p、input表单、a超链接、h系列标题、video视频、audio音频、ul无序列表、ol有序列表、table表格、label标签、button

(3)	CSS主要内容有：position固定定位和relative、absolute部分、flex流式布局部分、margin、padding间距部分、z-index叠加权重、边框线Border部分、text-align文本对齐、animation动画部分、font字体样式设计部分、color、width、height、background基本属性部分、

(4)	js：自己定义了使用定时器制作的移动动函数画animate、生成动态圆圈函数、实现轮播图、和失去焦点事件修改内容innerHTML、插入元素和删除元素相关函数、本体存储localStorage相关函数、

(5)	后台：自己定义了上传文件转存的php函数load、连接数据库实现注册和登录。


###  **项目过程** 

(1)	 **登录和注册页：** 
![输入图片说明](img/image001.png)

![输入图片说明](img/image005.png)

![输入图片说明](img/image007.png)


(2)	 **Index首页：** 

![输入图片说明](img/image015.png)

导航部分可以跳转到about页和show页；主要采用flex流式布局

向下越过首页头部大拉页之后出现统一的头部（设置了叠放权重），通过最右的id信息可以跳回登录页面，通过最左边的logo可以从别的页面跳回主页
（登陆注册页除外）

![输入图片说明](img/image019.png)
![输入图片说明](img/image021.png)

(3)	 **About个人信息&备忘录页：** 

跳转页面布局与首页基本相同：

![输入图片说明](img/image053.png)
![输入图片说明](img/image055.png)

个人信息部分仍然以盒子模型+flex流式布局为主，右边信息采用了表格进行格式整理，点击头像可以上传头像。

![输入图片说明](img/image057.png)


about页简单利用了localStorage做备忘录功能：

![输入图片说明](img/image067.png)
![输入图片说明](img/image069.png)
![输入图片说明](img/image071.png)

编写了个load函数，还有问题没解决，主要是除了delete键，按其余的删除键虽然能删除发出的备忘记录：
但是没有真正清除localstorge的数据，只有delete是真的能清除数据.


(4)	 **Show文件上传下载页** ：


![输入图片说明](img/image075.png)

文件上传是对过程进行了学习之后自己写的函数，保存到了本地的另一个文件夹...
底下的是文件下载，用链接来做的

![输入图片说明](img/image077.png)

![输入图片说明](img/image079.png)

![输入图片说明](img/image081.png)

![输入图片说明](img/image083.png)



###  **项目总结** 



①　自己写了许多函数，写php的load函数时对文件上传过程进行了一定的学习，耗时挺久的，简单使用了加密方式，挺麻烦的就是。

②　写轮播图的相关函数页花了很多时间，改了好多种Bug，最终目前没看到很明显的Bug，不过学到了许多，对js的熟悉又进一步。尤其是动态生成小圆圈的部分后面用起来很方便。

③　LocalStorage的函数已经绞尽脑汁了，但是还是达不到预期的功能（点击删除也会把本地的此条键对值删除）不过对LocalStorage以及sessionStorage有一定的基础了解。

④　对盒子模型和flex流式布局有比较清晰的认识了，使用了许多css样式，做自己的网页还是挺开心的。