:::

13. 設定區塊外觀

一、設定透明度(IE、FF皆適用)

1.透明度可以有效的讓物件和背景融合,數值越小,越不透明;反之,越大越透明。
2.此外,套用透明度時,需有明確的寬度設定,否則IE會沒有作用。

filter:alpha(opacity=30); /* IE */
-moz-opacity:0.3; /* Moz + FF */
opacity: 0.3; /* 支援CSS3的瀏覽器*/

二、輪流套用顏色

1.<{cycle}>是smarty的特殊函數,可以讓您輪流秀出設定值。
2.將<div class="block_title">改為<div class="<{cycle values="block_title,block_title_r,block_title_g,block_title_b"}>">
3.在CSS檔中,分別設新增block_title_r、block_title_g、block_title_b樣式。
4.補充:<{counter}>則是可以依序加上編號。

三、處理png透明圖在IE6的問題

1.將iepngfix.zip解壓,取出iepngfix.htc、blank.gif放到根目錄。
2.在CSS檔中,有套用到png圖的地方,加入:behavior: url(iepngfix.htc);

四、套用不同區塊設定(以中間區塊為例)

1.將block.html樣板檔複製一份,並改名為block_c.html。
2.修改block_c.html的內容,成為您想要的外觀版面。
3.在佈景中,要引入實體檔案,需用佈景標籤:
(1) 若檔案在根目錄<{xoAppUrl iepngfix.htc}>
(2) 若檔案在佈景目錄<{xoImgUrl images/btc1.png}>


<{if $block.title}>
  <table cellspacing="0" cellpadding="0" class="block_title_c">
  <tr>
  <td style='width:61px;'><img src="<{xoImgUrl images/btc1.png}>"></td>
  <td style='width:100%;background-image:url(<{xoImgUrl images/btc2.png}>);'><{$block.title}></td>
  <td style='width:13px;'><img src="<{xoImgUrl images/btc3.png}>"></td></tr>
  <tr><td colspan=3><{$block.content}></td></tr>
  </table>
<{else}>
  <{$block.content}>
<{/if}>


4.修改theme.html中,要改套用新樣板的區塊呈現區,修改其引入檔為block_c.html。
5.修改style.css,針對不同區域的的外觀做設定。


table.block_title_c{
  border-collapse:collapse;
  padding: 0px;
  border:none;
  margin:0px;
}

table.block_title_c td{
  behavior: url(iepngfix.htc);
}

table.block_title_c td img{
  behavior: url(iepngfix.htc);
}


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

13人線上 (4人在瀏覽線上書籍)

會員: 0

訪客: 13

更多…