我的页面定制CSS代码,针对博客园SimpleGamboge皮肤。
调整:
1、左上图片更换为自己的头像
2、扩大左侧栏宽度,缩小右侧主栏宽度宽度
3、扩大内容页面的评论区宽度,工具图标靠左
4、去广告……
5、拉伸状态下,左侧栏固定宽度,右侧栏适应(by grace)
/*左上头像*/
#lnkBlogLogo {
float: right;
display: block;
width: 180px; /*调整*/
height: 180px; /*调整*/
background-image: url(http://pic.cnitblog.com/avatar/694556/20141120153630.png); /*调整*/
} /*左侧栏*/
#header {
width: 180px; /*调整*/
min-width:180px;
color: #000;
background: #FFF;
}
@media screen and (max-width: 1000px){
#header, #sideBar {
display:block;
}} #sideBar {
width: 180px; /*调整*/
min-width: 180px; /*调整*/
min-height: 200px;
float: left;
text-align: right;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.input_my_zzk {
width: 100px; /*调整input text*/
} /*右侧主栏*/
#mainContent .forFlow {
position: absolute;
top: 0;
left:200px;
right: 0;
float: right;
width: initial;
min-height: 1000px;
min-width: 800px;
background: #F6E497;
} /*评论区*/
div.commentform textarea {
width: 100%; /*调整*/
height: 300px;
font-size: 13px;
}
.commentbox_title_right {
float: left; /*调整*/
height: 22px;
} /*下广告*/
#site_nav_under {
margin-top: 5px;
line-height: 1.8;
display: none; /*调整*/
}
.c_ad_block {
margin-top: 10px;
line-height: 1.5;
display: none; /*调整*/
}
P.S. 原来大概长这样