博客园 页面定制CSS代码
生活随笔
收集整理的這篇文章主要介紹了
博客园 页面定制CSS代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ?更新時間：2019-02-18
? ? ? ?花了一點時間修改自己的博客背景設置，現在分享一下代碼。希望對大家有幫助。我的比較簡單，主要代碼模板來源于另外一個博主，然后我在基礎上進行了部分修改。原博主的連接：https://www.cnblogs.com/Penn000/p/6947472.html。
如果希望修改成類似我這樣的話->首先博客皮膚選擇darkgreentrip。
代碼：
#home {margin: 0 auto;width: 80%;/*原始65*/min-width: 980px;/*頁面頂部的寬度*/background-color: rgba(245, 245, 245, 0.7);padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } body {background: rgba(12, 100, 129, 1) url('https://www.cnblogs.com/images/cnblogs_com/Tangent-1231/1132814/o_timg.jpg') fixed no-repeat; //修改背景圖片background-position: 50% 5%; background-size: cover; } #blogTitle {height: 100px; /*高度*/clear: both;background-color: rgba(240,255,255,0.5); //博客標題的背景 } #blogTitle h1 {font-size: 36px;font-weight: bold;line-height: 1.8em;/*原始 1.6em*/margin-top: 10px;/*原始 15px */color: #FF1493; } #blogTitle h2 {font-weight: normal;font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/ line-height: 1.8;color: #FF1493;font-weight: bold;text-align: right;float: right; } #navigator{background-color:rgba(135,206,205, 0.5); //標題欄下的顏色 } #navList a:link, #navList a:visited, #navList a:active{color: #FFFFFF;font-size: 18px;font-weight: bold; } .blogStats{color: #eee; } .postTitle {border-left: 8px solid rgba(132,112,255, 0);margin-left: 10px;margin-bottom: 10px;font-size: 20px;float: right;width: 100%;clear: both; } .postTitle a:link, .postTitle a:visited, .postTitle a:active {color: #FF6A6A;transition: all 0.4s linear 0s; } .postTitle a:hover {margin-left: 30px;color: #EE6363;text-decoration: none; } .postCon {float: right;line-height: 1.5em;width: 100%;clear: both;padding: 10px 0; }.day .postTitle a {padding-left: 10px; } .day {background: rgba(255, 255, 255, 0.5); } /*文章附加信息*/ .postDesc { background: url(images/posted_time.png) no-repeat 0 1px;color: #757575;float: left;width: 100%;clear: both;text-align: left; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 13px;padding-right: 20px;/*5px padding-left: 90px;posted 發表時間左邊距離*/margin-top: 20px;line-height: 1.8;padding-bottom: 35px; }.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar {background: rgba(255, 255, 255, 0.5);margin-bottom: 35px;word-wrap: break-word; }.CalTitle{background: rgba(255, 255, 255, 0); } .catListTitle{background-color: rgba(255,110,180,0.6); //欄目的條紋顏色 }#topics{background: rgba(255, 255, 255, 0.5); }.c_ad_block{display: none; }#tbCommentBody{width: 100%;height: 200px;background: rgba(255, 255, 255, 0.5); }#q{background: rgba(255, 255, 255, 0);}.CalNextPrev{background: rgba(255, 255, 255, 0);}.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); } #main{min-width: 640px;} .entrylist{background: rgba(255, 255, 255, 0.5); }
?
中間各個欄目的顏色和字體顏色可自由更換，自行調節。
rgba針對圖片，前三個是顏色調節，最后一個數字是透明度調節。color主要針對字體。
最后的實現：
? 后續可能會更新欄目插入，敬請期待。
?
2019-02-19更新
首先在設置里面申請博客側邊欄公告的JS代碼使用權。需要一天左右的時間。
然后添加代碼。
欄目的倉鼠和時鐘參考代碼來自：https://www.cnblogs.com/jingmoxukong/p/7826982.html
1 <!-- 小老鼠游戲控件 --> 2 <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="230" height="160"><param name="movie" value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div> 3 4 <!-- 公告欄時鐘控件 --> 5 <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">
?
live2d看板娘參考了很多，最后終于調節好了。
https://www.cnblogs.com/kousak/p/9726514.html? ?參考和下載文件源，具體戳進去看。
文件下載地址
替換代碼中的文件地址。除了最后一行，是菜單的地址。
<!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><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> </body> </html> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
?
2019-07-08
如果覺得有用，就登錄賬戶點一個推薦吧。謝謝
轉載于:https://www.cnblogs.com/Tangent-1231/p/10393759.html
總結
以上是生活随笔為你收集整理的博客园 页面定制CSS代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 模块 wmi 远程连接 w
- 下一篇： 【yii2】 yii框架如果控制器和方法