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

更新记录

【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去实现
至于怎么实现，接下来让我们观察一下博客园的页面源代码
（这段代码虽然长，但是有插在这里的必要，如果不想看可以跳过）

<div id="home">
<div id="header">
    <div id="blogTitle">
        <a id="lnkBlogLogo" href="https://www.cnblogs.com/zythonc/"><img id="blogLogo" src="/skins/custom/images/logo.gif" alt="返回主页"></a>          
<!--done-->
<h1><a id="Header1_HeaderTitle" class="headermaintitle HeaderMainTitle" href="https://www.cnblogs.com/zythonc/">OIer|zythonc</a>
</h1>
<h2>
</h2>
    </div><!--end: blogTitle 博客的标题和副标题 -->
    <div id="navigator">
<ul id="navList">
<li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">
博客园</a>
</li>
<li>
<a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/zythonc/">
首页</a>
</li>
<li>
<a id="blog_nav_newpost" class="menu" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">
新随笔</a>
</li>
<li>
<a id="blog_nav_contact" class="menu" href="https://msg.cnblogs.com/send/OIer%7Czythonc">
联系</a></li>
<li>
<a id="blog_nav_rss" class="menu" href="https://www.cnblogs.com/zythonc/rss/">
订阅</a>
<!--<partial name="./Shared/_XmlLink.cshtml" model="Model" /></li>--></li>
<li>
<a id="blog_nav_admin" class="menu" href="https://i.cnblogs.com/">
管理</a>
</li>
</ul>
        <div class="blogStats">
            <span id="stats_post_count">随笔 - 
9&nbsp; </span>
<span id="stats_article_count">文章 - 
0&nbsp; </span>
<span id="stats-comment_count">评论 - 
1</span>        
        </div><!--end: blogStats -->
    </div><!--end: navigator 博客导航栏 -->
</div><!--end: header 头部 -->
<div id="main">
    <div id="mainContent">
    <div class="forFlow">
        <div id="post_detail">
    <!--done-->
    <div id="topics">
        <div class="post">
            <h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2" href="https://www.cnblogs.com/zythonc/p/12301066.html">list的泛型</a>
            </h1>
            <div class="clear"></div>
            <div class="postBody">
    <div id="cnblogs_post_description" style="display: none">
        list的泛型问题
    </div>
<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
    <h2 id="更新记录">更新记录</h2>
<blockquote>
<p>【1】2020.02.12-21:26</p>
<blockquote>
<p>1.完善内容</p>
</blockquote>
</blockquote>
<h2 id="正文">正文</h2>
<p>在学习list集合时，我看到书上写list的格式时<br>
<code>List&lt;E&gt; list = new ArrayList&lt;&gt;();</code><br>
并且注明：E代表Java的泛型</p>
<p>作为一个还没学习泛型的小白，自然不知道啥是泛型<br>
没事，书上说：例如：集合中的元素为字符串类型，那么E可以修改为String<br>
那么，就很明白了（其实没明白）<br>
接着就是写代码</p>
<pre><code class="hljs dart"><span class="hljs-built_in">List</span>&lt;<span class="hljs-built_in">int</span>&gt; list1 = <span class="hljs-keyword">new</span> ArrayList&lt;&gt;();
<span class="hljs-built_in">List</span>&lt;<span class="hljs-built_in">int</span>&gt; list2 = <span class="hljs-keyword">new</span> LinkedList&lt;&gt;();</code></pre>
<p>结果编译未通过<br>
是啥原因呢？</p>
<p>原来，必须是继承了Object的对象才可以泛型<br>
int是基本数据类型，所以不可以</p>
<p>所以就用包装类吧<br>
正确写法：</p>
<pre><code class="hljs xml">List<span class="hljs-tag">&lt;<span class="hljs-name">Integer</span>&gt;</span> list1 = new ArrayList<span class="hljs-tag">&lt;&gt;</span>();
List<span class="hljs-tag">&lt;<span class="hljs-name">Integer</span>&gt;</span> list2 = new LinkedList<span class="hljs-tag">&lt;&gt;</span>();</code></pre>

</div>
<div id="MySignature"></div>
<div class="clear"></div>
<div id="blog_post_info_block"><div id="BlogPostCategory">
    分类: 
            <a href="https://www.cnblogs.com/zythonc/category/1643668.html" target="_blank">Java</a></div>
<div id="EntryTag">
    标签: 
            <a href="https://www.cnblogs.com/zythonc/tag/Java/">Java</a></div>

    <div id="blog_post_info">
<div id="green_channel">
        <a href="javascript:void(0);" id="green_channel_digg" onclick="DiggIt(12301066,cb_blogId,1);green_channel_success(this,'谢谢推荐！');">好文要顶</a>
        <a id="green_channel_follow" onclick="follow('360bd562-eb5f-40cd-2406-08d76d60a59c');" href="javascript:void(0);">关注我</a>
    <a id="green_channel_favorite" onclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
    <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" onclick="ShareToTsina()"><img src="https://common.cnblogs.com/images/icon_weibo_24.png" alt=""></a>
    <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" onclick="shareOnWechat()"><img src="https://common.cnblogs.com/images/wechat.png" alt=""></a>
</div>
<div id="author_profile">
    <div id="author_profile_info" class="author_profile_info">
            <a href="https://home.cnblogs.com/u/zythonc/" target="_blank"><img src="https://pic.cnblogs.com/face/1878302/20200208144751.png" class="author_avatar" alt=""></a>
        <div id="author_profile_detail" class="author_profile_info">
            <a href="https://home.cnblogs.com/u/zythonc/">OIer|zythonc</a><br>
            <a href="https://home.cnblogs.com/u/zythonc/followees/">关注 - 0</a><br>
            <a href="https://home.cnblogs.com/u/zythonc/followers/">粉丝 - 1</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="author_profile_honor"></div>
    <div id="author_profile_follow">
    </div>
</div>
<div id="div_digg">
    <div class="diggit" onclick="votePost(12301066,'Digg')">
        <span class="diggnum" id="digg_count">0</span>
    </div>
    <div class="buryit" onclick="votePost(12301066,'Bury')">
        <span class="burynum" id="bury_count">0</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips">
    </div>
</div>
<script type="text/javascript">
    currentDiggType = 0;
</script></div>
    <div class="clear"></div>
    <div id="post_next_prev">
    <a href="https://www.cnblogs.com/zythonc/p/12287997.html" class="p_n_p_prefix">« </a> 上一篇：    <a href="https://www.cnblogs.com/zythonc/p/12287997.html" title="发布于 2020-02-09 19:52">抛出异常</a>
    <br>
    <a href="https://www.cnblogs.com/zythonc/p/12311080.html" class="p_n_p_prefix">» </a> 下一篇：    <a href="https://www.cnblogs.com/zythonc/p/12311080.html" title="发布于 2020-02-15 11:44">Java学习之路</a>
</div>
</div>
            </div>
            <div class="postDesc">posted @ 
<span id="post-date">2020-02-12 21:34</span>&nbsp;
<a href="https://www.cnblogs.com/zythonc/">OIer|zythonc</a>&nbsp;
阅读(<span id="post_view_count">4</span>)&nbsp;
评论(<span id="post_comment_count">0</span>)&nbsp;
    <a href="https://www.cnblogs.com/zythonc/p/12301066.md" target="_blank">MD</a>&nbsp;
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=12301066" rel="nofollow">编辑</a>&nbsp;
<a href="javascript:void(0)" onclick="AddToWz(12301066);return false;">收藏</a></div>
        </div>
    </div><!--end: topics 文章、评论容器-->
</div>
<script src="https://common.cnblogs.com/highlight/9.12.0/highlight.min.js"></script>
<script>markdown_highlight();</script>
<script>
    var allowComments = true, cb_blogId = 563215, cb_blogApp = 'zythonc', cb_blogUserGuid = '360bd562-eb5f-40cd-2406-08d76d60a59c';
    var cb_entryId = 12301066, cb_entryCreatedDate = '2020-02-12 21:34', cb_postType = 1; 
    loadViewCount(cb_entryId);
</script><a name="!comments"></a>
<div id="blog-comments-placeholder"></div>
<script>
    var commentManager = new blogCommentManager();
    commentManager.renderComments(0);
</script>

<div id="comment_form" class="commentform">
    <a name="commentform"></a>
    <div id="divCommentShow"></div>
    <div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div>
    <div id="comment_form_container" style="visibility: visible;"><script type="text/javascript" src="https://mention.cnblogs.com//bundles/mention.js?id=20160615"></script>
<div id="commentform_title">发表评论</div>
<span id="tip_comment" style="color:Red"></span>
<div class="commentbox_main comment_textarea">
    <div class="commentbox_title">
        <div class="commentbox_title_left">
            <span id="btn_edit_comment" class="commentbox_tab active" title="编辑评论">编辑</span>
            <span id="btn_preview_comment" class="commentbox_tab" title="Markdown 预览">预览</span>
        </div>
        <div class="commentbox_title_right">
            <span id="ubb_bold" class="comment_icon" alt="粗体" title="添加粗体(Ctrl + B)">
                <svg class="comment_svg" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <g fill-rule="evenodd">
                        <path d="m13.221 19c1.4414 0 2.5793-0.27451 3.3759-0.82353 0.92931-0.66667 1.4034-1.7059 1.4034-3.1176 0-0.94118-0.22759-1.7059-0.66379-2.2549-0.45517-0.56863-1.119-0.94118-2.0103-1.1176 0.68276-0.27451 1.1948-0.64706 1.5552-1.1569 0.36034-0.54902 0.55-1.2157 0.55-2 0-1.0588-0.36034-1.902-1.0621-2.5294-0.75862-0.66667-1.8207-1-3.1672-1h-6.2017v14h6.2207zm-0.82196-8h-3.3987v-4h3.4367c0.91139 0 1.557 0.15686 1.9747 0.47059 0.37975 0.29412 0.58861 0.78431 0.58861 1.451 0 0.72549-0.20886 1.2549-0.58861 1.5882-0.39873 0.31373-1.0633 0.4902-2.0127 0.4902zm0.52612 6h-3.9249v-4h3.9855c1.052 0 1.8208 0.16216 2.3064 0.48649 0.46532 0.32432 0.70809 0.84685 0.70809 1.5856 0 0.72072-0.3237 1.2252-0.9711 1.5495-0.50578 0.25225-1.2139 0.37838-2.104 0.37838z" fill-rule="nonzero" stroke-width=".35"></path>
                    </g>
                </svg>
            </span>
            <span id="ubb_url" class="comment_icon" title="添加链接(Ctrl + L)" alt="链接">
                <svg class="comment_svg comment_svg_stroke" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <g fill-rule="evenodd">
                        <g transform="translate(4 4)" fill-rule="nonzero" stroke-width=".4">
                            <path d="m6.304 9.696c-0.288-0.288-0.512-0.608-0.704-0.992-0.16-0.32-0.032-0.704 0.288-0.864 0.32-0.16 0.704-0.032 0.864 0.288 0.128 0.224 0.256 0.448 0.448 0.64 0.928 0.928 2.432 0.928 3.36 0l3.36-3.328c0.928-0.928 0.928-2.432 0-3.36s-2.432-0.928-3.36 0l-2.272 2.272c-0.256 0.256-0.64 0.256-0.896 0-0.256-0.256-0.256-0.64 0-0.896l2.272-2.272c1.44-1.44 3.744-1.44 5.184 0 1.44 1.44 1.44 3.744 0 5.184l-3.36 3.296c-0.704 0.704-1.632 1.088-2.592 1.088-0.928 0-1.856-0.352-2.592-1.056z"></path>
                            <path d="m3.776 15.808c-0.992 0-1.888-0.384-2.592-1.056-1.44-1.44-1.44-3.744 0-5.184l3.328-3.328c1.44-1.44 3.744-1.44 5.184 0 0.288 0.288 0.544 0.64 0.736 1.024 0.16 0.32 0 0.704-0.32 0.864-0.32 0.16-0.704 0-0.864-0.32-0.128-0.256-0.288-0.48-0.48-0.672-0.928-0.928-2.432-0.928-3.36 0l-3.296 3.328c-0.928 0.928-0.928 2.432 0 3.36 0.448 0.448 1.056 0.704 1.664 0.704 0.608 0 1.248-0.256 1.664-0.704l2.112-2.112c0.256-0.256 0.64-0.256 0.896 0s0.256 0.64 0 0.896l-2.112 2.112c-0.672 0.704-1.568 1.088-2.56 1.088z"></path>
                        </g>
                    </g>
                </svg>
            </span>
            <span id="ubb_code" class="comment_icon" title="添加代码(Ctrl + `)" alt="代码">
                <svg class="comment_svg comment_svg_stroke" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <g fill-rule="evenodd">
                        <g transform="translate(16 6)" stroke-linecap="round" stroke-width="2">
                            <line x1=".5" x2="4.5" y1=".7" y2="6.3"></line>
                            <line transform="translate(2.5 9.1) scale(1 -1) translate(-2.5 -9.1)" x1=".5" x2="4.5" y1="6.3" y2="11.9"></line>
                        </g>
                        <g transform="translate(3 6.1)" stroke-linecap="round" stroke-width="2">
                            <line transform="translate(2.5 3.5) scale(-1 1) translate(-2.5 -3.5)" x1=".5" x2="4.5" y1=".7" y2="6.3"></line>
                            <line transform="translate(2.5 9.1) scale(-1) translate(-2.5 -9.1)" x1=".5" x2="4.5" y1="6.3" y2="11.9"></line>
                        </g>
                        <path transform="translate(12 12.5) scale(1 -1) translate(-12 -12.5)" d="m10.778 7.1249c0.50008-0.11366 0.9978 0.16911 1.1643 0.64128l0.032406 0.11223 2 8.8c0.1224 0.53855-0.21496 1.0744-0.75351 1.1968-0.50008 0.11366-0.9978-0.16911-1.1643-0.64128l-0.032406-0.11223-2-8.8c-0.1224-0.53855 0.21496-1.0744 0.75351-1.1968z" fill-rule="nonzero" stroke-width=".25"></path>
                    </g>
                </svg>
            </span>
            <span id="ubb_quote" class="comment_icon" title="添加引用(Ctrl + Q)" alt="引用">
                <svg class="comment_svg" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <g fill-rule="evenodd">
                        <g transform="translate(5 4)" fill-rule="nonzero" stroke-width=".25">
                            <path d="m5.0013 15v-5.2702h-2.8008c-0.13413-3.3762 1.2004-6.2143 4.0009-8.5135l-1.2-1.2163c-3.335 2.2996-5.0013 5.8119-5.0013 10.54v4.4595h5.0013-1.285e-5zm8.7987 0v-5.2702h-2.8008c-0.13453-3.3762 1.2-6.2143 4.0009-8.5135l-1.2-1.2163c-3.335 2.2996-5.0013 5.8119-5.0013 10.54v4.4595h5.0013-1.28e-5z"></path>
                        </g>
                    </g>
                </svg>
            </span>
            <span id="ubb_img" class="comment_icon" alt="图片" title="上传图片(Ctrl + I)">
                <svg class="comment_svg" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <g fill-rule="evenodd">
                        <g transform="translate(3 3.8)" fill-rule="nonzero">
                            <path d="m14.1 0.58235h-11.2c-1.32 0-2.4 1.0482-2.4 2.3294v10.871c0 1.2812 1.08 2.3294 2.4 2.3294h11.2c1.32 0 2.4-1.0482 2.4-2.3294v-10.871c0-1.2812-1.08-2.3294-2.4-2.3294zm0.7 13.569-3.63-3.4165 1.33-1.2909c0.21-0.20382 0.59-0.20382 0.8 0l1.6 1.5529v2.7856c0 0.13588-0.04 0.26206-0.1 0.36882zm-11.9-12.016h11.2c0.44 0 0.8 0.34941 0.8 0.77647v5.8915l-0.47-0.45618c-0.84-0.825-2.22-0.825-3.07 0l-1.35 1.3103-2.39-2.2421c-0.85-0.825-2.22-0.825-3.05-0.019412l-2.48 2.2615v-6.7456c0.01-0.42706 0.37-0.77647 0.81-0.77647zm-0.8 11.647v-1.9897l3.6-3.2806c0.21-0.20382 0.58-0.21353 0.81 0.0097059l6.43 6.0371h-10.04c-0.44 0-0.8-0.33971-0.8-0.77647z"></path>
                            <ellipse cx="10.5" cy="6.4059" rx="1" ry="1"></ellipse>
                        </g>
                    </g>
                </svg>
            </span>
        </div>
    </div>
    <div style="display:none">
        <span id="comment_edit_id"></span>
        <span id="span_parentcomment_id"></span>
        <span id="span_parent_id"></span>
        <span id="span_comment_replyto"></span>
        <span id="span_comment_posted"></span>
        <span id="span_current_user_id">360bd562-eb5f-40cd-2406-08d76d60a59c</span>
    </div>
    <textarea id="tbCommentBody" placeholder="支持 Markdown"></textarea>
    <div id="tbCommentBodyPreview" class="feedbackCon" style="display: none">
        <div id="tbCommentBodyPreviewBody" class="blog_comment_body comment_preview cnblogs-markdown"></div>
    </div>
    <div class="commentbox_footer">
        <a class="comment_option">Markdown 帮助</a>
        <span id="btn_comment_options" class="comment_option">
            <input id="ubb_auto_completion" class="inline_middle" type="checkbox">
            <label class="inline_middle" for="ubb_auto_completion">自动补全</label>
        </span>
    </div>
</div>
<p id="commentbox_opt">
    <input id="btn_comment_submit" type="button" class="comment_btn" title="提交评论(Ctrl + Enter)" value="提交评论">
    <span id="span_comment_canceledit" style="display:none"><a href="javascript:void(0);" onclick="return CancelCommentEdit()">不改了</a></span>
    <a href="javascript:void(0);" onclick="return logout();">退出</a>
</p>
<div id="tip_comment2" style="color:Red"></div>
<p>[Ctrl+Enter快捷键提交]</p>
<script>var commentEditor = initCommentEditor("tbCommentBody");</script>
</div>
    <div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
    <div id="ad_t2"><a href="http://www.ucancode.com/index.htm" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-ucancode')">【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库</a><br><a href="https://developer.aliyun.com/topic/mvp/time11?utm_content=g_1000106550" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-阿里云开发者社区')">【推荐】58到家技术VP沈剑的架构师成长之路</a><br><a href="https://developer.aliyun.com/article/714139?utm_content=g_1000088940" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-阿里云开发者社区')">【推荐】阿里专家五年方法论总结！技术人如何实现职业突破？</a><br><a href="https://developer.aliyun.com/article/718649?utm_content=g_1000088936" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T2-阿里云开发者社区')">【推荐】这6种编码方法，你掌握了几个？</a><br></div>
    <div id="opt_under_post"></div>
    <script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
    <script>
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
    </script>
    <script>
        googletag.cmd.push(function () {
            googletag.defineSlot("/1090369/C1", [300, 250], "div-gpt-ad-1546353474406-0").addService(googletag.pubads());
            googletag.defineSlot("/1090369/C2", [468, 60], "div-gpt-ad-1539008685004-0").addService(googletag.pubads());
            googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
    </script>
    <div id="cnblogs_c1" class="c_ad_block">
        <div id="div-gpt-ad-1546353474406-0" style="height:250px; width:300px;" data-google-query-id="CI3c77frhegCFYkulgodUPMApQ"><div id="google_ads_iframe_/1090369/C1_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/1090369/C1_0" title="3rd party ad content" name="google_ads_iframe_/1090369/C1_0" width="300" height="250" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="1" data-load-complete="true"></iframe></div></div>
    </div>
    <div id="under_post_news"><div class="recomm-block"><b>相关博文：</b><br>·  <a title="List<Object>、List<?>、List、List<?extends>、List<?super>" href="https://www.cnblogs.com/coisini/p/10964876.html" target="_blank" onclick="clickRecomItmem(10964876)">List&lt;Object&gt;、List&lt;?&gt;、List、List&lt;?extends&gt;、List&lt;?super&gt;</a><br>·  <a title="Python List 列表list()方法" href="https://www.cnblogs.com/wangyao2317072926/p/7622414.html" target="_blank" onclick="clickRecomItmem(7622414)">Python List 列表list()方法</a><br>·  <a title="Java 集合嵌套List of List" href="https://www.cnblogs.com/vin-yuan/p/5354976.html" target="_blank" onclick="clickRecomItmem(5354976)">Java 集合嵌套List of List</a><br>·  <a title="list嵌套list" href="https://www.cnblogs.com/douhuan/p/10956006.html" target="_blank" onclick="clickRecomItmem(10956006)">list嵌套list</a><br>·  <a title="LeetCode(list): list cycle, rotate arr/list, palindrom list, arr/list intersection," href="https://www.cnblogs.com/tybcode/p/5928722.html" target="_blank" onclick="clickRecomItmem(5928722)">LeetCode(list): list cycle, rotate arr/list, palindrom list, arr/list intersection,</a><br>»  <a target="_blank" href="https://recomm.cnblogs.com/blogpost/12301066">更多推荐...</a><div id="cnblogs_t5"><a href="https://developer.aliyun.com/ask/257857?utm_content=g_1000088950" target="_blank" onclick="ga('send', 'event', 'Link', 'click', 'T5-阿里云开发者社区')">精品问答：微服务架构 Spring 核心知识 50 问</a></div></div></div>
    <div id="cnblogs_c2" class="c_ad_block">
        <div id="div-gpt-ad-1539008685004-0" style="height:60px; width:468px;" data-google-query-id="CKyT8bfrhegCFYkulgodUPMApQ">         
        <div id="google_ads_iframe_/1090369/C2_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/1090369/C2_0" title="3rd party ad content" name="google_ads_iframe_/1090369/C2_0" width="468" height="60" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="2" data-load-complete="true"></iframe></div></div>
    </div>
    <div id="under_post_kb">
<div class="itnews c_ad_block">
    <b>最新 IT 新闻</b>:
    <br>
 ·              <a href="//news.cnblogs.com/n/657051/" target="_blank">首推全云端开发体验，腾讯云构建 Serverless 应用新标准</a>
            <br>
 ·              <a href="//news.cnblogs.com/n/657049/" target="_blank">三星电子再度临时关闭龟尾手机工厂 一名员工新冠肺炎确诊</a>
            <br>
 ·              <a href="//news.cnblogs.com/n/657048/" target="_blank">OPPO Find X2 Pro 评测：这可能是今年屏幕最好的手机</a>
            <br>
 ·              <a href="//news.cnblogs.com/n/657047/" target="_blank">传微医下周挑选投行负责IPO 拟下半年上市募集10亿美元</a>
            <br>
 ·              <a href="//news.cnblogs.com/n/657046/" target="_blank">OPPO首款智能手表发布：支持eSIM独立通信 售价1499元起</a>
            <br>
    » <a href="https://news.cnblogs.com/" title="IT 新闻" target="_blank">更多新闻...</a>
</div></div>
    <div id="HistoryToday" class="c_ad_block"></div>
    <script type="text/javascript">
        fixPostBody();
        deliverAdT2();
        deliverAdC1();
        deliverAdC2();
        loadNewsAndKb();
        loadBlogSignature();
LoadPostCategoriesTags(cb_blogId, cb_entryId);        LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
        GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
        loadOptUnderPost();
        GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);
    </script>
</div>
    </div><!--end: forFlow -->
    </div><!--end: mainContent 主体内容容器-->
    <div id="sideBar">
        <div id="sideBarMain">          
<div id="sidebar_news" class="newsItem"><!--done-->
<h3 class="catListTitle">公告</h3>
<div id="blog-news">
    <h1>WELCOME！！</h1>
    <div id="profile_block">
        昵称：
        <a href="https://home.cnblogs.com/u/zythonc/">
            OIer|zythonc
        </a>
        <br>
        园龄：
        <a href="https://home.cnblogs.com/u/zythonc/" title="入园时间：2019-11-23">
            3个月
        </a>
        <br>
        粉丝：
        <a href="https://home.cnblogs.com/u/zythonc/followers/">
            1
        </a>
        <br>
        关注：
        <a href="https://home.cnblogs.com/u/zythonc/followees/">
            0
        </a>
        <div id="p_b_follow"></div>
        <script>getFollowStatus('360bd562-eb5f-40cd-2406-08d76d60a59c');</script>
    </div>
</div>
</div>
            <div id="blog-calendar" style="display:none"></div><script>loadBlogDefaultCalendar();</script>          
            <div id="leftcontentcontainer">
                <div id="blog-sidecolumn">
<!-- 搜索 -->
<div id="sidebar_search" class="sidebar-block"> 
</div>
<!-- 我的标签 -->
<div id="sidebar_toptags" class="sidebar-block">
    <div class="catListTag">
<h3 class="catListTitle">我的标签</h3>
<ul>
        <li>
            <a href="https://www.cnblogs.com/zythonc/tag/Java/">Java</a>(6)
        </li>
</ul>
</div>
</div>
<!-- 积分与排名 -->
<!-- 随笔分类、随笔档案、文章分类、新闻分类、相册、链接 -->
<div id="sidebar_categories"> 
        <div id="sidebar_postcategory" class="catListPostCategory sidebar-block">
            <h3 class="catListTitle">
随笔分类
            </h3>
            <ul>
                        <li>                         
<a href="https://www.cnblogs.com/zythonc/category/1643668.html" rel="" target="">
    Java(6)
</a>
                        </li>
                        <li>                         
<a href="https://www.cnblogs.com/zythonc/category/1600517.html" rel="" target="">
    Minecraft
</a>
                        </li>
                        <li>                         
<a href="https://www.cnblogs.com/zythonc/category/1622949.html" rel="" target="">
    比赛题解
</a>
                        </li>
                        <li>                         
<a href="https://www.cnblogs.com/zythonc/category/1600518.html" rel="" target="">
    算法(2)
</a>
                        </li>
                        <li>                         
<a href="https://www.cnblogs.com/zythonc/category/1644133.html" rel="" target="">
    索引(1)
</a>
                        </li>
            </ul>
        </div>
        <div id="sidebar_postarchive" class="catListPostArchive sidebar-block">
            <h3 class="catListTitle">
随笔档案
            </h3>
            <ul>
                        <li>                         
<a href="https://www.cnblogs.com/zythonc/archive/2020/02.html" rel="" target="">
    2020年2月(7)
</a>
                        </li>
                        <li>                         
<a href="https://www.cnblogs.com/zythonc/archive/2019/11.html" rel="" target="">
    2019年11月(2)
</a></li>
            </ul>
        </div>
</div>
<!-- 最新评论 -->
<div id="sidebar_recentcomments" class="sidebar-block">
    <div class="catListComment">
<h3 class="catListTitle">最新评论</h3>

    <div class="RecentCommentBlock">
        <ul>
                    <li class="recent_comment_title"><a href="https://www.cnblogs.com/zythonc/p/12283991.html#4495129">1. Re:抽象类中嵌套接口</a></li>
                    <li class="recent_comment_body">测试评论</li>
                    <li class="recent_comment_author">--OIer|zythonc</li>
        </ul>
    </div>
</div>
</div>
<!-- 阅读排行榜 -->
<div id="sidebar_topviewedposts" class="sidebar-block">
    <div class="catListView">
<h3 class="catListTitle">阅读排行榜</h3>
    <div id="TopViewPostsBlock">
        <ul style="word-break:break-all">
                    <li>
                        <a href="https://www.cnblogs.com/zythonc/p/11952589.html">
                            1. 平衡树学习笔记(37)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/zythonc/p/11937452.html">
                            2. 线段树学习笔记(36)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/zythonc/p/12275799.html">
                            3. super与this无法用在static方法中(19)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/zythonc/p/12283991.html">
                            4. 抽象类中嵌套接口(17)
                        </a>
                    </li>
                    <li>
                        <a href="https://www.cnblogs.com/zythonc/p/12286597.html">
                            5. 异常输出(9)
                        </a>
                    </li>
        </ul>
    </div>
</div>
</div>
<!-- 评论排行榜 -->
<div id="sidebar_topcommentedposts" class="sidebar-block">
    <div class="catListFeedback">
<h3 class="catListTitle">评论排行榜</h3>
    <div id="TopFeedbackPostsBlock">
        <ul style="word-break:break-all">
                    <li>
                        <a href="https://www.cnblogs.com/zythonc/p/12283991.html">
                            1. 抽象类中嵌套接口(1)
                        </a>
                    </li>
        </ul>
    </div>
</div>
</div>
<!-- 推荐排行榜 -->
</div>
                    <script>loadBlogSideColumn();</script>
            </div>          
        </div><!--end: sideBarMain -->
    </div><!--end: sideBar 侧边栏容器 -->
    <div class="clear"></div>
    </div><!--end: main -->
    <div class="clear"></div>
    <div id="footer">
        <!--done-->
Copyright © 2020 OIer|zythonc
<br><span id="poweredby">Powered by .NET Core on Kubernetes</span>
    </div><!--end: footer -->
</div>

吐槽一下码风，太丑了。。
好了言归正传，这其中的80%css我们都要重写
这么大的工作量，就要有个顺序
我们先从最外层的div改起

没有什么意外的话最外层一共有两个div

<div id="MathJax_Message" style="display: none;"></div>
<div id="home">…</div>

而这里我们用不到去改写第一个div
所以就直接去写第二个div的home

#home {
opacity: 0.90;
background-color: transparent;
margin: 0 auto;
min-width: 950px;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
width: 65%;
}

接下来不再提供完整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就完美了

后记&声明

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

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