过年好 拜大年

祝大家新的一年身体健康，心想事成，万事如意，大吉大利，财源滚滚，和和美美。。。。。。

小春想不出来太多的词儿，我想把所有的祝福都送你！
哥，把祝福和小春一起都抱走呗。。。

给大家拜个大年！！！

柯达 Kodak V705

小春新买的相机,柯达小双眼儿。。。请大家允许我稍微的显摆显摆哈。。。嘿嘿！吼吼！

对它越看越喜欢，照出来的相片颜色特别真，比别的数码照出来的范围也大好多，也是打闪光灯出来效果也好的不得了来。。。我还是不夸了。。。嘿嘿

回家

11号回家来了，不想自己一个人走。。。好累！
哥又没有买到票，回来的时候要坐小马扎了。。。可怜！

每次回家的前几天都觉得过得跟打游击似的。。。马不停蹄的东跑西奔，就是这样俺家太太还嫌弃我懒！我容易吗？！

11号挤了一天的车，第二天又要杀到济南。。。我是真的不怎么乐意去，也不知道怎么滴了，我怎么就这么不喜欢济南这个地方来那？！可不去没招儿啊，俺们这个小旮旯东西少，实在没有看上眼滴。。。再说了，我孙雪妹妹跟家等我一个多星期了就等着一起去那，我能掉链子吗？是不是啊。。。
就这样，我和我滴娘，雪雪和她滴娘一大早风风火火开着小车去大城市啦。。。

就是随口说我要数码相机，也没放心上，不成想我们老太太就要给买。。。人家非买不可我也不能较劲儿了不是，打电话问哥什么样的好，人说这个时候那里来得及现查资料。。。（回家后还说我，这中东西要先好好查上几天才可以买的。。。哼！）就随便买一个呗，我们老太太说了，不就是个玩意儿嘛！结果在银座兜了一圈，买了个 Kodak EasyShareV705。。。反正人家说的天花乱坠的，我就华丽的被忽悠了。。。反正越看越喜欢就得了呗！然后我越发勇猛的忽悠雪雪同志买了个N73。。。心里一下就平衡多了！嘿嘿。。。

买衣服也难，银座地上地下两个商城逛了两圈儿，就一个感觉，现在的衣服怎么这么贵啊？以后自己挣钱那里买的起嘛。。。真贵真贵！还这么丑的说！女式的倒是不少，看的眼花缭乱，就是看不着喜欢的！男式的就别提。。。我和妈妈死活没找着个好看的衣服给哥！最后我们两个小青年双双在艾格淘出来两套姐妹装，总算是完成任务。。。

要过年啦。。。终于又可以在家过年啦。。。哈哈哈哈哈！
欢天喜地笑哈哈。。。

[CSS] zblog 主题 css 相关 (三)

修改index.html
将

     <!-------------start of divTop-------------->
      <div id="divTop">
        <h1 id="BlogTitle">GaoWhen高H温</h1>
        <h2 id="BlogSubTitle">I just want to live while I am alive ...</h2>
      </div>
      <!---------------end of divTop------------>

换成

      <!-------------start of divTop-------------->
      <div id="divTop">
        <h1 id="BlogTitle"><a href="#">GaoWhen高H温</a> </h1>
        <h2 id="BlogSubTitle">I just want to live while I am alive ...</h2>
      </div>
      <!---------------end of divTop------------>

此时效果：


可以看到链接的颜色是蓝色，并且还带有下划线。。。显然这不是我们想要的效果。下面我们就来修改一下。
Css文件中增加：

#BlogTitle a{
  color:#7c5b0e;
}

怎么样，颜色变了吧。。。
再稍微修改一下，就可以把下划线也去掉了。其实这些东西都可以在css2中文手册查到的，不过我这里做了一个实例而已。。。希望能抛砖引玉。。。赶紧拿玉来砸我吧，瓦咔咔咔咔。。。

#BlogTitle a{
  color:#7c5b0e;
  text-decoration:none;
}

a:hover可以设置鼠标悬停在链接上的样式a:active是点击链接之后的样式。大家可以随便修改，要实地动手才能真正了解。

#BlogTitle a:active {
  color: #DC143C;
  text-decoration: none;
}

下面就到了稍微复杂一点的 导航 部分了。先来修改下index.html

      <!------------start of divNavBar------------->
      <div id="divNavBar">
      </div>
      <!-------------end of divNavBar------------>

改为

      <!------------start of divNavBar------------->
      <div id="divNavBar">
        <ul>
          <li><a href="#">Index</a></li>
          <li><a href="#">Tags</a></li>
          <li><a href="#">Search</a></li>
          <li><a href="#">Admin</a></li>  
        </ul>
      </div>
      <!-------------end of divNavBar------------>

我们把它变成横向menu先

#divNavBar li{
  float:left;/*每个项目浮动在另一个的左边*/
  width:80px;
  border-right:1px solid;
  border-color:#FFF;
  white-space:nowrap;
  line-height:30px;
  background:#876a2a;
}

然后让链接块状显示，文字居中，字母全变成大写,去掉下划线

#divNavBar a{
  display:block;/* 块状显示*/
  text-align:center; /*文字居中*/
  height:30px;
  text-transform:uppercase; /*字母变成大写*/
  letter-spacing:1px;
        text-decoration: none;
}

块状显示前，只有鼠标悬停在链接文字上时才变成手状，块状显示后，鼠标悬停在色块上时就变成手状。



导航放在这里实在是有点不协调，要把它挪到右边的位置上去

#divNavBar{
  float:right;
   width:352px;
  height:39px;
  margin-top:-39px;
}

变成这个样子了-_-|||



怎么办，怎么办，再改呗。。。

#divNavBar ul{
  margin:0 0 0 12px;
  padding:4px 0 0 0;
}

Okay，好了。。。
再增加鼠标悬停、点击的效果

#divNavBar a:link{
  color:#FFF;
  text-decoration:none;
}

#divNavBar a:visited{
  color:#FFF;
}
#divNavBar a:hover{
  color:#FFF; 
  font-weight:bold;
  text-decoration:none;
  background:#b09b6c;
}

这样header部分基本就完工了，下面开始sidebar部分。。。
先整一下function：
div.function {
  float:left; 
  width:246px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  text-align:left;

}
div.function h3{
  font-size:12px;
  color:#7c5b0e;
  width:222px;
  height:24px;
  margin:0 0 0 0;
  padding:10px 0 0 20px;
  border-top:1px solid #e2e2e2;
  border-bottom:1px solid #e2e2e2;
  background:url(../image/function.jpg) #FFFFFF no-repeat 10px 6px;
}

Class和Id的区别是，class可以多次出现，用于不同标签tag，而id只出现一次，用于一个标签tag。


Sidebar从上往下
一、 日历
#divCalendar{
width:202px;
marfin:0 0 0 0;
padding:0 20px 0 20px;
text-align:center;
background:url(“../image/cal.jpg”) repeat-x;
}
#divCalendar h3{
display:none;/*–不显示”日历” –*/
}
#divCalendar div{
margin:10px 0 0 0;
padding:0 0 5px 8px;
float:left;
}
#divCalendar div.month1{
background:url(“../image/month1.jpg”) no-repeat center bottom;
}
#divCalendar div.month2{
background:url(“../image /month2.jpg”)
no-repeat center bottom; r/>}
#divCalendar div.month3{
background:url(“../image /month3.jpg”) no-repeat center bottom;
}
#divCalendar div.month4{
background:url(“../image /month4.jpg”) no-repeat center bottom;
}
#divCalendar div.month5{
background:url(“../image /month5.jpg”) no-repeat center bottom;;
}
#divCalendar div.month6{
background:url(“../image /month6.jpg”) no-repeat center bottom;
}
#divCalendar div.month7{
background:url(“../image /month7.jpg”) no-repeat center bottom;
}
#divCalendar div.month8{
background:url(“../image /month8.jpg”) no-repeat center bottom;
}
#divCalendar div.month9{
background:url(“../image /month9.jpg”) no-repeat center bottom;
}
#divCalendar div.month10{
background:url(“../image /month10.jpg”) no-repeat center bottom;
}
#divCalendar div.month11{
background:url(“../image /month11.jpg”) no-repeat center bottom;
}
#divCalendar div.month12{
background:url(“../image /month12.jpg”) no-repeat center bottom;
}

[CSS] zblog 主题 css 相关(二)

header背景图片:  but.jpg 1000×231


footer 背景图片: b.jpg 1000×88


Article 背景图片: article.JPG 500×252


日历 背景图片: cal.jpg 264×200


以上是用到的主要图片。
现在我们就可以用这些图片把这些难看的颜色块去掉了。
首先添加头部的图片，只要对#divTop做下修改就可以了

#divTop{
  width:1000px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  height:231px;
  /*background-color: Red;*/
  background: url(../image/but.jpg) no-repeat;
}


效果如下：


同样，修改#divSidebar、#divBottom，增加图片，并去掉所有色块的颜色。
此时的css文件：

#divAll{
  width:1000px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  /*background-color: Silver;*/
}
#divPage{
  width:1000px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  /*background-color: Aqua;*/
}
#divMiddle{
  width:1000px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  /*background-color: Blue;*/
}
#divTop{
  width:1000px;
  margin:0 0 0 0;
  padding:0 0 0 0;
  height:231px;
  /*background-color: Red;*/
  background: url(../image/but.jpg) no-repeat;
}
#divSidebar{
  width:256px;
  margin:0 0 0 0;
  padding:0 0 0 12px;
  float:left;
  /*background-color: Lime;*/
  background: url(../image/sidebar.jpg) repeat-y;/*--图片在垂直方向重复--*/
}

#divMain{
  width:700px;
  margin:0 0 0 0;
  padding:0 8px 0 0;
  float: right;
  /*background-color: Yellow;*/
}

#divBottom{
  width:1000px;
  margin:0;
  padding:0;
  height:88px;
  /*background-color: Purple;*/
  background: url(../image/b.jpg) no-repeat;
  }

效果:


比以前好看了很多吧。下面我就就开始着手处理文字的位置和样式。
先设置全局的字体，局部的在相应的class中再设置

body{
  margin:0;
  padding:0;
  color:#333333;
  font-size:12px;
  font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Arial, sans-serif;
}


为了不遮住图片，我要把 GaoWhen高H温以及I just want to live while I am alive…挪到右边显示，则对应要设置的即为 #BlogTitle、#BlogSubTitle，相关内容请查阅css2中文手册。

#BlogTitle{
  font-size:32px;
  margin:54px 0 0 700px;/*--顺序上、右、下、左--*/
  padding:0;
  font-weight:bold;
}
#BlogSubTitle{
  color:#7c5b0e;
  font-size:12px;
  margin:2px 0 0 750px;
  padding:0;
}


效果：