利用div實現自定義圖片文章效果_動易Cms教程

問題：如何可以調出動易圖片文章顯示這樣的效果？
則：#index {}
#index td {中間該是什么ＣＳＳ}

解答：
#index td { background: url(/images/indeximg.gif) repeat-x bottom; line-height: 24px;} /* id為index的div區塊中，td單元格中的背景圖片橫向重復，可以進一步定義行高與高度 */
#index img { border: #064D9F 1px solid;margin-bottom:5px;} /* id為index的div區塊中，所有圖片的邊框為一個像素寬藍色實線；并距下面5個像素的空距 */
#index a, #index a:link, #index a:visited, #index a:active {color:#fff;text-decoration: underline;} /* id為index的div區塊中，有鏈接文字的三種狀態的文字顏色為白色 */
#index a:hover {color:#ffff00;text-decoration: underline;} /* id為index的div區塊中，鼠標經過時文字的三種狀態的文字顏色為白色 */

說明：因為定義了#index td后會將所有的單元格填上顏色，因此很難達到與圖片間有間距的效果。因此用背景橫向重復（repeat-x表示只橫向重復圖片不豎向重復）、居于底部（bottom）的方法（因為系統是以<br>回行的方式分開圖片與文字的，所以要用bottom使圖片居于底部）。可以解決在圖片距下面5個像素的空距（margin-bottom:5px;）后呈現白色的效果。圖片只要做寬為1、高為單元格高度的藍色背景的小小的圖片即可。

#index img定義了id為index的div區塊中圖片的樣式，圖片距下面5個像素的空距（margin-bottom:5px;）。

此處有鏈接的文字必須使用#index a的方式，才能指定id為index的div區塊中有鏈接文字的顏色。您也可以在此進一步定義字體、字號、大小。定義了大一些的字體，要配合修改如#index td 中的行高定義（ line-height: 24px;）和圖片定義，這里不再重復。

希望大家能加強對div中控制css樣式使用的測試，會給您在相應制作中帶來一定的啟示。

附：

indeximg.gif

效果請參閱：/help/Index.html
<div id="index"><!--{$GetPicArticle(1004,27,True,0,2,false,false,0,3,2,130,80,36,0,True,1)}--></div>
</td>

以上效果風格代碼：

#index td { background: url(/images/indeximg.gif) repeat-x bottom; line-height: 24px;} /* id為index的div區塊中，td單元格中的背景圖片橫向重復，可以進一步定義行高與高度 */
#index img { border: #064D9F 1px solid;margin-bottom:5px;} /* id為index的div區塊中，所有圖片的邊框為一個像素寬藍色實線；并距下面10個像素的空距 */
#index a, #index a:link, #index a:visited, #index a:active {color:#fff;text-decoration: underline;} /* id為index的div區塊中，有鏈接文字的三種狀態的文字顏色為白色 */
#index a:hover {color:#ffff00;text-decoration: underline;} /* id為index的div區塊中，鼠標經過時文字的三種狀態的文字顏色為白色 */

以上效果頁面源代碼：

查看更多 動易Cms教程  動易Cms模板