有网友在论坛上询问，如何可以调出动易图片文章显示这样的效果？

　　特别是下面文字的背景色，字体的色要为白色。如用:
则：#index {}
#index td {中间该是什么ＣＳＳ}

　　其实这个问题，利用div即可实现自定义图片文章效果：

#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）的方法（因为系统是以
回行的方式分开图片与文字的，所以要用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

效果请参阅：/CMS/Index.html

以上效果模板源代码：

                 
                 

                 

以上效果风格代码：

#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区块中，鼠标经过时文字的三种状态的文字颜色为白色 */

以上效果页面源代码：