如何仿建网站？附带个人博客样式搭建实例
- 2020 年 3 月 6 日
- 筆記
本文及技术仅供学习，请勿用于其他用途
更新记录
【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 </span> <span id="stats_article_count">文章 - 0 </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<E> list = new ArrayList<>();</code><br> 并且注明：E代表Java的泛型</p> <p>作为一个还没学习泛型的小白，自然不知道啥是泛型<br> 没事，书上说：例如：集合中的元素为字符串类型，那么E可以修改为String<br> 那么，就很明白了（其实没明白）<br> 接着就是写代码</p> <pre><code class="hljs dart"><span class="hljs-built_in">List</span><<span class="hljs-built_in">int</span>> list1 = <span class="hljs-keyword">new</span> ArrayList<>(); <span class="hljs-built_in">List</span><<span class="hljs-built_in">int</span>> list2 = <span class="hljs-keyword">new</span> LinkedList<>();</code></pre> <p>结果编译未通过<br> 是啥原因呢？</p> <p>原来，必须是继承了Object的对象才可以泛型<br> int是基本数据类型，所以不可以</p> <p>所以就用包装类吧<br> 正确写法：</p> <pre><code class="hljs xml">List<span class="hljs-tag"><<span class="hljs-name">Integer</span>></span> list1 = new ArrayList<span class="hljs-tag"><></span>(); List<span class="hljs-tag"><<span class="hljs-name">Integer</span>></span> list2 = new LinkedList<span class="hljs-tag"><></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> <a href="https://www.cnblogs.com/zythonc/">OIer|zythonc</a> 阅读(<span id="post_view_count">4</span>) 评论(<span id="post_comment_count">0</span>) <a href="https://www.cnblogs.com/zythonc/p/12301066.md" target="_blank">MD</a> <a href="https://i.cnblogs.com/EditPosts.aspx?postid=12301066" rel="nofollow">编辑</a> <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<Object>、List<?>、List、List<?extends>、List<?super></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就完美了
后记&声明
世上本没有难事
可怕的是你不去认真学习它，面对它
