您现在的位置: 动易技术中心 >> 模板设计教程 >> 动易模板 >> 正文
[组图]利用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 {中间该是什么CSS}

  其实这个问题,利用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

以上效果模板源代码:

                  <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="/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>

文章录入:雅虎    责任编辑:雅虎 
  • 上一个文章:

  • 下一个文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    软件产品
    SiteFactory™ 内容管理系统
    SiteFactory™ 网上商店系统
    SiteWeaver™ 内容管理系统
    SiteWeaver™ 网上商店系统
    SiteWeaver™ 企业门户网站系统
    SiteWeaver™ 教育门户网站系统
    SiteWeaver™ 政府门户网站系统
    SiteWeaver™ 行业门户网站系统
    平台产品
    企业服务
    行业解决方案
    联系我们 | 关于动易 | 网站地图 | 相关证书 | 合作伙伴 | 招贤纳士 | 法律条款 | 隐私权声明
    安全上网网上报警
    动易网络科技有限公司版权所有 © 2003-  粤ICP备05004015号
    公安备案编号:200603D0322 本站基于 PowerEasy® SiteWeaver™ 制作