我的页面定制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. 原来大概长这样

页面定制CSS代码初探(一)：页面变宽 文本自动换行 图片按比缩放

初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱 ...

页面定制CSS代码初探(三)：设置正文最小高度

前言 没想到再次写这篇,已经过去1年半了. 现在审美也发生了改变,一开始做的样式全删了,只保留了h2的样式.原先认为界面要宽,两边留太多空很浪费,看惯了知乎和简书,觉得默认最大1000px的排版也不错 ...

页面定制CSS代码初探(六)：h2、h3 标题自动生成序号 详细探索过程

前言 最近在整理博客写作格式的规范,碰到一个问题:标题要不要加序号? 直到我碰到一个人这么说 手动维护编号实在是一件很闹心的事情, 如果位置靠前的某个段落被删除了, 那么几乎每个段落的编号都要手动修改 ...

页面定制CSS代码初探(五)：给每篇文章最后加上'<完>'

前言 我刚写博客的时候,有几篇是手动在最后加了个 今天在看别人CSS布局时,发现很多::before和::after标签,因为没学过CSS,从名字看大概是前边/后边 加上某个东西的意 ...

页面定制CSS代码

博客皮肤:SimpleMemory .catListTitle { margin-top: 21px; margin-bottom: 10.5px; text-align: left; border- ...

页面定制CSS代码初探(四)：cnblogs使用Github引用样式

前言 对于用惯了Github的人来说,眼里的引用应该是这样的 "Talk is cheap. Show me the code" -- Linus Torvalds 然而实际上cn ...

页面定制CSS代码初探(二)：自定义h2标题样式 添加阴影 添加底色 等

故事的开始 先说一下

原先默认是空白的,很难看 然后今天无意中看到一个博友的标题很好看啊,一直就想要这种效果有没有? 好的东西自然要拿过来啦 通过审查元素,果然 ...

博客的页面定制CSS

我目前的博客CSS其实也是借用了别家的,来源:https://www.cnblogs.com/Penn000/p/6947472.html 注意使用的模板是:darkgreentrip 复制粘贴使用就 ...

使用CSS代码修改博客模板

在修改设置使公告栏里的头像更新为新的头像时发现里边还有“页面定制CSS代码”这一选项,查了一下发现这东西可以对页面做一些个性化的调整.正好目前我使用的这个模板标题和导航栏的字体实在难看,顺手修改了一下 ...

随机推荐

ArrayList的使用方法(转载)

转载自: http://i.yesky.com/bbs/jsp/view.jsp?articleID=889992&forumID=150 1.什么是ArrayList    ArrayLis ...

转:Java NIO系列教程(一)Java NIO 概述

Java NIO 由以下几个核心部分组成: Channels Buffers Selectors 虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Channel,Buffer 和 Sel ...

YModem协议

源:YModem协议 YModem协议: YModem协议是由XModem协议演变而来的,每包数据可以达到1024字节,是一个非常高效的文件传输协议. 下面先看下YModem协议传输的完整的握手过程: ...

Django之真正创建一个django项目

真正创建一个django项目 1 创建Django项目     :new-project 2 创建APP :  python manager.py startapp app01 3 setting 配 ...

MySQL中如何实现 select top n

mysql 没有 top n 语法,mysql 用 limit 来实现相关功能,而且功能更加强大. 语法: SELECT * FROM table LIMIT [offset,] rows | row ...

python时间日期字符串各种

python时间日期字符串各种 第一种 字符串转换成各种日期 time 库 # -*- coding: utf-8 -*- import time, datetime # 字符类型的时间 tss1 = ...

Hello Redis - Voting on articles

Redis in Action JOSIAH L. CARLSON MANNING Shelter Island ONE_WEEK_IN_SECONDS = 7 * 86400 VOTE_SCORE ...

html中内联元素和块元素的区别、用法以及联系

昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: