您现在的位置是:首页 > 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>
本文标签:
很赞哦! ()
相关教程
图文教程
dede织梦搜索时间间隔的修改方法
我们大家是否经常碰到这样的为,如果想用织梦的搜索功能搜索某些关键词,如果时间间隔太短,总是提示我们时间间隔太短,下面告诉您修改方法。
dedecms文章列表arclist标签增加notypeid属性过滤指定栏目
我们都知道织梦的模板引擎标签功能非常的强大,只要了解这些模板标签,在前台调用各种形式的内容数据就可以得心应手。 当然,如果我们能再加点,对织梦默认的标签再
dedecms5.3采集步骤教程
首先说明一下的是,第一次写这种教程,有不当的地方请大家包涵。采集过程其实就是copy的过程,只不过,我们copy的是显示结果,而采集主要针对源码进行。
dedecms5.7sp1评论怎么添加字段
dedecms5.7sp1评论添加字段的解决方法问题,问题得以解决:实现方法如下:1,后台:系统—SQL命令运行器 中输入:alter tab
相关源码
-
(PC+WAP)蓝色不锈钢簧线金属制品营销型pbootcms网站模板本模板基于PbootCMS内核开发,为不锈钢及金属制品企业量身打造。采用响应式设计,适配PC与移动设备,提供统一后台管理体验,数据实时同步更新。查看源码 -
(自适应响应式)工业机床工程农业机械设备网站源码下载框架适用于工程机械、机床设备等工业领域。通过模块调整可快速转型为农业机械、物流设备展示系统。预留7种工业产品展示模板。查看源码 -
(自适应响应式)HTML5甲醛环境检测网站模板带在线留言和资料下载本模板为甲醛检测与环保科技企业开发,采用PbootCMS内核构建。首页集成空气质量数据可视化模块,服务流程采用时间轴展示设计,检测报告板块支持PDF在线预览功能查看源码 -
(自适应响应式)高端网站建设设计公司互联网营销网站pbootcms模板本模板基于PbootCMS内核开发,为网站建设公司和互联网营销企业量身打造。采用响应式设计,适配各种移动设备,提供统一的后台管理体验查看源码 -
(自适应)帝国cms7.5模板自媒体文章新闻博客为帝国CMS7.5设计的响应式模板,采用H5技术构建现代化内容展示框架。通过智能断点检测技术实现手机、平板、PC三端适配查看源码 -
(自适应响应式)环保水净化处理设备阀门等网站源码下载基于PbootCMS内核开发的响应式模板,为水处理设备、空气净化器等环保企业设计,自适应手机端浏览。通过简洁高效的后台管理系统,助力环保科技企业快速建立专业在线展示平台。查看源码
| 分享笔记 (共有 篇笔记) |
