哪個博客可以分欄？

是沒有真正的分欄博客!如要分欄就得自己動手!如下↓

即把下列語句拷貝到首頁CSS源碼中。具體操作：在博客管理後臺/控制面板/模板設置/模板DIY/CSS DIY：首頁----CSS原碼的文本框中粘貼如下代碼。路徑博客管理後臺/博客管理/模板/模板DIY/CSS DIY：首頁----CSS原碼也可。

註意點：壹定要把下列代碼拷貝到首頁的CSS原碼中。

.mydiv1{

float:left;

width:200px;

padding:0px;

line-height:20px;

border-right:1px solid #94a6bd;

border-bottom:1px solid #94a6bd;

}

.mydiv2{

float:left;

width:200px;

padding: 0px;

line-height:20px;

border-bottom:1px solid #94a6bd;

}

.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);

}

第二步：書寫置頂日誌。

實際上妳不需要重寫，只需在記事本中修改以下代碼。此日誌不是壹般的文本日誌，是用高級編程語言寫成的日誌。

</iframe>

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;

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++)

l += "<li ><a href='...' target='_blank'>驚奇添加中</a></li>\r\n";

l+="</ul>";

currCategory.insertAdjacentHTML("beforeend",l);

}

function showallcatalog()

{

showcatalog("mcategory1","category?");

showcatalog("mcategory2","category?");

showcatalog("mcategory3","category?");

showcatalog("mcategory4","category?");

showcatalog("mcategory5","category?");

showcatalog("mcategory6","category?");

showcatalog("mcategory7","category?");

showcatalog("mcategory8","category?");

}

</script>

<div>

</div>

</body></p>

修改點1：把“showcatalog("mcategory1","category?");”中的“?”改為相應的數值。具體操作：在博客首頁，將鼠標放到欄目上，不要點擊，瀏覽器狀態欄就會出現當前欄目的地址。例如：您把鼠標放到我的博客首頁欄目“幽默湖”上，瀏覽器狀態欄就會出現“/catalog_2005.html#category1”，最後面的數字“1”就是問號應該改為的數值。如果您的狀態欄還未打開，請妳點擊瀏覽器的查看/狀態欄。舉例說明：我的欄目1“幽默湖”，改後應為：showcatalog("mcategory1","category1");8個問號都要改。

修改點2：把“<a href="欄目1的網址" target="_blank">”中的“欄目1的網址”用真實的網址代替。舉例說明：我的欄目1“幽默湖”，改後應為：<a href="/catalog_2005.html#category1" target="_blank">。8個欄目的網址都要改。

修改點3：把“</a>※欄目1的標題</div>”中的“欄目1的標題”用真實的標題代替。舉例說明：我的欄目1“幽默湖”，改後應為：</a>※幽默湖</div>。8個欄目的標題都要改。

註意點1：“showcatalog("mcategory1","category?");”中的“?”改為相應的數值後，數字的前後不能有空格。舉例說明：我的欄目1“幽默湖”，改後應為：showcatalog("mcategory1","category1");而改為showcatalog("mcategory1","category 1");不對，“1”前有壹個空格，改為showcatalog("mcategory1","category1 ");也不對，“1”後有壹個空格。如果留有空格，永遠也不能分欄。這是壹個容易忽略的細節。我因此付出了重做五六次的代價，最後請教了白月光下才解決。

註意點2：1、3、5、7分欄用的是.mydiv1框架，2、4、6、8分欄用的是.mydiv2框架。

把修改好的代碼保存好。

第三步：發布置頂日誌。

上文已經提到，此日誌不是壹般的文本日誌，是用高級編程語言寫成的日誌。所以發布也與壹般日誌不同。

註意點1：首先進入博客管理後臺/寫新文章。日誌的標題壹定要寫。

註意點2：日誌的欄目要選。不過，這壹點妳即使忽略了，系統也會給壹個默認值。

註意點3：撰寫模式：選擇高級模式。這壹點很重要。

註意點4：文章是否置頂：選擇置頂。置頂就是放到首頁上去，分欄就是在首頁中分欄。

註意點5：在“撰寫”的工具欄中單擊其中的“<>”按鈕，切換至“HTML原始碼”狀態。此時工具欄的大部分工具變為灰色不可用狀態，說明切換成功。

註意點6：文章是否展開：壹定要選展開。不過，這壹點妳即使忽略了，系統的默認值也是展開，但您不能選收攏。

至此，發布前的準備工作已經完成。

發布置頂日誌。將第二步修改好的代碼粘貼至“內容”工具欄下面的文本框，然後點擊“保存並發布”。

當系統提示發布成功後，您便可以體驗到分欄的喜悅！

如果有首頁欄目下沈現象，可改小.mydiv1、.mydiv2中的width的數值。

第二章分欄代碼全分析

代碼1----首頁代碼

.mydiv1和.mydiv2分別定義的是左、右兩個分欄的大框架。分欄的大框架容納了壹個漸變色標題欄和本欄的最新文章列表，其內還可以設置背景圖片，這就引出了繁式，下面會詳細講解。

float:left;定義的是分欄的大框架的對齊位置，向左對齊，是相對日誌來說的。

width:200px;定義的是分欄的大框架的寬度。

line-height:20px;定義的是分欄大框架內每行的高度。

border定義的是分欄大框架的邊框。

.myimg定義的是漸變色標題欄右側的“more”圖標。

float:right;定義的是“more”圖標的對齊位置，向右對齊，本處是相對漸變色標題欄來說的。

startColorStr和EndColorStr後面的顏色代碼用來控制標題欄的漸變顏色。如果妳想改動，那麽只需將startColorStr和EndColorStr後面的顏色代碼分別修改成自己喜歡的顏色代碼即可。

GradientType後的數值改變漸變色漸變的方向，其後可為1和0。1為左右漸變，0為上下漸變。

代碼2----置頂日誌

if(i>9) break;這段代碼（9可以是任意數字），只需改動這個9的數值就可以改變可容納的最多文章數目。

s = s.slice(0,20);中的20是每行所容納的文章題目的字數。

for(;i<10;i++)可以將(i<10)中的10這個數字是分欄裝載文章的數目。

l += "<li ><a href='...' target='_blank'>驚奇添加中</a></li>\r\n";可以將“驚奇添加中”二字改成任意漢字，註意，最好是改成漢字。

function showallcatalog(){showcatalog("mcategory1","category?");}從cataloghtml讀取本欄目的文章目錄。

l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";提取每行文章的題目。

l += "<li>後插入<img src=小圖標1的網址>可以在每行文章的題目的前面加上壹個小圖標。比如壹只冒熱氣的小茶杯，或壹個圓點、圓環等。

l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a>後插入<img src=小圖標2的網址>可以在每行文章的題目的後面加上壹個小圖標。比如壹個閃動的小“NEW”圖標等。如果只在最新的文章後面加“NEW”圖標，必須將語句l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n";改為：if(i<1){ l+="<li><a href='"+oA.href+"'target='_blank'>"+s+"</a><img src=/inc/new.gif></li>\r\n"; } else { l += "<li><a href='"+oA.href+"' target='_blank'>"+s+"</a></li>\r\n"; }

<body onload=showallcatalog()>是用body調用showallcatalog()裝載的最新文章列表。

<div>......</div>是提取並排列條塊。裏面是8個分欄大框架及其內的漸變色條塊和本欄的最新文章列表。

在<img class="myimg" src="/inc/more.gif" />中的<img class="myimg"加上alt="驚奇更多"可以做壹個鼠標特效，即鼠標指向“more”圖標時會出現壹個提示框，裏面會出現"驚奇更多"字樣。

註意點：<div>......</div>是成對出現的。我為此付出了重做十幾次的代價，原因是逍遙趙的《CSS欄目式布局效果（全程圖解）》壹文中有壹處錯誤，他的第1分欄結束處的前面有兩個</div>，但在分欄2、3、4結束處這兩個</div>卻不見了，所以我每次做都失敗了，下面三個分欄老是黏在壹起，象連體嬰兒。

逍遙趙的《現在流行CSS欄目式布局！（最終版完美全程圖解）》很有啟發作用，建議大家參考。/p753531.html

第三章分欄代碼全收錄

第壹種類型自動簡式八個分欄

此種與分欄步驟中講解的那種稍有不同。分欄步驟中講解的那種，1、3、5、7分欄用的是.mydiv1，2、4、6、8分欄用的是.mydiv2，而此種，8個分欄用的都是.mydiv。這是最簡單的壹種。

首頁要添加的CSS代碼：

.mydiv{

float:left;

width:200px;

padding:0px;

line-height:25px;

border:1px solid #94a6bd;

margin:0px 3px 3px 0px;

}

.myimg{

float:right;

width:38px;

height:7px;

border:0px none;

padding:6px 5px 5px 0px;

}

.mybg{

height:20px;

color:#FFFFFF;

padding:2px 0px 0px 5px;

padding:0px;

margin:3px 3px 75px 3px;

background:#FFFFFF;

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr:#ffff0000,EndColorStr:#ffffff00,GradientType:1);

}

配套置頂日誌：

</iframe>

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;

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++)

l += "<li ><a href='...' target='_blank'>驚奇添加中</a></li>\r\n";

l+="</ul>";

currCategory.insertAdjacentHTML("beforeend",l);

}

function showallcatalog()

{

showcatalog("mcategory1","category?");

showcatalog("mcategory2","category?");

showcatalog("mcategory3","category?");

showcatalog("mcategory4","category?");

showcatalog("mcategory5","category?");

showcatalog("mcategory6","category?");

showcatalog("mcategory7","category?");

showcatalog("mcategory8","category?");

}

</script>

<div>

</div>

</body></p>

上一篇:安卓系統創造者是誰？哪個國家的人？

下一篇:做網站最好的系統是什麽?

android怎麽把json轉換為hashmap

壹發就會被秒贊的句子高級有質感的句子(93句)

買股票的時候不斷有大單掛單又撤單就是不買入，這說明什麽？