DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 動易模板常用CSS修改實際操作技巧[組圖]
動易模板常用CSS修改實際操作技巧[組圖]
編輯:CSS詳解     

  1.--欄目文章列表內容間隔顏色的定義--

  方法一(雅虎提供):如果是默認的,即不需要改函數式標簽GetArticleList中的參數,可以用CSS來定義(在後台風格中修改):

  .listbg /* --欄目文章列表內容間隔顏色的定義1-- */

  {
  background:#ffffff;border-bottom: 1px dashed #cccccc;
  }

  .listbg2 /* --欄目文章列表內容間隔顏色的定義2-- */

  {
  background:#ffffff;border-bottom: 1px dashed #cccccc;
  }

  1): 方法1,表格虛線定義:

  進入後台,打開網站風格管理,按ctrl+F查找 .listbg2 找到:

  .listbg /* --欄目文章列表內容間隔顏色的定義1-- */

  {
  background:#ffffff;
  }

  .listbg2 /* --欄目文章列表內容間隔顏色的定義2-- */

  {
  background:#f7f7f7;
  }

  修改為:

  .listbg /* --欄目文章列表內容間隔顏色的定義1-- */

  {
  background:url(Skin/blue/xxx.gif);height: 24;font-size:9pt;color: #000000;
  }

  .listbg2 /* --欄目文章列表內容間隔顏色的定義2-- */

  {
  background:url(Skin/blue/xxx.gif);height: 24;font-size:9pt;color: #000000;
  }

  注釋:xxx.gif為虛線圖片大小為3X24 px 與 height: 24 必須對稱。color: #000000; 字體顏色。

  示例圖片1:

方法二,標簽來定義(需要手動把代碼加到後台風格裡)

  自己定義連接的文字顏色與行高等參數。

  {$GetArticleList(1,0,True,0,True,6,False,False,"",0,3,2,16,0,False,3,True,False,0,False,False,False,True,True,False,1,1,aaa,bbb,ccc)}

  例子:

  * 自定義列表標簽鏈接文字顏色定義 */

  a.aaa{text-decoration: none;}

  a.aaa:link {color: 000000;FONT-SIZE: 9pt;}

  a.aaa:visited {color: 000000;FONT-SIZE: 9pt;}

  a.aaa:hover{color: ff6600;FONT-SIZE: 9pt;}

  a.aaa:active {color: 000000;FONT-SIZE: 9pt;}

  .bbb /* --自定義列表標簽中偶數表格行背景顏色定義-- */

  {
  background:url(Skin/blue/hengxian.gif);height: 24;font-size:9pt;color: #000000;
  }

  .ccc /* --自定義列表標簽中偶數表格行背景顏色定義-- */

  {
  background:url(Skin/blue/hengxian.gif);height: 24;font-size:9pt;color: #0000ff;
  }

  注釋基本同上。

  示例圖片2:

2.留言版、論壇新貼、專題列表、最新推薦等……用JS來調用的列表CSS

  留言舉例說明:

  <span style="FONT-SIZE: 12px; LINE-HEIGHT: 24px; LETTER-SPACING: 1px">

  <script src="guestbook/newguest.ASP?KindId=0&num=8&tlen=13&order=0&info=0"></span>

  其他調用的列表CSS方法類似,不一一列出。

  示例圖片3:

  3.表格邊框CSS定義

  1):方法1;

  動易默認文章首頁CSS

  進入後台,打開網站風格管理,按ctrl+F查找 .main_title_282 找到:

  .main_title_282 /* 欄目文章列表標題表格背景、文字顏色定義(282) */

  {
  background:#FFE3DC;color:#ff0000;height: 24;border-top: 1px solid #ff0000;border-left: 1px solid #ff0000;border-right: 1px solid #ff0000;padding-left:20;
  }

  .main_tdbg_282 /* 欄目文章列表內容表格背景、文字顏色定義(282) */

  {
  border: 1px solid #ff0000;line-height: 150%;text-align: left;padding-left:5;padding-right:5;
  }

  注釋:(border-top: 1px solid #ff0000;border-left: 1px solid #ff0000;border-right: 1px solid #ff0000;)上、左、右、邊框的顏色和粗細;

  (background:#FFE3DC;)背景顏色;

  (border: 1px solid #ff0000;)border: 1px solid #ff0000;邊框顏色為紅色。

  (line-height: 150%;text-align: left;padding-left:5;padding-right:5;) 分別是行高,距離左和右的距離是5px。

  示例圖片4:


  2):方法2;

  自己定義表格邊框的CSS

  代碼:

  <table width="180" align="center" style="BORDER-RIGHT: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid; border-top: #ff0000 1px solid; border-bottom: #ff0000 1px solid" >
  <tr>
  <td></td>
  </tr>
  </table>

  分別定義了表格上、下、左、右 粗細為1像素,邊框為紅色的表格。效果同上。

  這裡一般只用左、右就可以了(style="BORDER-RIGHT: #ff0000 1px solid; BORDER-LEFT: #ff0000 1px solid;),可以根據自己的需要來刪除和添加。

  4. 文章內容頁主標題與內容文字的CSS

  文章主標題的顏色與字體大小;

  進入後台,打開網站風格管理,按ctrl+F查找 main_ArticleTitle 找到:

  .main_ArticleTitle /* 主標題文字顏色定義 */

  {
  color: ff0000;font-weight:bold;font-size: 18;line-height: 150%;
  }

  這個不用注釋了吧,顏色和字體大小都在這裡。

  文章內容文字的字體大小,行高,行距等;

  <SPAN style="font-size:14.8px;line-height:24px;letter-spacing:1px">{$ArticleContent}</span>

  示例圖片5:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved