您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程
织梦cms用CSS做滑动效果的图片
紫南2023-12-17DedeCMS教程已有人查阅
导读先看下效果演示吧!(备注:由于做的匆忙,图片素材不是太好,所以效果要比想像中的差,感兴趣的朋友可以自己尝试)
先看下效果演示吧!(备注:由于做的匆忙,图片素材不是太好,所以效果要比想像中的差,感兴趣的朋友可以自己尝试)
用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>
本文标签:
很赞哦! ()
相关教程
图文教程
织梦dedecms自定义表单怎么实现多级城市联动
代码号接到一个订单,客户要求增加表单,并做城市的选择,没办法就想着研究下这个自定义表单如何做到城市联动了。要达到织梦默认没有的功能,这就需要对织梦自定义表单进行二次开发。
Error infos: dedecms错误警告连接数据库失败的解决方法
当大家遇到Error infos: DedeCms错误警告:连接数据库失败的问题,一般有以下可能1:如果您是第一次安装,出现以上数据库信息失败的问题,可核
dede织梦二次开发实现每分钟审核一篇文章并生成首页
dedecms发布文章时通常是发布即审核,dede二次开发每分钟审核一篇文章并生成首页的实现方法所介绍的方法对于使用dedecms采集功能的网站更有利
删除dedecms友情链接中li标签的删除方法
关于织梦dedecms友情链接中的li标签的删除问题,织梦使用者经常会用到。以下是这样去除dedecms友情链接中的li方法。
相关源码
-
pbootcms网站模板响应式全屏旅游景区网站源码本模板为风景民宿、旅游景区等企业设计,基于PbootCMS内核开发,具备响应式布局与专业SEO优化功能,助力企业低成本高效获客。以下是核心特点:查看源码 -
(自适应)物流运输快递仓储货运网站模板免费下载基于PbootCMS内核开发的物流运输行业专用模板,深度适配仓储货运企业的业务展示需求。前端采用响应式布局,自动适配手机端访问,后台数据实时同步更新,帮助企业高效展示运输网络、仓储设施、服务流程等核心业务模块。查看源码 -
(PC+WAP)绿色市政园林建筑设计绿化营销型pbootcms网站模板本模板基于PbootCMS系统开发,为园林绿化、景观设计类企业设计,特别适合市政园林、景观工程、绿化养护等企业使用。采用双端适配技术查看源码 -
(PC+WAP)蓝色不锈钢簧线金属制品营销型pbootcms网站模板本模板基于PbootCMS内核开发,为不锈钢及金属制品企业量身打造。采用响应式设计,适配PC与移动设备,提供统一后台管理体验,数据实时同步更新。查看源码 -
(自适应html5)自媒体运营培训教程个人博客pbootcms模板本模板基于PbootCMS系统开发,特别适合自媒体运营培训、知识付费类网站使用。采用响应式设计,能够适配各类终端设备,为内容创作者提供专业的内容展示平台。查看源码 -
(PC+WAP)pbootcms模板黑色门窗定制五金建材网站下载为门窗定制与五金建材企业设计的网站解决方案,采用PbootCMS开发,兼具专业展示与营销功能。黑色系设计突显工业质感,响应式布局确保在手机、平板等设备上的浏览体验。通过简单的内容替换,也可适用于建材贸易、家具定制等相关行业。查看源码
| 分享笔记 (共有 篇笔记) |
