利用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模板