个人博客建站最全解析 (2)

个人博客建站最全解析

 

 

网站的文章页面:

 

个人博客建站最全解析

 

 

这里用的是css库foundation.css的栅格样式。

 

这样的样式经常在论坛上看到,

 

不得不说省了很多功夫。

 

如果手动写一个这样的样式,要花费很多的时间。

 

还不一定有这个好看。

 

文章区的文章很多都没有写完,正在努力码中~

 

如果你点击未完成的文章,那么就会提示你:

个人博客建站最全解析

 

 

如果你点击到已经完成的文章,那么就会跳转到相关的文章页面:

 

个人博客建站最全解析

 

电脑上的排版主要是:缩进+p标签。

 

不得不说里面有些文章很呆...

 

 

网站的留言界面:

 

这个页面可能是最具技术性的页面了。

 

用的是PHP+MySQL数据库

 

个人博客建站最全解析

 

 

虽然有技术体现,但是页面还是很丑!

 

我一定会写好看来的!!

 

目前这些留言都是我一个人留的,就很尴尬。

 

只有少部分是朋友留下的。可以多去踩踩!

 

个人博客建站最全解析

 

部分PHP和SQL语句

由于不熟悉fetch_assoc()的操作。

 

所以只能用这么呆的方法一个一个来储存留言数据到数据库。

 

然后再输出到页面中。

 

 

网站的关于页面

个人博客建站最全解析

 

基本上是首页的内容照搬。

 

可能真的是词穷吧,完全想不到什么好东西来装饰。

 

还是自己的阅历太少,没有什么内涵。

 

在网站的底部栏里有个彩蛋。

 

如果你是电脑端访问,那么在将鼠标放在

 

QQ和微信的图标上时,会弹出一个图片,扫码

 

就可以加好友啦~

 

个人博客建站最全解析

 

 

 

网站的手机端。

 

考虑到手机访问和电脑访问的巨大差别。

 

横屏和竖屏的问题。

 

于是我发挥我的聪明才智,另外写了手机页面。

个人博客建站最全解析

 

火狐浏览器上的手机显示页面

整个页面的实现呢也是用的foundation框架。

 

追求极简的体验。没有太华丽的动画(还不是因为写不出来。)

 

单击更多会显示出竖向导航栏。

 

刚刚进入页面是全站阅览模式。

个人博客建站最全解析

 

 

 

 

随意点击一个版块就会切换到该页面的内容。

 

同时会隐藏其他版块的内容。

个人博客建站最全解析

 

 

这里主要是应用了js。点击后执行函数

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpddyj.html