我的页面定制CSS代码(SimpleGamboge皮肤)
我的页面定制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. 原来大概长这样