本文及技术仅供学习，请勿用于其他用途
更新记录
【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 class="mc_map_wp" style="min-height: 627px;">
</div>
这个div块中又包含了这样几个div
<div class="new_wp" style="padding: 28px 0 26px 0;">…</div>
<div class="mc_map_border_top"></div>
<div class="mc_map_border_left">…</div>
<div class="mc_map_border_foot"></div>
鼠标悬停在第一个div代码上时，发现logo被指出
由此我们知道第一个div代码块是用来实现logo及其相关
我们用不到，因此无需研究
鼠标悬停在第二个div代码上时，发现图片
图4 头部
被指出，而这张图片正是我们所需要的头部
以此类推，我们会发现第3，4个div分别是body和foot
而第2，4个div是空div
所以，我们就开始主要研究第三个div
div展开后的代码
<div class="mc_map_border_left">
<div class="mc_map_border_right">
<div id="hd">
<div width="400" height="600" class="imgshadow">
</div>
/*以下省略N行*/
为啥省略呢，一是因为太长，二是因为不需要
通过观察可以发现，我们需要学习的就只有前两个div
mc_map_border_left
和mc_map_border_right
鼠标点击div代码，我们会发现右侧出来了这么一个东西
图4 右侧的样式表
其中橙色笔框住的就是关于这个div的所有css样式
而红色笔框住的就是我们需要的图片
以此类推，我们可以找到我们所需要的四张图片
接下来就是写css去实现
至于怎么实现，接下来让我们观察一下博客园的页面源代码
（这里就不贴出来了）
接下来不再提供完整css代码，仅提供思路
认真学习请往下看，妄想将css片段拼接起来的自觉Alt + F4
接下来就是下一级的div
<div id="header">…</div>
<div id="main">…</div>
<div id="footer">…</div>
我们从上往下解决
首先header的用途是用来设置mcbbs中头部的背景图片的
所以说css肯定有个设置背景图片的代码
然后分别设置xy轴的不重复
#header{
/****/
}
对，写完了
然后再看header的下一级
<div id="blogTitle">…</div>
<div id="navigator">…</div>
默认都是从上往下实现
首先是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 class="mc_map_border_left">
<div class="mc_map_border_right">
可以看到，它是使用了一个嵌套的div，而博客园并没有这种操作（MarkDown编辑器反正没有，其他的编辑器。。。。）
接下来就要用一种常见的操作来解决这个问题了——————
图片合并
通过查看header里的那张图片的分辨率可知，宽为1129
所以我们创建一个长为1129的空白画布（当然是在画图里创建了，Canvas和beginPaint()的请走开，这里是HTML教程awa）
把两张图片导进去，一个放左边，一个放右边，最后调一下背景颜色就可以了
图7 画好的图片
用这张图片替换原来的图片，你就会发现，图6的效果已经出来了。
接下来是<div id="main">…</div>里main的实现
这个其实最简单，设置图7为背景，x轴不重复，y轴重复就可以了
main里有3个div，其中我们用到的只有两个：
<div id="mainContent">…</div>
<div id="sideBar">…</div>
mainContent是文章主体
sideBar则是公告排行榜那一堆东西
因为以后要照顾到navigator（没错，它还会被修改）
所以我们现在先缩小一下mainContent
顺便把位置往左调调
margin-left: -25em;
66%;
虽然这样越调越难看，但是这样是为了以后做准备
mainContent里还有一个mainContent .forFlow
这个也要重写，只添加一个与顶端距离增大的属性就好了
sideBar的调整也不多，把它往左移，一直移到书本里头就行
（背景就是我说的那本书）
sideBar里有个控制标题样式的catListTitle
在那里边添加背景图片的代码，设置不重复，然后设置字体白色居中
接下来是footer，添加背景，不重复，之后字体怎么调就看你的了
至此，初步框架已经弄好
完善页面
我们在返回头来弄navigator
要想将那一排按钮变为左边一排，怎么实现呢
关键代码
float: initial;
其他的调调位置就可以了
最后添加一段页首HTML就完美了
后记&声明
世上本没有难事
可怕的是你不去认真学习它，面对它