伪开篇:我的博客园皮肤 – Kratos Zhang

转眼间在博客园混了2年了,也写过几篇文章作为学习过程中的记录(现在删除了,所以标题叫 伪开篇 🙂 ),这次特意抽空花了将近2个小时做了这个皮肤,也算是小练习了和分享了吧- -。

皮肤的CSS样式是从我目前做的项目中(户外媒体)COPY出来,慢慢修改的;由于无法更改博客园自身的Html代码(我承认我想多了),所以去掉了对不支持CSS3的浏览器的降级。

至于户外媒体的项目,我打算作为一个系列在后续的博文中记录下来,由于是边开发边发文,在只有1个人开发的情况下,进度难免很慢,希望能够坚持下来 🙂

希望能够在大家的指导下提升编程和设计水平。

另外顺便提一下,博客园自定义皮肤的方法:在后台管理的设置选项卡中有css录入文本域,就是这么简单 – -。

该皮肤基于博客模版LessIsMoreRight,通过覆盖其CSS的方式制作;准确的说,还没有完成全部的制作,只是首页部分。。

废话半天,终于不那么空旷了 – –

 

body{
font
-family: Helvetica Neue, Microsoft YaHei;
color: #
808080;
margin:
0;
font
size: 13px;
line
height: 20px;
background:url(
http://images.cnblogs.com/cnblogs_com/KratosZhang/521350/o_bg-light.jpg) repeat 0 0 scroll;
}
#header{
background:url(
http://images.cnblogs.com/cnblogs_com/KratosZhang/521350/o_left-menu-bg.png) repeat 0 0 scroll;
color:#aaaaaa;
margin
bottom:28px;
box
-shadow:0 3px 6px rgba(0,0,0,.26);
z
-index:9999;
}
#header a{
color:#aaaaaa;
}
#navigator{
background:none;
border
-width:0;
padding:6px 10px 8px
0;
}
#navList
> li{
padding:
0;
margin:
0;
}
#navList
> li > a{
text
-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
padding:4px 16px;
transition: color
0.2s ease 0s;
}
#navList
> li > a:hover,#navList > li > a:focus{
color: #FFAE78;
text
-shadow: 0 0 15px rgba(255, 174, 120, 0.7);
}
#mainContent{
margin
right:294px;
}
.forFlow{
margin:
0 46px 0 30px;
}
#mainContent .day{
border
radius: 5px;
border: 1px solid #d9d9d9;
background
color: #fff;
box
-shadow: rgba(0,0,0,.1) 0 0 5px;
margin
bottom: 20px;
padding: 20px;
position: relative;
}
#sideBar{
margin
right:0px;
background:url(
http://images.cnblogs.com/cnblogs_com/KratosZhang/521350/o_left-menu-bg.png) repeat 0 0 scroll;
top:93px;
border
-width:0;
color:#aaaaaa;
padding:
0 0 150px;
}
#sideBar h3, #MyIng .ing_title{
margin
-top:0;
}
#sideBar a,#sideBar h3,#sideBar th{
color:#aaaaaa;
}
#sideBar .newsItem{
padding:
0 0 20px 20px;
margin:
0;
border
bottom: 1px solid #1D1D1D;
}
#calendar{
border
-top: 1px solid #323232;
border
bottom: 1px solid #1D1D1D;
margin
-top:0;
padding
top:20px;
padding
bottom:20px;
}
.mySearch{
padding:20px;
border
-top: 1px solid #323232;
border
bottom: 1px solid #1D1D1D;
}
.mySearch input[type
=text]{
border
radius: 4px;
background
color: #efefef;
border: 1px solid #
000;
padding: 5px 6px;
color: #
000;
box
-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
}
.mySearch input[type
=button]{
display: inline
block;
*display: inline;
*zoom: 1;
cursor: pointer;
border: 1px solid #
000;
background
color: #efefef;
vertical
align: middle;
border
radius: 4px;
color: #64584c;
background
-image: linear-gradient(to bottom, #f0f0f0, #e1e1e1);
background
-repeat: repeat-x;
padding: 5px 18px;
border
color: #d6d6d6 #d6d6d6 #bfbfbf;
box
-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 3px 2px rgba(0, 0, 0, 0.05);
text
shadow: 1px 1px 1px #f0f0f0;
*overflow: visible;
*padding: 4px 20px;
height:auto
!important;
}
.mySearch input[type
=button]:hover, .mySearch input[type=button]:focus {
background
color: #e1e1e1;
background
-position: 018px;
text
decoration: none;
transition: background
-position 0.1s linear 0s;
filter: progid:DXImageTransform.Microsoft.gradient(enabled
=false);
}
.mySearch input[type
=button]:active {
background
image: none;
box
-shadow: 0 2px 4px rgba(0, 0, 0, .15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
.catListLink
> h3.catListTitle,.catListPostArchive > h3.catListTitle,.catListComment > h3.catListTitle,.catListArticleCategory > h3.catListTitle,.catListView > h3.catListTitle,.catListFeedback > h3.catListTitle,.catListImageCategory > h3{
padding:10px 20px;
border
-top: 1px solid #323232;
border
bottom: 1px solid #1D1D1D;
}
.catListView
> h3.catListTitle{
border
-bottom-width:0;
}
.catListLink
> ul,.catListPostArchive > ul,.catListComment > ul,.catListArticleCategory > ul,.catListView ul,.catListFeedback ul,.catListImageCategory > ul{
list
style: none;
border
bottom: 1px solid #1D1D1D;
border
-top: 1px solid #323232;
margin:
0;
background: none repeat scroll
0 0 rgba(0, 0, 0, 0.15);
box
-shadow: 0 1px 6px rgba(0, 0, 0, 0.25) inset;
}
.catListLink
> ul > li,.catListPostArchive > ul > li,.catListComment > ul > li,.catListArticleCategory > ul > li,.catListView ul > li,.catListFeedback ul > li,.catListImageCategory > ul > li{
margin:
0 !important;
text
-indent:0 !important;
}
.catListLink
> ul > li > a,.catListPostArchive > ul > li > a,.catListComment > ul > li > a,.catListArticleCategory > ul > li > a,.catListView ul > li > a,.catListFeedback ul > li > a,.catListImageCategory > ul > li > a{
padding: 8px 20px;
display: block;
text
decoration: none;
transition: all
0.15s ease 0s;
}
.catListLink
> ul > li > a:hover,.catListPostArchive > ul > li > a:hover,.catListComment > ul > li > a:hover,.catListArticleCategory > ul > li > a:hover,.catListView ul > li > a:hover,.catListFeedback ul > li > a:hover,.catListImageCategory > ul > li > a:hover{
padding
left: 38px;
color: #FFAE78
!important;
text
-shadow: 0 0 5px rgba(255, 174, 120, 0.5);
background: none repeat scroll
0 0 rgba(0, 0, 0, 0.15);
box
-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) inset !important;
}
.dayTitle{
display:block;
}
.postTitle, .entrylistPosttitle, .feedback_area_title{
margin:
0;
padding:9px
0;
margin
top:8px;
}
.postCon{
padding
top:10px;
}
.postDesc{
font
style:italic;
font
size:13px;
}
.postDesc a,.topicListFooter a{
display: inline
block;
*display: inline;
*zoom: 1;
border
left: 2px solid grey;
background
color: #d4d4d4;
padding: 1px 10px;
font
size: 11px;
text
decoration: none;
color: #382e2e;
font
style:normal;
margin
left:8px;
transition: background
-color ease-inout 0.1s;
}
.topicListFooter a{
border
color: #3dab38;
background
color: #8bef92;
}
.postDesc a:hover,.topicListFooter a:hover{
background
color: grey;
color: #fff;
text
decoration: none;
}
.topicListFooter a:hover{
background
color: #3dab38;
}
.topicListFooter{
margin
-right:0;
}
.c_b_p_desc{
text
-indent: 0;
}

#footer{
position:fixed;
bottom:
0;
width:
100%;
padding:16px
0;
background:url(
http://images.cnblogs.com/cnblogs_com/KratosZhang/521350/o_left-menu-bg-dark.png) repeat 0 0 scroll;
box
-shadow: 0 5px 20px rgba(0,0,0,.5) inset, 0 -4px 15px rgba(0, 0, 0, 0.3);
}

 

如果你觉得还行,那就使用这些样式吧 – –

顺便提一下,IE6-8 直接无视。

本文链接:http://www.cnblogs.com/KratosZhang/p/3347401.html,转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量