彙整

Posts Tagged ‘CSS’

[Blogger Hacks] 讓Blogger有文章分頁功能

2008 年 12 月 12 日 1 則迴響

當文章數量一多,有時要查看舊文章實在是不方便,雖然有標籤功能,雖然可以利用 Google 自訂搜尋作出站內文章搜尋功能,但是總覺得少了什麼。

後來看到 Google、Yahoo、Digg 等網站,才猛然發現原來少了文章分頁的功能,但是似乎在 Blogger 上採用的不多,因此搜尋測試了好幾天。

參考文章:

  1. Blogger Accessories – Page Navigation Hack for Blogger (第一版:一般網路上常介紹的方式)
  2. Blogger Accessories – Page Navigation Menu Widget for Blogger (第二版: 只使用一個 {HTML/Javascript} Widget )
  3. Woork – Perfect pagination style using CSS
  4. WowboxBlog – 24款實用的翻頁頁碼CSS代碼
  5. Mis-Algoritmos – Some styles for your pagination
  6. [CSS] 多種分頁樣式範例 (上一篇的中文介紹)
  7. Blogger Buster – Numbered Page Navigation for Blogger (該文開頭的橘色按鈕有倒影的圖很想要,可惜範例介紹的不是該Style)
  8. [Blogger]為文章區加上方便瀏覽的頁數按鈕 (上述的中文介紹內容,其實也和第一項一樣)

我是採用上述第2項的方式,再調整CSS設定,方法如同上述第2項所介紹的方式,在此簡略概述一下:

  1. 到[版面配置]–>[網頁元素]–>任何一個有[新增小工具]的地方–>新增一個{HTML/Javascript}
  2. {HTML/Javascript} 中貼上原始碼–>[儲存]。
  3. 再將該 {HTML/Javascript} 網頁元素,用滑鼠左鍵拖曳到[網誌文章]區塊的[編輯]功能的底下。(原網站Blogger Accessories有提供動態的操作示意圖,應該很容易看懂,本來想將該圖展現在文章內,可惜怎麼測試都不成功。)

我的原始碼如下:

CSS 區段:

<style>
.showpageArea {
padding: 0 2px;
margin-top:5px;
margin-bottom:5px;
font-size:11px;
height:25px;
}
.showpageArea a {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
color: #000000;
font-size:11px;
font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
line-height:24px;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #339966;
color: #000000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
}

.showpageNum {
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
}
.showpageNum a {
padding: 3px 6px !important;
padding: 2px 6px 2px 6px;margin:0px 4px;
border: 1px solid #339966;
color: #000000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
line-height:24px;
}
.showpageNum a:hover {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #000000;
background-color: #bcb;
padding: 2px 6px 2px 6px;
margin: 2px;
line-height:24px;
}
.showpageNum a:link {
text-decoration: none;
border: 1px solid #339966;
color: #0066cc;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
margin: 2px;
line-height:24px;
}

/*目前的頁次*/
.showpagePoint {
padding: 2px 8px 2px 8px;
margin: 2px;
font-weight: bold;
border: 1px solid #339966;
color: #000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #bcb;
height:25px;
line-height:24px;
font-size:11px;
font-weight: bold;
}

/*第一頁、上一頁、下一頁、最後一頁 的CSS*/
.showpage a:link {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #0066cc;
background-color: #FFFFFF;
line-height:24px;
padding: 2px 6px 2px 6px;
margin: 1px;
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
line-height:24px;
}
.showpage a:hover {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #000000;
background-color: #bcb;
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
line-height:24px;
}
</style>

Javascript 區段:

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

// 每一頁的文章數,和Blogger設定配合
var pageCount=8;
var displayPageNum=3;
var firstPageWord = '第一頁';
var endPageWord = '最後一頁';
var upPageWord ='上一頁';
var downPageWord ='下一頁';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;background-color: #FFFFFF;" class="showpage">頁次:'+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){html ='';}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){html ='';}
if(blogPager){blogPager.innerHTML = html;}

}
}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

除了 Javascript 區段沒啥變動(英文顯示改成中文顯示而已),CSS區段我是用 Try Error 的方式改出來的,後續應該還會再做修改,也很難保證有排列順序和語法錯誤的地方。所以,請盡量採用原文的 CSS 去調整成自己想要的 Style。其中,有中文註解的地方是我加上去的,僅是個人的理解+備忘,僅供參考。(它的CSS不好改,或者我比較笨)

此段程式碼,我換了不同的顯示方式,是採用C # Code format這個網站轉出來的,目前測試的結果,會有超過寬度不能自動換行問題。但是如果使用Postable網頁轉碼+Code標籤,會把 Javascript 的 “+" 轉不見,怕有將原程式碼轉貼 Lost 的地方。

——Update 2008-12-15

測試安裝SyntaxHighlighter for Windows Live Writer 2.00,沒有預期的效果,才發現必須在 Blogger 裡增加掛載了 SyntaxHighlighter 系列的 .js。

由於不想在這篇文章延伸測試和主題不搭的功能,暫時改成由 Online syntax highlighting for “Java" 轉碼的 HighlightCode 顯示。整理測試OK之後,再開另一篇文章敘述。

尚待解決問題:

Blogger 問題:雖然我在 Blogger上設定每頁文章顯示為8篇,但是點選標籤(側邊欄的標籤Widget)時,卻是一開就20篇文章,只有點底下的 Pagination 分頁才能依照設定顯示每一頁8篇文章。這應該是 Blogger 本身的問題,尚未找到適切的設定可以調整。

分類:Blogger Hack 標籤:,

[Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(2)

2008 年 12 月 04 日 發表留言

在前面一篇: [Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(1) 中,遇到的問題:

缺點:標頭的下方和 Post 區域之間,會多出一列空白。(IE多出的空白高度是Firefox的2倍)

這幾天一直在做調整和測試,總算有點成果。紀錄如下:

  1. 原本是直接在 Blogger 上的標頭的[網頁元素]上,直接放上 Title 背景圖,現在已移除。而移除的方式: [版面配置]–[網頁元素]–[標頭調整]–[編輯] 把背景圖移除。
  2. 把原本的上邊 Title 背景圖改放在 Outer-wrapper 的 CSS 區段。
    • 區段程式碼如下:紅字部分為增加的部份。
    • #outer-wrapper {
       width:850px;
       margin:0px auto;
       margin-top:20px; /* 原本在 Header-wrapper 區段與螢幕上緣的間距 */
       text-align:$startSide;
       font: $bodyFont;
       background:url("http://sites.google.com/site/japlinchen/dang-an-gui/Head-03.gif?attredirects=0") no-repeat;
      }
  3. 修改及調整 Head-wrapper 區段的設定。
    • 區段程式碼如下:紅字部分為增加的部份。
    • #header-wrapper {
       margin-top:20px;
      *margin-top:0px;/*for IE6*/
       margin-$endSide:0;
       margin-bottom:0;
       margin-$startSide:0;
       padding-top:0px;
       padding-$endSide:0;
       padding-bottom:0;
       padding-$startSide:0;
       color:$titleTextColor;
       background:transparent;
      /*背景顏色改為透明,才能完整顯示背景圖*/
      }
  4. 調整 Menubar 位置的部份,主要增加 margin-top*margin-top (for IE)

IE6的問題(尚待處理問題):

在 Firefox 上已經都能正常顯示,上邊(Title) 及下邊(Main) 之間的間距也都如預期;但是在 IE6 上還就是會多出一段間距。不過至少比之前的間距少很多了。再找時間針對 IE6 作調整吧!

——以下於 2008-12-05 新增

#main-wrap1#sidebar-wrap 區段加入 *margin:-10px 0 0; /*for IE6*/

#main-wrap1 為例:

#main-wrap1 {
 ...
 /* Header 和 Body 之間的間隙 */
 margin:15px 0 0; /*margin:框線外緣以外的距離。順序:下右上左*/
 padding:0 0 10px; /*padding:內容-框線內緣的距離。順序:下右上左*/
 ...
}

IE6 似乎會把 margin+padding 加在一起,我試著只調整過 margin:0px 0 0; 還是會有多出間距,但是,當扣掉 padding 的 10px 之後就OK了。

所以,加入後的程式碼大約如下:

#main-wrap1 {
 ...
 /* Header 和 Body 之間的間隙 */
 margin:15px 0 0; /*margin:框線外緣以外的距離。順序:下右上左*/
 *margin:-10px 0 0; /*專門給IE6看的*/
 padding:0 0 10px; /*padding:內容-框線內緣的距離。順序:下右上左*/
 ...
}

分類:Blogger Hack 標籤:,

[Blogger Hacks] 換掉 Google 自訂搜尋的醜醜按鈕

2008 年 12 月 03 日 發表留言

原本按照 Google 自訂搜尋的語法,[搜尋]的按鈕實在很醜,如下圖:

不管怎麼調整,常常都會是破壞畫面的兇手。

現在想將該醜醜的按鈕,換成圖片方式來顯示,方法很簡單,如下:

將原本的搜尋指令,如下:

<input value="搜尋" name="sa" type="submit"/>

置換成:

<input type="image" src="你的圖片位址" onClick="document.formname.submit()">

即可。

另外,我是採用CSS定義整個搜尋區塊的顯示,再用 DIV 配合使用。這樣比較方便處理文字與圖形的對齊問題,CSS定義如下:

<style type="text/CSS">
#searchbar{
display:block;
float:left;
position: relative;
top: 4px;
left: 120px;
width:300px;
margin:0 1px;
color:#ffffff;
border: 0px;
vertical-align:middle; /*to firefox 讓圖片文字垂直居中*/
}
</style>

而原本的 Google 自訂搜尋 Code,前後用 DIV 包起來,如下:

<div id="searchbar">
...[Google 自訂搜尋引擎]程式碼...
</div>

分類:Blogger Hack 標籤:, ,

[Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(1)

2008 年 12 月 01 日 發表留言

原本參照 Fun New Run High 的介紹: 在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar) 在 Blogger 標頭圖形底下新增一個 {HTML/Javascript},來製作一個 Menu Bar。

遇到的問題:

  • 在 Firefox 和 IE6 中,顯示位置會不一樣。
  • 螢幕解析度不同時,顯示位置也會跑掉。 (如1024×768 及 1280×1024)

想要的效果:

  • 想要讓 Menubar 能移動到標頭圖案的右上角。
  • 在 Firefox 及 IE 中,顯示的位置要一樣。
  • 解析度不同時,Menubar 的位置不會跑掉。

原因理解:

  • 原文的方式採用position: absolute; (絕對位置)的方式,這樣調整好的位置,在不同的解析度下,顯示位置會跑掉,可能比較適合居中顯示的方式。
  • 許多在 CSS 處理 Firefox 及 IE 的顯示問題,是採用相對位置(relative) 及浮動(float) 的方式解決。
  • DIV 會自動換行,SPAN 不會自動換行,SPAN 可以放在 DIV 之間使用。

處理方式:

  1. 將 MenuBar 的CSS 設定顯示內容都放置在 {HTML/Javascript},這樣方便調整多了,不用每次都得換頁到 [版面配置][修改HTML] 修改。
  2. 修改 position: absolute; (絕對位置)–>為 position: relative;(相對位置) 。
  3. 增加 float:left; 原文沒有。(需和 display:block/inline; 配合使用)
  4. 調整 Top、Left、Width。(其中 Left+Width 必須設定好,才不會因為 DIV 的關係超過寬度而自動換行。)
  5. 因為有背景圖,所以 border: 0px;。避免破壞畫面。
  6. 滑鼠移動到 Menubar 上方時,底色+邊框:(藍色字)
    • background-color:#61A782;
    • border: 1px solid #ffffff;

修改過後,在 Firefox 及 IE6 顯示位置果然可以接受了,而在不同解析度下位置也不會亂跑了。(1024×768 及 1280×1024)

缺點:標頭的下方和 Post 區域之間,會多出一列空白。(IE多出的空白高度是Firefox的2倍)

在 Firefox 的顯示如下:

image

在 IE6 的顯示如下:

image

相關 CSS 程式碼如下:(大部分與原文相同)

<style type="text/CSS">
#navmenubar{
display:block;
float:left;

position: relative;
top: -126px;
left: 450px;
height:24px;
line-height:24px;
width:484px;
margin:0 1px;
color:#000000;
border: 0px;
}

#navmenubar li{
float:left;
list-style-type:none;
white-space:nowrap;
border: 0px;
}

#navmenubar li a{
display:block;
padding:0 10px;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navmenubar a {width:1%;}

#navmenubar .selected,#navmenubar a:hover{
text-decoration:none;
font-weight:bold;
color:#00ff00;
background-color:#61A782;
border: 1px solid #ffffff;

}
</style>

相關參考文章:

分類:Blogger Hack 標籤:,

[CSS]單圖像實現圓角,自動符合高度–[備忘]

2008 年 11 月 21 日 發表留言

文章來源:單圖像實現圓角,自動符合高度–wowbox blog (網頁設計知識庫)

該網站上可以直接執行查看效果

先MEMO下來,後續再測試應用方式。

CSS 區塊:

<style type="text/css">
/*<![CDATA[*/
.wrap_content{float:left;background:url(attachments/month_0811/q2008118151351.jpg) right top no-repeat}
.content_left{float:left;background:url(attachments/month_0811/q2008118151351.jpg) left top no-repeat;width:10px;height:10px;overflow:hidden;}
.content_bottom{clear:both;float:left;background:url(attachments/month_0811/q2008118151351.jpg) left bottom no-repeat;padding-left:10px;}
.web_content{clear:both;float:left;background:url(attachments/month_0811/q2008118151351.jpg) right bottom no-repeat;padding:0 10px 10px 0;}
/*]]>*/
</style>

DIV 應用區塊:

<div class="wrap_content">
<div class="content_left"></div>
<div class="content_bottom">
<div class="web_content">
這是一個圓角矩形<br />
圓角會隨著這裡面的內容擴張而擴張
</div>
</div>
</div>

原始圖檔: (來自原網站)

image

分類:Blogger Hack 標籤:

在 MenuBar 上的圖片處理問題(解決IE6不能顯示PNG透明背景及圖文對齊問題)

2008 年 11 月 14 日 發表留言

我的 Menubar 是一個 [HTML/Javascript] widget,雖然有使用CSS定義,但是臨時想在 Menubar 上,在文字的左側增加一個小 icon,結果圖形和文字老是無法垂直居中。

後來找了了這篇 [藍森林-自由軟件] – 用css怎麼描述圖片align=absmiddle這一屬性?,才總算搞定。

其實我只是在 <img src="" > 中加入 align="absmiddle" 這一串字,其他的詳細說明可以查看 [藍森林-自由軟件] 上的該篇討論文章,因為我目前僅用在 Menubar 的圖形+文字,的顯示所以沒有定義在 CSS 上。

在 Firefox 顯示上算是搞定,但是卻發現在IE6的顯示上,透明圖形變成不透明了…

在 Firefox 上的功能表:(如設定功能表靠左,透明背景的CSS 圖片也正常顯示)

image

在IE6上的功能表:(功能表居然跑到右半邊的中間位置,CSS圖片沒有透明效果)

image

後來找到了使用Js來讓IE支援png圖片透明效果 這篇文章,按照它的作法,發覺無效。幾經測試才發覺它上面的程式碼有誤,多了一個字 “defer",刪除之後儲存就OK了。

其實 [CSS] 讓 IE6 下的 PNG 圖片透明 也是一種方式,還是採用 Microsoft 建議的方式。詳細的說明可參閱微軟技術支援服務的【PNG 檔案在 Internet Explorer 中不會顯示透明度】文件說明。

先把相關操作紀錄下來:

  • 圖片垂直居中的方式: 在 <img src="" > 中加入 align="absmiddle"
  • PNG 透明背景的圖片,在IE6 顯示透明背景效果的方式,如下:
  1. 建立pngfix.js:
    • var arVersion = navigator.appVersion.split("MSIE")
      var version = parseFloat(arVersion[1])

      function fixPNG(myImage)
      {
      if ((version >= 5.5) && (version < 7) && (document.body.filters))
      {
       var imgID = (myImage.id) ? "id='"+myImage.id+"'":""
       var imgClass = (myImage.className) ? "class='" +myImage.className +"'":""
       var imgTitle = (myImage.title) ?
           "title='" +myImage.title +"'":"title='" +myImage.alt+"'"
       var imgStyle = "display:inline-block;" +myImage.style.cssText
       var strNewHTML = "<span "+imgID+imgClass+imgTitle
           +" style=\"" "width:"+myImage.width
           +"px; height:"+myImage.height
           +"px;"+imgStyle+";"
           +"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
           +"(src=\'"+myImage.src+"\', sizingMethod='scale');\"></span>"
           myImage.outerHTML = strNewHTML
      }
      }

  2. 在模板的<HEAD> </HEAD> 區段中加上如下程式碼:
    • <!--[if lt IE 7]>
      <script defer type="text/javascript" src="pngfix.js"></script>
      <![endif]-->
  3. 在需要透明的 png 的地方 <img src="" > 中加入onload="fixPNG(this)"

有空在來研究 CSS 在 IE6 的功能表位置會跑掉的問題。

分類:Blogger Hack 標籤:

CSS圓角框框

2008 年 11 月 06 日 發表留言

參考文章:CSS圓角表格問題

在 Blogger 上新增一個小工具 {HTML/Javascript} 來放置一些文字,之前使用 TABLE 語法來排版,發覺如果文字內容如有所變動的話還真是麻煩的,剛好看到上面的文章,測試了一下,還真不錯用。

<style type="text/CSS">
div#mid{margin:0px 20px;text-align:center;background:#aba;font-size:14px;}
div.rtop {display:block;background:#fff}
div.rtop div{display:block;height:1px;overflow:hidden;background:#aba}
div.r1{margin:0px 3px}
div.r2{margin:0px 2px}
div.r3{margin:0px 1px}
div.rtop div.r4 {margin:0 1px;height:1px}
</style>
<div id="mid">
  <div class="rtop">
    <div class="r1"></div>
    <div class="r2"></div>
    <div class="r3"></div>
    <div class="r4"></div>
  </div>
  <center>div + CSS 圓角矩形</center>
  <center>div + CSS 圓角矩形</center>
  <center>div + CSS 圓角矩形</center>
  <center>div + CSS 圓角矩形</center>

  <div class="rtop">
    <div class="r4"></div>
    <div class="r3"></div>
    <div class="r2"></div>
    <div class="r1"></div>
  </div>
</div>

我把其原始碼中的 p {padding:5px 10px;margin:2px;text-align:center;} 語法刪除了,改成 <center>…</center> ,以免影響到其他文章。

————————-以下 2008-12-05 新增——————————-

text-align:center; 加到 div#mid{…} 中,取代必須在文字前後加上 <center>…</center> 的麻煩,加完之後的片段代碼如下:

div#mid{margin:0px 20px;text-align:center;background:#aba;font-size:14px;}

————————-以上 2008-12-05 新增——————————-

綠色字串部份就是要顯示的內容。

————————-以下 2008-11-09 新增——————————-

其他參考資料:(以CSS+Javascript為主)

另外,從這裡 (怎麼樣用CSS製作可自動延展的圓角矩形? )的討論看到有段原理的表示方式不錯,節錄如下:

原理其實不難,就是用 padding去讓區塊"縮"起來…用堆積木的方式堆出來的。
(不過當時我看到的是用 div 而不是 b 堆出來的)

圖示: (因為網頁會忽略空白,排版不易… 只作"一邊"的圖示)
    div 1 (padding-right:3px) █████████
    div 2 (padding-right:2px) ██████████
    div 3 (padding-right:1px) ███████████
    div 4 (padding-right:0px) ████████████
    div 4 (padding-right:0px) ████████████
( 兩個 div 4 是同一個 div, height:2px , 其它的 height:1px)

這樣圖形就被"畫"出來了。雖然沒用過表格的方式,不過原理應該是差不多的吧!

還有許多文章因為原理大多相似,就不多列出了。

    其他參考資料:(使用貼圖的方式)

    網路上還有很多各類的 圓角框產生器,不在本文討論範圍,在此不列入。

    ————————-以下 2008-11-25 新增——————————-

    原本製作出來的圓角,總感覺不夠圓,後來修改了幾個數值,總算比較像樣一點,其實也只是修改CSS內容而已,修改的內容如下:

    div.r1{margin:0px 5px}
    div.r2{margin:0px 3px}
    div.r3{margin:0px 2px}
    div.rtop div.r4 {margin:0 1px;height:2px}

    分類:Blogger Hack 標籤:
    %d 位部落客按了讚: