您现在的位置是:首页 > 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织梦系统TAG标签伪静态怎么设置
DedeCMS的系统TAGS确实是一个非常好的功能,通过关键词链接可以快速寻找到相关内容,不过很多人希望能够将TAGS静态化这样更加利于SEO
dedecms织梦修改专题文章列表模板的方法
如果没有进行特别的设置,专题的文章列表显示默认是采用的default下面的article_spec.htm文件作为模板;这个模板文件很简单,前面是该专题的一些信息
织梦搜索结果页怎么单独调用搜索结果条数
织梦dedecms默认的搜索结果页面不支持搜索结果总数的调用,没有这样的标签,但有时候我们需要在搜索结果页单独显示搜索结果条数,所以我们就得自己通过修改文件来实现了。
dedecms织梦时间格式调用汇总归类
1.时间格式 {dede:field name='pubdate' function='strftime("%Y年%m月%d日 %H:%M:%S","@m
相关源码
-
(PC+WAP)茶叶茶艺茶道茶文化pbootcms模网站源码下载本模板基于PbootCMS系统开发,为茶叶企业、茶艺培训机构设计,特别适合展示茶产品、茶道文化等内容。采用响应式技术,确保在不同设备上都能呈现优雅的茶文化氛围。查看源码 -
(自适应)宽屏农业机械农耕设备类网站pbootcms模板免费下载为农机企业打造的现代化响应式网站模板,自动适配电脑、平板和手机,浏览体验一致,独立页面SEO设置,提升搜索引擎可见度。查看源码 -
(自适应)宽屏大气红色机械设备pbootcms模板源码下载为机械设备制造企业设计的响应式网站模板,采用PbootCMS内核开发。宽屏布局突出设备展示效果,红色工业风格贴合机械行业属性,支持PC端与手机端自动适配查看源码 -
(自适应)科技产品设备技术作品pbootcms网站模板带下载和招聘基于PbootCMS内核开发的高端科技企业模板,采用响应式布局技术,适配各类移动终端设备。模板设计聚焦科技行业特性,通过模块化结构实现企业形象展示、技术成果发布与人才招募等核心需求查看源码 -
(PC+WAP)蓝色新能源环保太阳能光伏模板pbootcms下载新能源环保行业网站解决方案为太阳能光伏系统企业打造的专业网站模板,助力新能源企业高效展示产品与服务PbootCMS内核开发,源码开放可修改PC与手机端自适应设计查看源码 -
WordPress个人博客主题 - wp-Concise-v1.0免费下载wp-Concise-v1.0是一款专为个人博客设计的简约风格主题,采用全宽排版设计理念,注重内容呈现效果。该模板适用于个人随笔、技术分享、生活记录等博客场景,帮助用户打造专业的内容展示空间。查看源码
| 分享笔记 (共有 篇笔记) |
