您现在的位置是:首页 > 教程 > dedecms教程dedecms教程
织梦cms用CSS做滑动效果的图片
紫南2023-12-17 23:16:15dedecms教程已有9人查阅
导读先看下效果演示吧!(备注:由于做的匆忙,图片素材不是太好,所以效果要比想像中的差,感兴趣的朋友可以自己尝试)
先看下效果演示吧!(备注:由于做的匆忙,图片素材不是太好,所以效果要比想像中的差,感兴趣的朋友可以自己尝试)
用CSS做滑动效果的图片的代码如下(这样做好的好处是 避免了使用FLASH 降低网页体积 对SEO优化 比较好
缺点: 效果上和FLASH 没发比):
<style> #galleryh { padding:0; margin:0 auto 5em auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#fff url(/imagelist/06/24/o9642o826u4n.gif); } #galleryh li { float:left; } #galleryh li a { display:block; height:240px; width:28px; float:left; text-decoration:none; border-right:1px solid #fff; cursor:default; } #galleryh li a img { width:28px; height:240px; border:0; } #galleryh li a:hover { background:#eee; width:320px; } #galleryh li a:hover img { width:320px; } </style> <ul id="galleryh"> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/d4lprnr4jxk.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/ykibtonmkkh.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/an4tc4zdal2.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/cjxdoedqv3n.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/w3kjcctgvis.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"> </ul>
之后要在织梦模板中调用这个,请注意DEDE 缩略图调用代码为:
{dede:arclist row=10 titlelen=24 orderby=pubdate typeid=1 imgwidth='90' imgheight='90' type='all.'}
<li> [field:imglink/]
</li>
用CSS做滑动效果的图片的代码如下(这样做好的好处是 避免了使用FLASH 降低网页体积 对SEO优化 比较好
缺点: 效果上和FLASH 没发比):
<style> #galleryh { padding:0; margin:0 auto 5em auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#fff url(/imagelist/06/24/o9642o826u4n.gif); } #galleryh li { float:left; } #galleryh li a { display:block; height:240px; width:28px; float:left; text-decoration:none; border-right:1px solid #fff; cursor:default; } #galleryh li a img { width:28px; height:240px; border:0; } #galleryh li a:hover { background:#eee; width:320px; } #galleryh li a:hover img { width:320px; } </style> <ul id="galleryh"> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/d4lprnr4jxk.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/ykibtonmkkh.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/an4tc4zdal2.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/cjxdoedqv3n.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/w3kjcctgvis.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"> </ul>
之后要在织梦模板中调用这个,请注意DEDE 缩略图调用代码为:
{dede:arclist row=10 titlelen=24 orderby=pubdate typeid=1 imgwidth='90' imgheight='90' type='all.'}
<li> [field:imglink/]
</li>
本文标签:
很赞哦! (0)
暂无内容 |
暂无内容 |
相关文章
暂无内容 |
暂无内容 |
随机图文
织梦dede提示系统无此标签,可能已经移除的原因和解决方法
织梦的TAG标签确实是对网站内容进行聚合的一个非常好的方法,不过这个功能貌似有一点小问题,一个是文档统计的问题,有时候两个标签一样的文档,却不可以统计出来织梦cms连接微信后自动回复有时没有反应怎么办
微信现在火的不行不行的,代码号也不落后,加入了微信自动回复功能,大家可以关注“代码号”微信公众号,在公众号中回复相应的关键词织梦cms游客不能匿名软件投稿的解决方法
找到member下的soft_add.php,发现以下提示:考虑安全原因不管是否开启游客投稿功能,都不允许用户投稿Dedecms添加自定义函数的方法
添加自定义函数文件:include/extend.func.php实例://通过会员ID查看会员名称的函数function GetMemberName($
留言与评论 (共有 0 条评论) |