問題:如何可以調(diào)出動易圖片文章顯示這樣的效果?則:#index {}
#index td {中間該是什么CSS}
解答:
#index td { background: url(/images/indeximg.gif) repeat-x bottom; line-height: 24px;} /* id為index的div區(qū)塊中,td單元格中的背景圖片橫向重復(fù),可以進一步定義行高與高度 */
#index img { border: #064D9F 1px solid;margin-bottom:5px;} /* id為index的div區(qū)塊中,所有圖片的邊框為一個像素寬藍色實線;并距下面5個像素的空距 */
#index a, #index a:link, #index a:visited, #index a:active {color:#fff;text-decoration: underline;} /* id為index的div區(qū)塊中,有鏈接文字的三種狀態(tài)的文字顏色為白色 */
#index a:hover {color:#ffff00;text-decoration: underline;} /* id為index的div區(qū)塊中,鼠標經(jīng)過時文字的三種狀態(tài)的文字顏色為白色 */
說明:因為定義了#index td后會將所有的單元格填上顏色,因此很難達到與圖片間有間距的效果。因此用背景橫向重復(fù)(repeat-x表示只橫向重復(fù)圖片不豎向重復(fù))、居于底部(bottom)的方法(因為系統(tǒng)是以<br>回行的方式分開圖片與文字的,所以要用bottom使圖片居于底部)。可以解決在圖片距下面5個像素的空距(margin-bottom:5px;)后呈現(xiàn)白色的效果。圖片只要做寬為1、高為單元格高度的藍色背景的小小的圖片即可。
#index img定義了id為index的div區(qū)塊中圖片的樣式,圖片距下面5個像素的空距(margin-bottom:5px;)。
此處有鏈接的文字必須使用#index a的方式,才能指定id為index的div區(qū)塊中有鏈接文字的顏色。您也可以在此進一步定義字體、字號、大小。定義了大一些的字體,要配合修改如#index td 中的行高定義( line-height: 24px;)和圖片定義,這里不再重復(fù)。
希望大家能加強對div中控制css樣式使用的測試,會給您在相應(yīng)制作中帶來一定的啟示。
附:
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區(qū)塊中,td單元格中的背景圖片橫向重復(fù),可以進一步定義行高與高度 */
#index img { border: #064D9F 1px solid;margin-bottom:5px;} /* id為index的div區(qū)塊中,所有圖片的邊框為一個像素寬藍色實線;并距下面10個像素的空距 */
#index a, #index a:link, #index a:visited, #index a:active {color:#fff;text-decoration: underline;} /* id為index的div區(qū)塊中,有鏈接文字的三種狀態(tài)的文字顏色為白色 */
#index a:hover {color:#ffff00;text-decoration: underline;} /* id為index的div區(qū)塊中,鼠標經(jīng)過時文字的三種狀態(tài)的文字顏色為白色 */
以上效果頁面源代碼:
新聞熱點
疑難解答
圖片精選