通過(guò)兩個(gè)大佬代碼改的

1.頁(yè)面主體框架http://www.cnblogs.com/yescoolfan/p/3462350.html

2.美化：https://www.cnblogs.com/yjlblog/p/8724881.html

選擇lesslsmore

頁(yè)面定制css代碼：

/*公用*/ body {font-size:15px;padding:0;margin:0;font-family:"微軟雅黑","宋體",Arial;background:#205424 url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554444954078&di=fe625207d655714d4114e094eaf5adb5&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb5bc885d9e63d4a98cd823cbb01d66366778bfd3.jpg') no-repeat top center fixed;min-width:1200px;background-size:1350px auto; } #home {opacity: 0.95;filter: alpha(opacity=95);box-shadow:0 0 10px #000;margin:40px auto;width:1200px;overflow:auto;border:solid 1px #fff;background: rgba(255, 255, 255, 0.4) } /*段落*/ .postBody p,.postCon p {margin:7px 0;line-height:24px; } h1 {margin:0; } h3 {font-size:15px;font-weight:bold; } /*超鏈接*/ a {color:#464646;text-decoration:none; } a:hover {text-decoration:underline; } a:visited,a:hover {color:#464646; } ul {list-style:none;margin:0;padding:0; } image {border:none; } #header {padding:20px; } /*博客標(biāo)題*/ #blogTitle,#blogTitle a {font-weight:bold;color:#666; } #blogTitle .title {margin-top:10px;height:100px;line-height:100px;font-size:36px;padding-left:120px;background: url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_light2.png') no-repeat; } .headermaintitle {}#blogTitle,#blogTitle a:hover {text-decoration:none; } /*子標(biāo)題*/ .subtitle {padding-left:30px;font-size:14px;color:#999;font-weight:normal;margin:10px 0; } /*導(dǎo)航欄*/ #navigator {font-size:16px;height:48px;background:#55895B;text-align:center;margin-top:20px;margin-bottom:20px; } #navList li {margin:0;line-height:48px;display:inline-block;float:left; } #navList li:hover {background:#6DA47D; } #navList li a {padding:0 30px;text-decoration:none;line-height:48px;border:0;color:#fff;display:-moz-inline-box;display:inline-block; } .blogStats {height:48px;color:#fff;line-height:48px; } #main {padding:20px; } /*左邊*/ #sideBarMain {padding:10px 10px 10px 0;width:225px;font-size:12px;line-height:22px;background: rgba(255, 255, 255, 0.5) } #sideBarMain a {color:#666; } #leftcontentcontainer {color:#666; } .newsItem {color:#666; } /*公告*/ #profile_block {margin-top:0px;line-height:24px;text-align:left; } /*主面板 右邊*/ #mainContent {margin-top:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;float:right;width:920px;padding-left:0px; } /*每日文章列表*/ .day {background: rgba(255, 255, 255, 0.5);padding:0;margin:0 0 20px 0;} /*博客標(biāo)題*/ .postTitle a {color:#464646; } .postTitle {padding-bottom:10px;font-size:20px;font-weight:bold;color:#464646;background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;padding-left:30px; } .dayTitle {display:none; }/*摘要*/ .c_b_p_desc {padding:10px;line-height:24px;color:#888; } .c_b_p_desc a {color:#888; } .c_b_p_desc a:hover {text-decoration:none;border-bottom-width:1px;border-bottom-style:dotted; } /*右側(cè)圖片*/ .desc_img {margin-left:10px;border:solid 1px #fff;box-shadow:0 0 10px #aaa; } /*博文頁(yè)*/ #topics .post {background: rgba(255, 255, 255, 0.5); } .postCon {padding:10px 20px 0 20px; } .postDesc {margin:0 30px;margin-bottom:2px;padding:8px 0px;font-size:12px;color:#aaa;text-align:right; } .postDesc a {color:#AAA; } .postBody {padding:0; }/*google搜索框*/ #google_q,#q {height:22px;width:120px;border:solid 1px #ccc;box-shadow:inset 0 0 3px #ddd;border-radius:4px; } /*搜索按鈕*/ .btn_my_zzk {font-family:'Microsoft Yahei';border:none;height:26px;width:60px;padding:1px;font-size:14px;cursor:pointer;position:relative;vertical-align:middle;display:inline-block;background:#55895B;border-radius:4px;color:#fff; } .btn_my_zzk:hover {background:#6DA47D; } /*評(píng)論按鈕*/#btn_comment_submit {border:none;height:48px;width:120px; } /*評(píng)論按鈕*/ .comment_btn {font-family:'Microsoft Yahei';border:none;height:48px;width:120px;font-size:18px;cursor:pointer;position:relative;vertical-align:middle;display:inline-block;background:#55895B;color:#fff; } #btn_comment_submit:hover {background:#6DA47D; } /*評(píng)論標(biāo)題*/ .feedback_area_title {padding:10px;font-size:24px;font-weight:bold;color:#55895B;border-bottom:solid 6px #55895B; } .feedbackListSubtitle {font-size:12px;color:#888; } .feedbackListSubtitle a {color:#888; } .comment_quote {background: rgba(255, 255, 255, 0.5);padding:15px;border:1px solid #CCC; } #commentform_title {color:#55895B;background-image:none;background-repeat:no-repeat;margin-bottom:10px;padding:10px 20px 10px 10px;font-size:24px;font-weight:bold;border-bottom:solid 6px #55895B; } /*評(píng)論框*/ #comment_form {margin:10px 0;padding:0; } .commentform {margin:10px 0;padding:10px 20px;background: rgba(255, 255, 255, 0.5); } /*評(píng)論輸入域*/ #tbCommentBody {font-family:'MIcrosoft Yahei';margin-top:10px;width:900px;max-width:900px;min-width:900px;background: rgba(255, 255, 255, 0.5);color:#333;border:2px solid #fff;box-shadow:inset 0 0 8px #aaa;padding:10px;height:120px;font-size:14px;min-height:120px; } /*評(píng)論條目*/ .feedbackItem {font-size:14px;line-height:24px;margin:10px 0;padding:20px;background: rgba(255, 255, 255, 0.5);box-shadow:0 0 5px #aaa; } .feedbackListSubtitle {font-weight:normal; } /*分類頁(yè)*/ .entrylist {padding:10px 20px;background: rgba(255, 255, 255, 0.6) } .entrylistItem {margin:10px 0;padding:10px; } .entrylistPosttitle {font-size:18px;font-weight:bold;background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;padding-left:30px; } .entrylistPostSummary {padding:10px; } .entrylistItemPostDesc {font-size:12px;color:#999;padding-left:40px; } /*尾部*/ #footer {font-size:12px;margin:20px;padding:12px;text-align:center;background: rgba(255, 255, 255, 0.5);color:#DDD;font-size:14px; } /*文章內(nèi)圖片*/ #cnblogs_post_body p img {margin:10px; } /*頂一下*/ .diggnum {font-size:28px;color:#6DA47D;font-family:'Microsoft Yahei'; } #div_digg .diggnum {line-height:100px; } .diggit {float:left;width:128px;height:128px;background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_dig.gif') no-repeat;background-position:0 0;text-align:center;cursor:pointer; } .diggit:hover {background-position:-128px 0; } /*踩一下（園友反映，這個(gè)有點(diǎn)“邪惡”，呵呵，其實(shí)是我沒(méi)來(lái)得及設(shè)計(jì)這個(gè)背景圖片，就暫時(shí)把它隱藏了……可以去掉這句話）*/ .buryit {display:none; } .diggword {display:none; } /*green_channel 好文要頂 關(guān)注...*/ #green_channel {text:align:right;background:#6DA47D;padding-left:20px;font-weight:normal;font-size:15px;width:880px;border:none;color:#fff;padding:20px;border-radius:4px; } /*最新評(píng)論*/ #myposts .PostList {font-size:14px;line-height:24px;margin:10px 0;padding:20px;box-shadow:0 0 5px #aaa;background: rgba(255, 255, 255, 0.5); } #myposts .postTitl2 a {color:#6DA47D; }.Abstract { padding: 15px; border: dotted 2px #999; color: #999; font-family: "Microsoft Yahei" } .First { margin: 10px 0; font-family: "Microsoft Yahei"; text-align: left; padding: 6px 20px; color: #fff; background: #55895B; font-size: 20px; clear: both } .Second { margin: 10px 0; font-family: "Microsoft Yahei"; padding: 6px 20px; background: #93C8A2; color: #fff; font-size: 18px; clear: both } .Third { padding: 6px 20px; font-family: "Microsoft Yahei"; margin: 15px 0; font-size: 16px; background: #C6EFD2; color: #999; clear: both } .note { margin: 10px 0; padding: 15px 20px 15px 60px; background: #FCFAA9 url("http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png") no-repeat 20px 0; font-size: 15px; font-family: "Microsoft Yahei"; clear: both } .demo { text-align: left; padding: 6px 20px; overflow: auto; background: orange; color: #fff; font-size: 16px; clear: both } .cnblogs_Highlighter { border: solid 1px #ccc; clear: both } .cnblogs_code { border: solid 0px; font-size: 14px; clear: both; padding: 10px 20px } .cnblogs_code { background: rgba(255, 255, 255, 0) } .cnblogs_code div { background: rgba(255, 255, 255, 0) } .cnblogs_code_toolbar { background: rgba(255, 255, 255, 0) } .cnblogs_code pre { font-size: 14px } .cnblogs_code span { font-family: Courier New; font-size: 14px }/*雪花css*/ #Snow{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(255,255,240,0.1);pointer-events: none; } /*雪花css end*//*!* Flat UI Free v2.2.2 (http://designmodo.github.io/Flat-UI/)* Copyright 2013-2015 Designmodo, Inc.*/@font-face {font-family:Lato;font-style:normal;font-weight:900;src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-black.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-black.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-black.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-black.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-black.svg#latoblack) format('svg') }@font-face {font-family:Lato;font-style:normal;font-weight:700;src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bold.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bold.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bold.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bold.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bold.svg#latobold) format('svg') }@font-face {font-family:Lato;font-style:italic;font-weight:700;src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bolditalic.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bolditalic.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bolditalic.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bolditalic.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-bolditalic.svg#latobold-italic) format('svg') }@font-face {font-family:Lato;font-style:italic;font-weight:400;src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-italic.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-italic.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-italic.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-italic.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-italic.svg#latoitalic) format('svg') }@font-face {font-family:Lato;font-style:normal;font-weight:300;src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-light.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-light.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-light.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-light.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-light.svg#latolight) format('svg') }@font-face {font-family:Lato;font-style:normal;font-weight:400;src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-regular.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-regular.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-regular.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-regular.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/lato/lato-regular.svg#latoregular) format('svg') }@font-face {font-family:Flat-UI-Icons;src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/fonts/glyphicons/flat-ui-icons-regular.svg#flat-ui-icons-regular) format('svg') }[class^=fui-],[class*=fui-] {font-family: Flat-UI-Icons;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;speak: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale } View Code

博客側(cè)邊欄公告（支持HTML代碼）（支持JS代碼）:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Live2D</title><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/Tangent-1231/waifu.css"/><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/Tangent-1231/waifu.css"><div class="waifu" id="waifu"><div class="waifu-tips" style="opacity: 1;"></div><canvas id="live2d" width="280" height="250" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span><span class="fui-chat"></span><span class="fui-eye"></span><span class="fui-user"></span><span class="fui-photo"></span><span class="fui-info-circle"></span><span class="fui-cross"></span></div></div><div class="Snow"><canvas id="Snow"></canvas></div><script src="https://blog-static.cnblogs.com/files/Tangent-1231/live2d.js"></script><script src="https://blog-static.cnblogs.com/files/Tangent-1231/waifu-tips.js"></script><script type="text/javascript">initModel()</script><script src="https://blog-static.cnblogs.com/files/YJing814/snow.js"></script> </body> </html><!-- 小老鼠游戲控件 --> <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;" width="230" height="160"><param name="movie" value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div><!-- 公告欄時(shí)鐘控件 --> <embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="230" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> View Code

效果：

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/YJing814/p/10658553.html

總結(jié)

以上是生活随笔為你收集整理的博客页面定制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。