博客网 >


 CSS栏目布局

CSS栏目式布局(见上图)是一种十分清爽便捷的模板式个性化布局方式,和传统的日志罗列方式相比,CSS栏目式布局具有信息量大、主题排布清晰、界面清爽简洁、自动加载、更新文章标题等优点,一经推出便广受博友好评,一时间倍受推崇,许多博友纷纷效仿并各自推出了具有自己风格和特色的CSS栏目式布局。今天,我就来把CSS栏目式布局的制作方法详细告诉广大博友,本文采用全程图解的方式,代码中也有详细的注释,相信广大博友一定能够轻松上手。

操作步骤:第一步——添加CSS渐变色标题栏:登陆个人博客后台,点击“模板设置” 模板设置,点击“模板DIY 模板DIY,在“CSS原码”的文本框 CSS文本框

中输入以下内容:

.mydiv1 {

 BORDER-RIGHT: #94a6bd 1px solid; PADDING-RIGHT: 0px; BACKGROUND-POSITION: 10px 25px; PADDING-LEFT: 0px; FLOAT: left;  PADDING-BOTTOM: 0px; WIDTH: 257px; LINE-HEIGHT: 150%; PADDING-TOP: 0px; BORDER-BOTTOM: #94a6bd 1px solid; BACKGROUND-REPEAT: no-repeat

}

.mydiv2 {

 PADDING-RIGHT: 0px; BACKGROUND-POSITION: 10px 25px; PADDING-LEFT: 0px; FLOAT: left;  PADDING-BOTTOM: 0px; WIDTH: 257px; LINE-HEIGHT: 150%; PADDING-TOP: 0px; BORDER-BOTTOM: #94a6bd 1px solid; BACKGROUND-REPEAT: no-repeat

}

.myimg {

 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: right; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 38px; PADDING-TOP: 6px; HEIGHT: 7px; BORDER-RIGHT-WIDTH: 0px

}

.mybg_01 {

 PADDING-LEFT: 5px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr :#ffffff00,GradientType:1); COLOR: #ffffff; PADDING-TOP: 2px; HEIGHT: 20px; BACKGROUND-COLOR: #ffffff

}

然后点击“保存修改”,我们即完成了CSS渐变色标题栏的添加 渐变色标题栏

(有关第一步CSS代码的分析讲解:

.mydiv1.mydiv2分别是左、右两个CSS渐变色标题栏的生成代码,.myimg是安置和生成标题栏右侧“more”标志的代码,而.mybg_01则是生成渐变色的代码。下面具体讲解一下它们的主要属性参数:

.mydiv1.mydiv2中,WIDTH:用来控制标题栏的宽度。由于不同的模板宽度不一样,可能会因为有的模板宽度过窄而导致CSS栏目下沉的情况。一旦出现这种情况,大家可以按实际需要来更改WIDTH后面的数值。

.mybg_01中,startColorStrEndColorStr后面的颜色代码用来控制标题栏的渐变颜色【所谓渐变色,就是指定一个开始颜色,指定一个结束颜色,整个背景便从左到右由开始颜色向结束颜色逐渐变化,整个背景的颜色是动态连续的,越接近右边其颜色就越接近结束颜色,越远离开始颜色,是一种常用的网页艺术修饰特效】,其中startColorStr就是开始颜色,,其后面的颜色代码#ffff0000是红色的颜色代码,而EndColorStr则是结束颜色,其后面的颜色代码#ffffff00则是黄颜色的代码,这样设置后,整个标题栏便从左至右呈现由红色到黄色的渐变。如果你想将标题栏的渐变色设计成自己喜欢的颜色,那么只需将startColorStrEndColorStr后面的颜色代码分别修改成自己喜欢的颜色代码即可。)

第二步——在记事本中改写以下代码(//旁边的文字是注释部分)

<!--iframe来装入2005索引页,这样我们就获得了所有本年度的文章列表了-->

<iframe id="cataloghtml" src="catalog_2005.html" style=display:none;position:absolute;top:400;left:400;z-index:250 ></iframe>

<script>

//这部分的脚本是自动更新用的

//cataloghtmlcategoryname这个栏目读取文章列表放到当前页面的mycategoryname

function showcatalog(mycategoryname,categoryname)

{

currCategory = document.body.all[mycategoryname];

if(currCategory == null)

{

alert("currCategory");

return ;

}

ol = cataloghtml.document.body.all;

if(ol == null)

{

alert("ol==null");

return ;

}

var entityDiv = null;

for(i=0;i<ol.length;i++)

{

if(ol[i].className =="entity")

{

entityDiv = ol[i];break;

}

}

if(entityDiv == null)

{

alert("entityDiv==null");

return ;

}

ol = entityDiv.children.tags("UL");

if(ol == null)

{

alert("entityDiv.children.tags('UL')==null");

return ;

}

var oLI=null;

for(i=0;i<ol.length;i++)

{

if(ol[i].children(0).name==categoryname)

{

oLI = ol[i].children.tags("LI");

break;

}

}

if(oLI == null) return ;

l="<ul type='circle'>";

for(i=0;i<oLI.length;i++)

{

if(i>9) break;

//可以将(i>9)中的9这个数字改变成任意数值,这个数值关系到装载的文章数目

oA = oLI[i].children(1);

s = oA.innerHTML;

//pos = s.search(/[|||\]]{1}/);

//if(pos>0)s=s.slice(pos+1);

s = s.slice(0,20);

l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";

}

for(;i<10;i++)

//可以将(i<10)中的10这个数字改变成任意数,这个数值关系到装载文章的数目

l += "<li ><a href='...' target='_blank'>空白</a></li>\r\n";

//可以将“空白”二字改成任意汉字,注意,最好是改成汉字。

l+="</ul>";

currCategory.insertAdjacentHTML("beforeend",l);

}

//cataloghtml读取目录并生成当前页面

function showallcatalog()

{

//需要改写的地方之一

showcatalog("mcategory1","category?");//加载标题栏一的文章

showcatalog("mcategory2","category?");//加载标题栏二的文章

showcatalog("mcategory3","category?");//加载标题栏三的文章

showcatalog("mcategory4","category?");//加载标题栏四的文章

//……

//注意,上面的省略号表示如果还有第五、第六个标题栏时依此类推,写类似的代码

}

</script>

<!--body装入后调用showallcatalog()装载最新文章列表-->

<body showallcatalog()>

//需要改写的地方之二

<div><div class="mydiv1" target="_blank"><div class="mybg_01" target="_blank">

<a href="栏目一的网址" target="_blank"><img class="myimg" src="http://bimzcy.blogchina.com/inc/go.gif" /></a>※标题栏一的标题</div><div class="divtext" id="mcategory1" target="_blank">

</div></div><!--结束-->

<div class="mydiv2" target="_blank"><div class="mybg_01" target="_blank"><a href="栏目二的网址" target="_blank"><img class="myimg" src="http://bimzcy.blogchina.com/inc/go.gif" /></a>※标题栏二的标题</div><div class="divtext" id="mcategory2" target="_blank">

<div class="mydiv1" target="_blank"><div class="mybg_01" target="_blank"><a href="栏目三的网址" target="_blank"><img class="myimg" src="http://bimzcy.blogchina.com/inc/go.gif" /></a>※标题栏三的标题</div><div class="divtext" id="mcategory3" target="_blank">

<div class="mydiv2" target="_blank"><div class="mybg_01" target="_blank"><a href="栏目四的网址" target="_blank"><img class="myimg" src="http://bimzcy.blogchina.com/inc/go.gif" /></a>※标题栏四的标题</div><div class="divtext" id="mcategory4" target="_blank">

//……

//省略号表示如果有第五、第六个标题栏时依此类推写类似的代码。不过,mydiv后的数值1和2是交替的。

</div>

</body></p>

我们先说代码中指出的第一处应该(见代码中“需要改写的地方之一”的注释)在记事本上修改的地方:category后面的个问号要改成具体的数字,每个标题栏对应的具体category数值,你可以通过点击“总目录”旁边对应的栏目 对应栏目得知category的具体数值(这里以“美丽家园”的博客为例)。比如“美丽家园”的第一个标题栏是“经济时空” 经济时空,那么只需点击“总目录”旁边的“经济时空” 总目录旁,就会进入一个新的页面,你会在页面中的地址栏看到以下网址 网址 ,这其中#后面有个categorycategory后面的数值就是该标题栏的category对应的数值。将“需要改写的地方之一”的category后面的问号替换成该数值,以此类推查找并替换标题栏三、四……后面category的数值,这第一处要修改的地方即大功告成(友情提示,如果还有第五、第六个标题栏的话,mcategory后面的数值依次改为56即可)

接着再说代码中指出的第二处应该(见代码中“需要改写的地方之二”的注释)在记事本上修改的地方:首先将“栏目一的网址”、“栏目二的网址”……替换成标题栏一、二……对应的网址(这里以“美丽家园”的博客为例)。比如“美丽家园”的第一个标题栏是“经济时空” 经济时空 ,那么只需点击“总目录”旁边的“经济时空” 总目录旁,就会进入一个新的页面,你会在页面中的地址栏看到以下网址 网址 ,你在地址栏中看到的整个网址,便是栏目一的网址。将 “需要改写的地方之二”的栏目一、二……的网址依次替换成对应的网址即可。其次,我们来改各栏目的标题,比如“美丽家园”的标题栏一的标题是“经济时空”,我们只需将代码里“需要改写的地方之二”中的标题栏一的标题改成经济时空即可。其它标题栏标题名称的改写依次类推。

第三步——将上面在记事本里改写好的代码粘贴至日志中:首先将刚才在记事本里改写好的代码全部选中,然后复制。接着进入后台,点击“撰写”  撰写,将“撰写模式”设置成“高级模式”  高级模式,在“文章是否置顶”中选择“置顶”  置顶,然后在“撰写”的工具栏 工具栏 中单击其中的 切换 按钮,切换至“HTML原始码”状态。如果工具栏变成 在状态 ,说明你已经成功切换至“HTML原始码”状态。这时候,将记事本中的代码全部粘贴至“撰写”工具栏下面的文本框中,然后点击“保存并发布”(在这之前可不要忘了写上日志的标题和选好日志的栏目哦)。如果提交成功的话,你会看到弹出这样的对话框 对话框 ,你设置了多少个标题栏就会弹出多少个这样的对话框。

看到类似这样的效果

 好效果 

——各标题栏是分开的且列出了具体的文章标题,那么恭喜你——你成功啦!!!

********************************************************************************

 特效一:分栏渐变色颜色任意改变【作者:逍遥赵】

  .mybg_01{PADDING-LEFT:5px;FILTER:progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr:#ffffff00,GradientType:1);COLOR:#ffffff;PADDING-TOP:2px;HEIGHT:20px;BACKGROUND-COLOR: #ffffff }

  在上述代码的.mybg_01中,startColorStr和EndColorStr后面的颜色代码用来控制标题栏的渐变颜色【所谓渐变色,就是指定一个开始颜色,指定一个结束颜色,整个背景便从左到右由开始颜色向结束颜色逐渐变化,整个背景的颜色是动态连续的,越接近右边其颜色就越接近结束颜色,越远离开始颜色,是一种常用的网页艺术修饰特效】,其中startColorStr就是开始颜色,,其后面的颜色代码#ffff0000是红色的颜色代码,而EndColorStr则是结束颜色,其后面的颜色代码#ffffff00则是黄颜色的代码,这样设置后,整个标题栏便从左至右呈现由红色到黄色的渐变。如果你想将标题栏的渐变色设计成自己喜欢的颜色,那么只需将startColorStr和EndColorStr后面的颜色代码分别修改成自己喜欢的颜色代码即可。)

  特效二:分栏渐变色颜色由左右渐变改为上下渐变【作者:逍遥赵】

  同理,在特效一的代码的.mybg_01中,GradientType是改变渐变色渐变方向的属性,其后可为1和0。为1时为左右渐变,为0时为上下渐变。

  特效三:分栏显示各栏目的文章数目【作者:DOZB】

  找到代码currCategory.insertAdjacentHTML("beforeend",l);并在下面加入如下代码即可:

  titleDIV = currCategory.parentElement.children(0);

  titleDIV.insertAdjacentHTML("beforeend","("+ oLI.length +")");

  特效四:随意调整分栏容纳的最多文章数目【作者:逍遥赵】

  找到if(i>X) break;这段代码(X可以是任意数字),只需改动这个X的数值就可以改变可容纳的最多文章数目。

  特效五:随意调整分栏装载文章数目【作者:逍遥赵】

  特效四的容纳文章数目实际上是指分栏支持的行数,而这个装载数目则是指当分栏文章数目不足这个数目时其下面的文章标题便显示“空白”。

  找到for(;i<X;i++)这段代码(X可以是任意数字),只需改动这个X的数值就可以改变分栏装载文章数目。

  特效六:将文章标题的“空白”二字改为任意文字并链接到指定网址【作者:逍遥赵】

  找到<a href='...' target='_blank'>空白</a>这段代码,将“空白”改为任意字符便会显示任意字符,同时将href='...'中单引号里的…改为要链接的网址即可。

  特效七:将文章标题的“空白”二字但不链接任何网址【作者:逍遥赵】

  改“空白”二字的方法同特效六,若要不链接任何网址,只需去掉<a href='...' target='_blank'>空白</a>这句代码中的<a href='...' target='_blank'>和</a>即可。

  特效八:在分栏的栏目标题下加图片【作者:逍遥赵】

  在CSS中的每个.mydivX{}中加入以下代码即可(X可以是任意数值):

  background:url(图片网址) no-repeat 5px 26px;

  特效九:更改分栏文章标题可容纳的字数【作者:逍遥赵】

  找到s = s.slice(0,X);这段代码(X可以是任意数字),只需改动这个X的数值就可以改变文章标题可容纳的字数。

  特效十:在每栏的第一篇后加上最新的标志【作者:舟无泊】

  找到s = s.slice(0,X);这段代码(X可以是任意数字),将其下面的l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";这行代码删除,然后加入如下代码:

  if(i<2){

  l+="<li><a href='"+oA.href+"'target='_blank'>"+s+"</a><img src=http://bimzcy.bokee.com/inc/new.gif></li>\r\n";

  }

  else

  {

  l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";

  }

<< 去除个人博客任意模块、内容代码集 / 博客优化建设使用技巧(下) >>

专题推荐

不平凡的水果世界

不平凡的水果世界

平凡的水果世界,平凡中的不平凡。 今朝看水果是水果 ,看水果还是水果 ,看水果已不是水果。这境界,谁人可比?在不平凡的水果世界里,仁者见仁,智者见智。

中国春节的那些习俗

中国春节的那些习俗

正月是农历新年的开始,人们往往将它看作是新的一年年运好坏的兆示期。所以,过年的时候“禁忌”特别多。当然,各个地方的风俗习惯不一样,过年的禁忌也是不一样的。

评论
0/200
表情 验证码:

cb83184929

  • 文章总数0
  • 画报总数0
  • 画报点击数0
  • 文章点击数0
个人排行
        博文分类
        日期归档