文档章节

个人博客建站最全解析

o
 osc_a22drz29
发布于 2019/03/24 12:09
字数 1645
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

大家好~又见面了。

今天呢我想给大家,也给我自己,

对我的个人网站yanyy.cn/yanyy

做一个全面的整理和分析。

也给有这方面想法的朋友一个参考。

做网站的有爱好也有带有目的性的。

不过我还是希望大家能够传播正能量~

进入正题

网站首页

看到上图,是网站的首页。

首页上用户直接看得到的部分有(导航栏和轮播大图)

当时写这个网站的设想是在2018年4月份的时候。

距离现在也有一年多了。

导航栏用的是inline-block。

为了让用户怎么拖动窗口大小导航栏都不会移动

以及和logo图并排。所以将父元素div也改为inline-block。

由于后面要加的页面越来越多,所以引用了挺多css样式库。

有的库优先级太高,把我自己的样式给顶了,

所以只能用!important来提高优先级。

轮播图用的原生js代码,非常繁琐

轮播代码一角

如果需要访问请点击->

http://www.yanyy.cn/yanyy/js/container.js

最近会利用jQuery(js支持库)对它进行更新。

首页的剩余内容是(技能树+博主介绍+尾页) 

 网站剩余内容

技能树就是简单的图片+图片+li标签。

博主介绍就是p标签+p标签+position定位。

我这个审美确实。。。

不是说我审美不行,是写到后面完全没有内容可写。

目前网上流行的个人博客页面。

首页上基本上是轮播图+文章+文章

如果我有这么多的素材,我也能将首页排的满满的。

这又涉及到一个爬虫爬取其他页面文章的问题了。

上次我在博客园(cnblogs.com)写的文章。

被爬虫爬到几个莫名网站上给当做文章显示了。 

 

我的文章被别的网站爬取

这种就无法判断文章的真实性和有益性。

就像我这种水平写的文章还能被抓取。

当然这样爬取文章也有一定难度。

(等我有了自己的服务器一定会试试。)

网站的动态页面:

 

由于QQ空间,知乎,微信的封闭和隐私性,

爬虫无法去爬取页面内容。所以只能用蠢办法。

自己一个一个更新,基本上上想到了要更新才去更新。

不过有些不会在空间或者其他地方发表的东西。

可能会在网站动态上看到。

这里用到了一个css3的新功能。 

当鼠标悬停时放大图片:transform:scale(2.5);


 

网站的文章页面:

 

 

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

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

不得不说省了很多功夫。

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

还不一定有这个好看。

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

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

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

 

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

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

 

网站的留言界面。

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

用的是PHP+MySQL数据库

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

我一定会写好看来的!!

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

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

部分PHP和SQL语句

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

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

然后再输出到页面中。

网站的关于页面

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

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

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

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

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

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

就可以加好友啦~

 

网站的手机端。

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

横屏和竖屏的问题。

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

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

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

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

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

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

 

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

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

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

 

简单又暴力。

由于又包含了PHP内容

所以整个页面为.php后缀。

这样留言页面才能完全显示。

这里要特别提到一个地方,

我觉得手机端的文章版块是最舒适的了

不管是文字还是图片显示很舒服。

 

感谢foundation框架对本网站的大力支持。hhh


 

可能大家会注意到在网站的底部还有一个

这个是友盟+(https://www.umeng.com/)的标志。

他可以记录网站被访问次数等数据,便于了解网站情况。

站长必备~

其实如果说完全小白要做一个网站也不是不可能。

只要有钱,什么样的网站都可以定制。

如果是草根站长。没有太多时间来学习。

那么网上很多自主建站网站可以使用。

像织梦cms,帝国cms,凡科cms。

那样做出的网站确实要比我手码的要好看。

不过不是自己写的终究不是自己的

这可能就是我的一点执念吧。

这个网站用时1个半月。全部代码大约3000行。

重复率20%左右。文字5000字左右。

虽然技术含量不怎么高,但我想这会是我值得珍藏的记忆。

如果对建站感兴趣的朋友们,也可以在下方留言讨论。

一起成长一起进步~

点击这里,进入网站访问吧!

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
如何做一个网站?建网站需要什么?

无论企业建站还是个人建站,不管你搭建网站的用途是什么,想必大家最在意的就是价钱和质量,那么就会出现建网站多少钱和什么建站系统好的两大问题,当然花少钱搭建一个质量好的网站是建站朋友...

yunlingh
2016/05/30
19
0
零基础入门—网站建站教程(新手必备)

前言 相信很多新用户会有这样的疑惑,我要做个网站,到底要使用什么产品,如何能快速完成网站建站呢?搭建网站有两种选择,一种是直接购买建站模板,另一种则是自行建站。两类建站方式对比如...

JuhuiYouyun
04/01
0
0
零基础入门—网站建站教程(新手必备)

前言 相信很多新用户会有这样的疑惑,我要做个网站,到底要使用什么产品,如何能快速完成网站建站呢?搭建网站有两种选择,一种是直接购买建站模板,另一种则是自行建站。两类建站方式对比如...

中小企业上云
04/01
0
0
零基础入门—网站建站教程(新手必备)

相信很多新用户会有这样的疑惑,我要做个网站,到底要使用什么产品,如何能快速完成网站建站呢?搭建网站有两种选择,一种是直接购买建站模板,另一种则是自行建站。两类建站方式对比如下: ...

回忆@旧时光
2019/04/14
0
0
零基础入门—网站建站教程(新手必备)

前言 相信很多新用户会有这样的疑惑,我要做个网站,到底要使用什么产品,如何能快速完成网站建站呢?搭建网站有两种选择,一种是直接购买建站模板,另一种则是自行建站。两类建站方式对比如...

Infatuation
04/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux下java环境搭建

1、jdk下载: 官方地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 如下图所示,我这边选择的是红框中的版本 2、压缩包上传至服务器 将下载的压缩包上传...

wc_飞豆
58分钟前
17
0
面试题:Java对象不再使用时,为什么要赋值为null?

前言 许多Java开发者都曾听说过“不使用的对象应手动赋值为null“这句话,而且好多开发者一直信奉着这句话;问其原因,大都是回答“有利于GC更早回收内存,减少内存占用”,但再往深入问就回...

码农突围
今天
22
0
设计模式(5) 原型模式

原型模式 原型模式的适用场景 浅拷贝 深拷贝 用Initialize方法修改初始化状态 原型模式与之前学习的各种工厂方法、单例模式、建造者模式最大、最直观的区别在于,它是从一个既有的对象“克隆...

zhixin9001
今天
7
0
获取免费的pycharm激活码网站

http://www.lookdiv.com/

云烟成雨forever
今天
27
0
用Helm部署Kubernetes应用,支持多环境部署与版本回滚

1 前言 Helm是优秀的基于Kubernetes的包管理器。利用Helm,可以快速安装常用的Kubernetes应用,可以针对同一个应用快速部署多套环境,还可以实现运维人员与开发人员的职责分离。现在让我们安...

南瓜慢说
今天
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部