GaoWhen高H温

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