利用div实现自定义图片文章效果

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

　　特别是下面文字的背景色，字体的色要为白色。如用:<div id="index">{$GetPicArticle(1001,0,true,0,1,false,true,0,1,1,190,140,30,0,false,1)}</div>
则：#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）的方法（因为系统是以<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

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

以上效果页面源代码：

<td vAlign=center align=middle width=140 bgColor=#f2f2f2>
                  <div id="index"><table width='100%' cellpadding='0' cellspacing='5' border='0' align='center'><tr valign='top'><td align='center'><a class="" href="/CMS/CMS2006/FAQ/1083.html" title="文章标题：FlashFXP使用教程
作    者：佚名
更新时间：2006-11-10 12:03:06" target="_blank"><img class='pic1' src='/CMS/UploadFiles_2016/200611/20061110120330465_S.gif' width='130' height='80' border='0'></a><br><a class="" href="/CMS/CMS2006/FAQ/1083.html" title="文章标题：FlashFXP使用教程
作    者：佚名
更新时间：2006-11-10 12:03:06" target="_blank">FlashFXP使用教程</a></td></tr><tr valign='top'><td align='center'><a class="" href="/CMS/CMS2006/FAQ/1082.html" title="文章标题：LeapFTP使用教程
作    者：唉哟喂^痛
更新时间：2006-11-10 11:39:24" target="_blank"><img class='pic1' src='/CMS/UploadFiles_2016/200611/20061110114506461_S.jpg' width='130' height='80' border='0'></a><br><a class="" href="/CMS/CMS2006/FAQ/1082.html" title="文章标题：LeapFTP使用教程
作    者：唉哟喂^痛
更新时间：2006-11-10 11:39:24" target="_blank">LeapFTP使用教程</a></td></tr></table></div>
                  </td>