{$GetPicArticle(1001,0,true,0,1,false,true,0,1,1,190,140,30,0,false,1)}</div>" />

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

时间:08-09-24 栏目:网络&技术 作者:wukong 评论:0 点击: 1,195 次

问题:如何可以调出动易图片文章显示这样的效果?
www.2hand.cn
特别是下面文字的背景色,字体的色要为白色。如用:<div id="index">{$GetPicArticle(1001,0,true,0,1,false,true,0,1,1,190,140,30,0,false,1)}</div>
则:#index {}
#index td {中间该是什么CSS}

解答:
#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
www.2hand.cn

以上效果模板源代码:

<td vAlign=center align=middle width=140 bgColor=#f2f2f2>
<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区块中,鼠标经过时文字的三种状态的文字颜色为白色 */

以上效果页面源代码:

<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="/help/CMS2006/FAQ/1083.html" title="文章标题:FlashFXP使用教程
作 者:佚名
更新时间:2006-11-10 12:03:06" target="_blank"><img class='pic1' src='/help/UploadFiles_4256/200611/20061110120330465_S.gif' width='130' height='80' border='0'></a><br><a class="" href="/help/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="/help/CMS2006/FAQ/1082.html" title="文章标题:LeapFTP使用教程
作 者:唉哟喂^痛
更新时间:2006-11-10 11:39:24" target="_blank"><img class='pic1' src='/help/UploadFiles_4256/200611/20061110114506461_S.jpg' width='130' height='80' border='0'></a><br><a class="" href="/help/CMS2006/FAQ/1082.html" title="文章标题:LeapFTP使用教程
作 者:唉哟喂^痛
更新时间:2006-11-10 11:39:24" target="_blank">LeapFTP使用教程</a></td></tr></table></div>
</td>

声明: 本文由( wukong )原创编译,转载请保留链接: 利用div实现自定义图片文章效果

利用div实现自定义图片文章效果:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!

------====== 本站公告 ======------
大家有任何疑问和建议,请到这里留言:点击留言板

读者排行