更新，2013-07-12 15:14

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

 
 
 View Code 

更新，2013-07-12 14:35

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

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

因此自适应居中不好法做啊。

 
  @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简单介绍

样式定义简介

修改实战

序言

博客园提供了非常丰富的模块，也有很多非常赞的模板，可总是会有一些很喜欢的模板，却又觉得有些美中不足，如果可以自己美化一番，那就更妙了。

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

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

1、自己创建一个模板，提交给博客园管理团队

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

这里介绍的是第二种

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;
   
}