博客分栏宝典(二)--迈克儿学扑克

博客分栏宝典(二)

关键词：博客分栏宝典 blog

　　此种与分栏步骤中讲解的那种稍有不同。分栏步骤中讲解的那种，1、3、5、7分栏用的是.mydiv1，2、4、6、8分栏用的是.mydiv2，而此种，8个分栏用的都是.mydiv。这是最简单的一种。
　　首页要添加的CSS代码：

　　配套单年度置顶日志：

<div>

</div>

</body>

　　配套跨年度置顶日志：

<div>

</div>

</body>

第二种类型　　自动繁式八个分栏

　　之所以称为繁式，就是因为每个分栏大框架都需要定义，归根到底是因为每个分栏大框架内都有不同的背景图片，改动background:url('分栏1背景图的网址') no-repeat 5px 26px;中的最后两位数字，可以调节背景图片的位置。很明显，分栏背景图的网址需要您改写了。
　　首页要添加的CSS代码：

.mydiv1{
　　　float:left;
　　　width:200px;
　　　padding:0px;
　　　line-height:20px;
　　　border-left:1px solid #94a6bd; 
　　　border-right:1px solid #94a6bd; 
　　　border-bottom:1px solid #94a6bd; 
　　　background:url('分栏1背景图的网址') no-repeat 5px 26px;
}
.mydiv2{
　　　float:left;
　　　width:200px;
　　　padding: 0px;
　　　line-height:20px;
　　　border-left:0px solid #94a6bd; 
　　　border-right:1px solid #94a6bd; 
　　　border-bottom:1px solid #94a6bd; 
　　　background:url('分栏2背景图的网址') no-repeat 5px 26px;
}
.mydiv3{
　　　float:left;
　　　width:200px;
　　　padding:0px;
　　　line-height:20px;
　　　border-left:1px solid #94a6bd; 
　　　border-right:1px solid #94a6bd; 
　　　border-bottom:1px solid #94a6bd; 
　　　background:url('分栏3背景图的网址') no-repeat 5px 26px;
}
.mydiv4{
　　　float:left;
　　　width:200px;
　　　padding: 0px;
　　　line-height:20px;
　　　border-left:0px solid #94a6bd; 
　　　border-right:1px solid #94a6bd; 
　　　border-bottom:1px solid #94a6bd; 
　　　background:url('分栏4背景图的网址') no-repeat 5px 26px;
}
.mydiv5{
　　　float:left;
　　　width:200px;
　　　padding:0px;
　　　line-height:20px;
　　　border-left:1px solid #94a6bd; 
　　　border-right:1px solid #94a6bd; 
　　　border-bottom:1px solid #94a6bd; 
　　　background:url('分栏5背景图的网址') no-repeat 5px 26px;
}
.mydiv6{
　　　float:left;
　　　width:200px;
　　　padding: 0px;
　　　line-height:20px;
　　　border-left:0px solid #94a6bd; 
　　　border-right:1px solid #94a6bd; 
　　　border-bottom:1px solid #94a6bd; 
　　　background:url('分栏6背景图的网址') no-repeat 5px 26px;
}
.mydiv7{
　　　float:left;
　　　width:200px;
　　　padding:0px;
　　　line-height:20px;
　　　border-left:1px solid #94a6bd; 
　　　border-right:1px solid #94a6bd; 
　　　border-bottom:1px solid #94a6bd; 
　　　background:url('分栏7背景图的网址') no-repeat 5px 26px;
}
.mydiv8{
　　　float:left;
　　　width:200px;
　　　padding: 0px;
　　　line-height:20px;
　　　border-left:0px solid #94a6bd; 
　　　border-right:1px solid #94a6bd; 
　　　border-bottom:1px solid #94a6bd; 
　　　background:url('分栏8背景图的网址') no-repeat 5px 26px;
}
.myimg{
      float:right;
      width:38px;
      height:7px;
      border:0px none;
      padding:6px 5px 5px 0px;
}
.mybg{
      height:20px;
      color:#FFFFFF;
      padding:0px;
      margin:3px 3px 75px 3px;
      background:#FFFFFF;
      filter:progid:DXImageTransform.Microsoft.gradient
      (startColorStr:#ffff0000,EndColorStr :#ffffff00,GradientType:1);
}

　　配套单年度置顶日志：

<div>

</div>

</body>

　　配套跨年度置顶日志：

<div>

</div>

</body>

第三种类型　　手动简式八个分栏

　　很明显，手动式没有自动更新代码，所以每一个栏目的每篇文章的链接都需要您添加。
　　首页要添加的CSS代码：

　　配套置顶日志：

<div>

</div>

第四种类型　　手动繁式八个分栏

　　首页要添加的CSS代码：

　　配套置顶日志：

<div>

</div>

【作者: 迈克儿学POKER】【访问统计:】【2006年08月10日星期四 21:51】【加入博采】【打印】

迈克儿学扑克

博客分栏宝典(二)

Trackback

回复

验证码：
评论内容：