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

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

更新记录

【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;
width: 66%;

虽然这样越调越难看，但是这样是为了以后做准备

mainContent里还有一个mainContent .forFlow
这个也要重写，只添加一个与顶端距离增大的属性就好了

sideBar的调整也不多，把它往左移，一直移到书本里头就行
（背景就是我说的那本书）

sideBar里有个控制标题样式的catListTitle
在那里边添加背景图片的代码，设置不重复，然后设置字体白色居中

接下来是footer，添加背景，不重复，之后字体怎么调就看你的了

至此，初步框架已经弄好

完善页面

我们在返回头来弄navigator
要想将那一排按钮变为左边一排，怎么实现呢
关键代码

float: initial;

其他的调调位置就可以了

最后添加一段页首HTML就完美了

后记&声明

世上本没有难事
可怕的是你不去认真学习它，面对它

css源码提供出售

来源：https://www.cnblogs.com/zythonc/p/12427412.html