博客园模板 样式优化

更新，2013-07-12 15:14

加入3种屏幕宽度的判断和样式定义

@media all and (width:1280px) {
    #leftmenu { position:  absolute;  left:  35px;  width:  350px;  height:  auto;  }
    #main {  margin-left:  400px;  margin-right:  35px;  max-width:  870px;  overflow:  hidden;  }
    #cnblogs_post_body p img {  max-width:  600px;  }
    .input_my_zzk {  width:  310px;  }
    #top {  padding:  0 35px;  }
}

@media all and (width:1152px) {
    #cnblogs_post_body p img { max-width:  450px;  }
    #leftmenu {  position:  absolute;  left:  10px;  width:  328px;  height:  auto;  }
    #main {  margin-left:  348px;  margin-right:  0;  max-width:  769px;  overflow:  hidden;  }
    .input_my_zzk {  width:  235px;  }
    #top {  padding:  0 10px;  }
}

@media all and (width:1024px) {
    #cnblogs_post_body p img { max-width:  600px;  }
    #leftmenu {  position:  absolute;  left:  10px;  width:  318px;  height:  auto;  }
    #main {  margin-left:  338px;  margin-right:  10px;  max-width:  804px;  overflow:  hidden;  }
    .input_my_zzk {  width:  225px;  }
    #top {  padding:  0 10px;  }
}

View Code

更新，2013-07-12 14:35

加入了媒体查询并作调整的定义，但是@media在IE9如下支持不是很好。

这样虽然解决了一部分问题，但是左边没有办法居中。由于这个模板的html的架构是：

 

<div id="top">

<div id="leftmenu"><div id="main">

<div class="footer">

所以自适应居中很差法作啊。

@media all and (min-width:1280px) {
    #cnblogs_post_body p img { max-width:  600px;  }
    #leftmenu {  position:  absolute;  left:  10px;  width:  200px;  height:  auto;  }
    #main {  margin-left:  210px;  margin-right:  0;  max-width:  814px;  overflow:  hidden;  }
    .input_my_zzk {  width:  110px;  }
}

内容提点

Firebug简单介绍

样式定义简介

修改实战

序言

博客园提供了很是丰富的模块，也有不少很是赞的模板，可老是会有一些很喜欢的模板，却又以为有些美中不足，若是能够本身美化一番，那就更妙了。

那么就从这里开始一次“博皮”的美容之旅。

博客园提供了两种自定义样式的途径：

一、本身建立一个模板，提交给博客园管理团队

二、使用一个现有模板，而后在此基础上编写自定义样式

这里介绍的是第二种

Firebug简单介绍

前端优化调试必需要有一个利器，而火狐上的Firebug插件就是其中之一。

下面就简单的介绍下使用，熟悉的朋友跳过。

定位页面元素

使用这个功能能够轻松的定位到页面的任何html标签。

首先点击，而后鼠标移动到页面的目标位置，而后鼠标按下。

好比这里鼠标移动到【经常使用连接】，鼠标按下后，就能够看到HTML代码定位到目标位置了。

查看标签的样式定义

了解定位html标签以后，再看看怎么定位查看css样式定义。

经过上面定位html标签，也会立刻显示出目标标签的样式定义。

或者是在左边[HTML窗口]点击html标签，右边窗口也会立刻显示标签的样式定义。

这里须要说一下的是，注意看右边显示的某定义位于样式文件的第几行，这样有助于快速的找到须要修改的位置。

好比这里的

把自定义的样式复制一个文件中，而后使用一个能够高亮带行数显示的编辑器打开。

调整样式即时显示

Firebug还有一个很是赞的功能

调整样式，当即显示效果

在样式窗口，样式定义位置双击，能够修改定义。

在空白位置双击，能够新建样式定义。

样式定义简介

样式定义须要记住三点要素：选择器、属性定义、属性定义顺序（是否冲突和覆盖）

若是本身想不到好的样式，就参考别人的设计，像支付宝、微博等网站的样式设计的仍是不粗的，或者本身喜欢的网站。

而后经过Firebug就能够轻易的获取到定义的样式。

手册

手头有最新的css参考手册，这里推荐http://css.doyoe.com/css.chm 具备最新的css3参考，保持更新。

选择符

具体请参考手册，这里提一个有趣的应用场景

想设置某个模块，而那个模块既没有id也没有class属性，从而没法定位？

不要紧，使用关系选择符轻易的搞定。

好比我想设置的【随笔分类】模块刚好符合上面两点的状况。

 

看到模块上面的

<div id="itemListLin_con" style="display:none;">

挨的那么近，就拿你来定位了。

先来看看关系选择符是怎么样描述的。

选择符	名称	版本	简介
E F	包含选择符	CSS1	选择全部被E元素包含的F元素。
E>F	子选择符	CSS2	选择全部做为E元素的子元素F。
E+F	相邻选择符	CSS2	选择紧贴在E元素以后F元素。
E~F	兄弟选择符	CSS3	选择E元素全部兄弟元素F。

咱们这里要用的就是相邻选择符

#itemListLin_con + h3 + ul { height: 350px; overflow: hidden; }

如此，就能够轻易解决定位的问题。

 

抓住了目标，固然就是好好蹂躏对方啦。

打开css参考手册，想一想搞那些花样吧。

什么？想不到怎么玩？问谷哥度娘吧~~~~” css经典样式”……

修改实战

在博客管理——设置

能够看到

选择一个模板

把本身写的样式复制过来，点击下面的保存。

 

属性定义

我介绍下本身以为比较经常使用的几个属性定义。

margin、padding、float、with、height、min-with、min-height、max-with、max-height、(position top left bottom right)

把这几个属性用好，页面元素基本就不会不受控制的乱窜了。

我使用模板的主要修改

总体调整

原来紧贴边沿修改成左右两边各留出50像素的空，左边栏由200调整宽度为400

若是是在小浏览器或者非最大化的状况，原来的样式定义是挺不错的，可是在大显示器、宽屏、最大化的状况下，就会有些别扭了。

 

div.post {  border:  1px solid gainsboro;  min-width:  350px;  }

限定文章模块最小宽度为350，防止无心义的缩小。

随笔标签 

调整前	调整后
这什么玩意啊，都看不清楚！   因为个人标签设置的比较细，因此太多太多了，因此我想把它修改为紧凑式的排列。	以前一个标签一行，可想而知这个模块有多长，如今修改完以后，就很是节省空间了。

看看样式是怎么定义的。

定义高度和超出 隐藏，防止页面元素 错乱。

#itemListLin_con + h3 + ul {  height:  350px;  overflow:  hidden;  }

这里最重要的一点是设置浮动，因为个人标签通常不会很长，因此就没有限定长度，若是你的标签有的很长，则能够设置一个max-width，轻松搞定。

#itemListLin_con + h3 + ul > li {  float:  left;  margin-bottom:  5px;  margin-right:  10px;  overflow:  hidden;  }

搜索栏调整

这里须要说一下的就是圆角、:focus、:hover及生成背景图片的应用

input.btn_my_zzk, #btn_comment_submit 
{
    background:  linear-gradient(#FFFFFF, #F0F0F0) repeat scroll 0 0 #F0F0F0;
    border:  1px solid #CCCCCC;
    border-radius:  3px 3px 3px 3px;
    cursor:  pointer;
    font-weight:  bold;
    text-shadow:  0 1px #FFFFFF;
    white-space:  nowrap;
}

linear-gradient 在ie10如下不支持~~~~

最新评论区域修改

修改前	修改后

 

这个修改很简单，因为前面已经设定了左边区域的宽度，因此，在这里，我只加了一个

#RecentCommentsBlock ul > li {  margin-bottom:  10px;  }

把标签li的底部外延边距设置成10像素。

发表评论区域调整

 

调整前	调整后

 

输入框的调整和上面搜索输入框的调整是同样的原理。

 

主要是把[使用Ctrl+Enter键快速提交]浮动到左边，经过设置顶边的外延边距来肯定位置。 这里也用到了一个相邻选择符。

#commentbox_opt + p {  float:  left;  margin-top:  -30px;  }

提交评论 我是直接经过左边外延边距来使其定位在右边。

margin-left: 475px;

推荐反对区域的调整

(更新，最后仍是把推荐区域放回到右边了...)

原来是固定在文章下面的，为了更加方便园友的操做，嘿嘿，我把它固定在页面的左下角。

为何要放在左下角，而不是右下角呢？

由于滚动条通常……是在右边的，用户在拉滚动条时，焦点相对也是在右边的。

不是很是重要的信息，一直出如今用户的视野，并非好的设计，所以我移到了右边，而且把推荐漂到了右边。

这样不会影响用户的浏览，也是至关于用户真的费劲把鼠标移动到最左边去点推荐或反对时，是通过思考的。

好吧，其实我是怕用户拉滚动条的时候，不当心点到了反对……

亲，码字辛苦，给点个推荐吧。

其它

其它地方也陆续进行了一些调整，好比文章区域的字体调整的更大一些；评论回复区的间距；回复的支持反对字体更小一点，避免干扰阅读，连接颜色，线条大小等。

总算看起来更加舒服一点点了。

 

我使用的模板是Cogitation，修改后的样式代码下载： http://www.cnblogs.com/yelaiju/customcss.aspx?id=57777

原版样式：

 

http://www.cnblogs.com/SkinUser.aspx?SkinName=Cogitation

 

http://www.cnblogs.com/klcf0220/

 

最后一句：样式定义须要记住三点要素：选择器、属性定义、属性定义顺序（是否冲突和覆盖），手册在手。

 

欢迎回复交流，知必言言必尽。