ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

博客园自定义皮肤扁平化设计

2021-06-07 10:01:24  阅读:177  来源: 互联网

标签:10 none 扁平化 自定义 color text 博客园 rgb 5px


博客园自定义皮肤设计

效果抢先看

眼见为实!!!戳戳戳》》》marsggbo的博客园

1. 博客皮肤

首先将博客皮肤选为BlackLowKey

2. 代码设置

1) 页面定制CSS代码

body{
    background: url(http://dik.img.lgdsy.com/pic/38/26542/7d7f902577c15f1e_1440x900.jpg) fixed center center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#navList a:link, #navList a:visited, #navList a:active{
	text-shadow: none;
}
#navList a{
	text-shadow: none;
}
#navList a:hover{
	font-weight: bold;
	color:rgb(10,186,157);
	text-shadow: none;
	text-decoration: none;

}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: rgb(7,113,126);
}
.postTitle {
    border-left: 5px solid rgb(10,186,157);
}
#Header1_HeaderTitle{
	font-size: 350%;
}

#Header1_HeaderTitle:hover{
	text-decoration: none;
	color:rgb(10,186,157);
}
#blogTitle h2{
	margin-left: 2em;
	font-size: 1.5em;
    padding-bottom: 20px
}
#back-to-top {
    background-color: rgb(10,186,157);
    bottom: 0;
    box-shadow: 0 0 6px rgb(10,186,157);
    color:white;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
	width:20px;
	height:20px;
	border-radius:20px;
	text-align:center;
}
#back-to-top a{
	width:16px;
	height: 16px;
	text-decoration: none;
	font-weight:bold;
	color:white;
	font-size:18px;
}
#back-to-top a:hover{
	color:rgb(255,202,189);
}

#sidebar_shortcut{
display:none;
}

#div_digg{
  position:fixed;
  bottom:5px;
  width:120px;
  left:0px;
  padding:5px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

2)博客侧边栏公告

<div id="myTime">
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="180" height="80" id="honehoneclock" align="middle">
 <param name="allowScriptAccess" value="always">
 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
 <param name="quality" value="high">
 <param name="bgcolor" value="#ffffff">
 <param name="wmode" value="transparent">
 <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="180" height="80" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
 </object>
 </div>

<div align="left">
<b>您是第</b>
<a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3216805&c=9650728" alt="AmazingCounters.com"></a>
<b>位访客</b>
</div>

<div id="sidebar_friendLinks" class="sidebar-block">
<div class="friendLinks">
    <hr><br>
<b class="friendLinksTitle">友情链接</b>
<ul>
<li><a href="http://blog.csdn.net/marsggbo" title="CSDN博客">marsggbo的CSDN博客</a></li>
<li><a href="http://blog.163.com/hexin_mars_blog/" title="网易博客">火星教</a></li>
<li><a href="http://marsggbo.github.io/blog/" title="github博客">github博客</a></li>
<li><a href="http://www.cnblogs.com/marsggbo/p/" title="我的博客的评论列表">我的随笔</a></li>
</ul>
<div id="itemListLin_con" style="display:none;">
<ul>

</ul>
</div>
</div>
<hr><br>

3)页首Html代码

github地址

<a href="https://github.com/marsggbo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

4)页脚Html代码

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1263920205'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1263920205%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/marsggbo/category.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/marsggbo/category.js"></script>

<span id="back-to-top"><a href="#top">↑</a></span>
<br><br><hr>
<footer style="color: white; background-color: rgb(24,24,24); padding: 10px">
<h3 style="text-align: center; color: tomato; font-size: 16px">
<b>MARSGGBO</b><b style="color: white"><span style="font-size: 25px">♥</span>原创</b>
<br>
<br>
<b style="color: white">

</b>
</h3>
</footer>

页脚引入的文件链接: 博客园自定义设计

标签:10,none,扁平化,自定义,color,text,博客园,rgb,5px
来源: https://blog.51cto.com/u_15187743/2874318

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有