如何仿建网站（附带个人博客样式搭建实例）如何仿建网站？附带个人博客

本文及技术仅供学习，请勿用于其他用途更新记录

【1】2020.03.06-16:51

1.完善内容

正文前言
本教程的博客园样式实例不公布完整css代码，白嫖党请走开，氪金大佬另谈本教程为初级篇，未涉及JavaScript 我们每天都会在在博客园写博客，看博客，时间久了，未免对这千篇一律的博客皮肤感到烦躁
那能不能想办法更改呢
答案是可以的
有的人可能会问，我自己又没有什么编程基础（那你来博客园干啥awa），更何况不会css，该怎么办呢？
肯定是学习 + 看教程喽
本文就是一篇附带实例的教程
那么，你要做的就是学习
根据个人实际经历来看，我建议你

8天学习HTML（个人实际5天）
8天学习css（个人实际10天）
10天学习JavaScript（个人实际10天）

（本人有一定的编程基础）
然后就能达到随心所欲的修改博客园皮肤的水平了
想达到专业水平还是老老实实的学上半年再说吧
好了，回归正题
仿建网站的前提是千万不要侵权，即使是做个皮肤自己欣赏欣赏，也要记得加上原网站的链接
首先你要选择一个你认为满意的网站
然后学习它的源代码
然后自己在博客园码一些css的东西
就这么简单
下面还是让我们边看实例边说话
实例时间
先放张图片感受一下

文章图片

图1 原网站

文章图片

图2 个人博客园皮肤
没错，是高仿
【如何仿建网站（附带个人博客样式搭建实例）】首先先让我们来看一下原来的样子

文章图片

图3 无css
没错，非常磕碜（不磕碜我就不改了awa）
首先我们应该明白仿建一个网站需要怎么做
以这个网站为例，我们需要按顺序的像做加法一样慢慢实现
\(head\) + \(body\) + \(foot\)
而\(body\)又可以分为
\(left\) + \(right\) + \(list\)
然后是后期的
\(fix\) + \(HTMLhead\)
总共七步
\(head\) + \(left\) + \(right\) + \(list\) + \(foot\) + \(fix\) + \(HTMLhead\)
再算上前期的\(study\)，总共就是8步
第一步：study
首先我们按F12来查看网页源代码，一步步追溯看看每一步到底是怎么实现的
经过查找我们可以发现网页的主体div

这个div块中又包含了这样几个div

……

鼠标悬停在第一个div代码上时，发现logo被指出
由此我们知道第一个div代码块是用来实现logo及其相关
我们用不到，因此无需研究
鼠标悬停在第二个div代码上时，发现图片

文章图片

图4 头部
被指出，而这张图片正是我们所需要的头部
以此类推，我们会发现第3，4个div分别是body和foot
而第2，4个div是空div
所以，我们就开始主要研究第三个div
div展开后的代码

/*以下省略N行*/

为啥省略呢，一是因为太长，二是因为不需要
通过观察可以发现，我们需要学习的就只有前两个div

mc_map_border_left
和
mc_map_border_right

鼠标点击div代码，我们会发现右侧出来了这么一个东西

文章图片

图4 右侧的样式表
其中橙色笔框住的就是关于这个div的所有css样式
而红色笔框住的就是我们需要的图片
以此类推，我们可以找到我们所需要的四张图片
接下来就是写css去实现
至于怎么实现，接下来让我们观察一下博客园的页面源代码
（这里就不贴出来了）
接下来不再提供完整css代码，仅提供思路认真学习请往下看，妄想将css片段拼接起来的自觉Alt + F4 接下来就是下一级的div

… … …

我们从上往下解决
首先header的用途是用来设置mcbbs中头部的背景图片的
所以说css肯定有个设置背景图片的代码
然后分别设置xy轴的不重复

#header{ /****/ }

对，写完了
然后再看header的下一级

… …

默认都是从上往下实现
首先是blogTitle
因为header的背景图有一部分是深色的
所以要把文字居中放置
我们看起来居中就行了
所以我们使用left: XXXpx
然后是设置字体的粗细，大小，距离，位置
关键代码

position: absolute;

记得写的时候不要写错
因为我们blogTitle是针对标题的样式
所以以下写法是错误的

#blogTitle{ }

以下写法是正确的

#blogTitle h1{ }

接下来是navigator
navigator就是那一横排的按钮
对于navigator，我们需要更改的并不算多，但却有小细节
依然是添加背景，设置不重复，调整位置
调整完之后，很多人会发现这次添加的图片与上面添加的header里得图片并没有完全接合
这是什么原因呢
让我们仔细看看原来的css，我们会发现这么一段：

border-bottom: 1px solid #ededed; border-top: 1px solid #ededed;

这两段就是造成图片没有接合的罪魁祸首！
现在我们把这两段删去就可以了
注意：没有禁用默认css的人不要删，而是把1px改为0px
以后图片拼接时不再说明，请自行找到这段后修改
有的人会问：现在为什么依然没有接合呢？
那是因为你没有添加这么一段css代码

margin-top:-1px;

它自己接不上，就由我们来帮助它！
再看看此时的页面，你会发现，虽然左边有图片了，但是右侧明显少了什么

文章图片

图6 完美效果
上图是我们想要的结果，但是我们会发现，自己实现后右边完全没有东西
看看原网站是怎么实现的：

可以看到，它是使用了一个嵌套的div，而博客园并没有这种操作（MarkDown编辑器反正没有，其他的编辑器。。。。）
接下来就要用一种常见的操作来解决这个问题了——————
图片合并
通过查看header里的那张图片的分辨率可知，宽为1129
所以我们创建一个长为1129的空白画布（当然是在画图里创建了，Canvas和beginPaint()的请走开，这里是HTML教程awa）
把两张图片导进去，一个放左边，一个放右边，最后调一下背景颜色就可以了

文章图片

图7 画好的图片
用这张图片替换原来的图片，你就会发现，图6的效果已经出来了。
接下来是…里main的实现
这个其实最简单，设置图7为背景，x轴不重复，y轴重复就可以了
main里有3个div，其中我们用到的只有两个：

… …

mainContent是文章主体
sideBar则是公告排行榜那一堆东西
因为以后要照顾到navigator（没错，它还会被修改）
所以我们现在先缩小一下mainContent
顺便把位置往左调调

margin-left: -25em; width: 66%;

虽然这样越调越难看，但是这样是为了以后做准备
mainContent里还有一个mainContent .forFlow
这个也要重写，只添加一个与顶端距离增大的属性就好了
sideBar的调整也不多，把它往左移，一直移到书本里头就行
（背景就是我说的那本书）
sideBar里有个控制标题样式的catListTitle
在那里边添加背景图片的代码，设置不重复，然后设置字体白色居中
接下来是footer，添加背景，不重复，之后字体怎么调就看你的了
至此，初步框架已经弄好
完善页面
我们在返回头来弄navigator
要想将那一排按钮变为左边一排，怎么实现呢
关键代码