第三次改动主题

2010.10.23 / 14:16

如果你以前来过这里你会发现主题又有了变化,对,这是第三次对主题进行大的改动,这次改动只是改了css样式,框架并没有改动:

  • 老主题:

    觉得老主题全是border,到处都是框框看上去很拘谨,为了让网站看上去自由奔放一点,早就想改动了,无奈没多少时间,昨天终于瞅准机会…

  • 新主题:

    新主题的特色不仅仅是老主题的缺点,

    • 不仅彻底去掉border对视觉的约束,让视野更奔放;
    • 加入了背景图片,首次使用渐变的背景,效果还是蛮好的;
    • 用上了css雪碧,将能放在一起的图片全放在一张图上了;
    • 头部header部分用上了光荣而和谐的圆角。

    没有使用纯css和js,为了方便纯粹是图片:我的思路是画一个圆,然后用左、中、右三个class:l、m、r,将圆的上半部分的左右分别作为class l和r的背景,class m放在中间。

      三步制作圆角:

    1. 制作背景图片:

      画一个直径10px的圆圈,保存为png格式(gif格式的效果会大打折扣:圆角很硬,锯齿感很明显)的图片;

    2. css样式部分:

      上面说过用三个class:

      .l {
      float:left;
      height:5px;
      width:5px;
      background:url(images/img.png) scroll 0 0 no-repeat transparent;
      }
      .r {
      float:right;
      height:5px;
      width:5px;
      background:url(images/img.png) scroll -5px 0 no-repeat transparent;
      }
      .m {
      height:5px;
      width:950px;
      background:#fff;
      }

      注意宽度,我的宽度是960pxl+r+m=5px+5px+950px

    3. 应用css样式:

      最后将三个div堆在一起放在需要的地方即可。
      注意:可能要清除浮动

你懂的 不多说
  1. 2010.10.28 / 09:09

    这次的主题看着很干净 很舒服的感觉 蛮不错的哦 !赞个

  2. 2010.11.02 / 15:13

    很喜欢博主的主题,不知道能不能分享一下呢