领先的互联网解决方案提供商!

深圳 : 0755-2101 0201 广州 : 020-8092 8113 东莞 : 0769-3326 0066 <<<>
  • 365bet体育开户
  • SEO推广
  • 客户案例
  • 联系我们
  • 扫描添加微信

    30秒获取报价:

    提交您的电话,免费赠送一年维护及关键词排名

  • 联系人*
  • 手机号*
  • 模板制作教程(六) - 首页Banner轮播

    作者:http://www.tidalal.com365bet体育开户_365bet网站谁有_365bet备用网址日本建设SEO 发布于:2019-3-26 22:05:24 点击量:

    文章概要:

    首页的大图轮播,算是365bet体育开户_365bet网站谁有_365bet备用网址日本中的一道“硬菜”了。大图美不美观,直接影响整个365bet体育开户_365bet网站谁有_365bet备用网址日本的格局。当然,这道“硬菜”的关键部分应该掌握在设计师手中,设计师就是这道菜的厨师,而写模板的只不过是端盘子的而已。可是,职业不


    详细内容:

    首页的大图轮播,算是365bet体育开户_365bet网站谁有_365bet备用网址日本中的一道“硬菜”了。大图美不美观,直接影响整个365bet体育开户_365bet网站谁有_365bet备用网址日本的格局。

    当然,这道“硬菜”的关键部分应该掌握在设计师手中,设计师就是这道菜的厨师,而写模板的只不过是端盘子的而已。

    可是,职业不分贵贱,即便大厨烧出了美味的菜肴,服务员端菜的时候往里面加了只苍蝇,顾客也还是会反胃的。

    所以,不要小看端盘子的,他也是整个流程中重要的一环。


    回到正题,因为是模板制作教程,所以关于图片怎么轮播的部分就不展开讲了。各种素材站有很多炫酷的jQuery轮播插件,可以自行选择。

    教程中将以swiper为例,来做一个简单的轮播。


    swiper是一个强大的轮播插件,关于具体的一些使用方法,请自行参阅官方文档。


    一、先将swiper的文件放置在文件夹中,并引入到模板文件。

    001.jpg



    二、写HTML结构

    
    ????
    ????
    ????????
    ????????????
    ????????????????
    ????????????
    ????????
    ????
    ???? ???? ???????? ????
    ???? ???????? ????


    三、调用轮播图片

    这里有两个思路,使用PbootCMS自带的轮播图片模块或者自建一个轮播模型。

    1、使用PbootCMS自带的幻灯片模块

    {pboot:slide?gid=1?num=3}
    
    ????
    ??????
    ????
    
    {/pboot:slide}

    很简单,使用{pboot:slide}标签调用即可,其中gid是分组,num是数量。

    自带的轮播扩展内置了10个分组,有标题、副标题和链接地址,一般轮播够用了。


    2、自建一个轮播模型

    这是本篇教程着重要讲解的部分。

    关于模型概念的理解,在使用PbootCMS制作模板的时候是非常重要的。


    (1)、新建一个轮播模型

    002.png

    输入模型名称,模型类型选择列表,模板留空,提交。轮播模型就建好了,是不是很简单。


    (2)、添加模型字段

    003.jpg

    这里可以自己添加需要在轮播中出现的一些元素,比如覆盖在轮播图片上的文字,点击跳转的链接等等,更高级一些甚至还可以添加一个表示当前轮播图片的动画效果的CSS名称,让不同的轮播图用不同的动画效果出现。(只要开动脑筋,PbootCMS的模型让一切皆有可能)


    (3)、添加轮播栏目

    004.jpg

    添加栏目的理由:

    最简单的理由就是添加内容需要选择栏目,不然不能添加。不过,仔细思考一下,一个365bet体育开户_365bet网站谁有_365bet备用网址日本的轮播很有可能不止在首页顶部调用,比如一些侧边栏广告轮播。那么这里的栏目就相当于默认轮播扩展中的分组,不同的是,这里的栏目是可以无限分组的,而且还可以根据栏目名称知道这是显示在哪里的轮播,方便管理。


    (4)、接下来就可以添加轮播图了

    005.jpg

    可以看到,刚才添加的字段“轮播文字”也在这里显示了。


    (5)、轮播图调用

    关于自建模型中轮播图的调用,参考官网文档:指定列表调用?即可。


    四、添加swiper的js部分

    注意:代码需要在swiper.min.js后面。


    完成,剩下的就是CSS样式美化问题了。


    总结:轮播图制作的时候主要就是调用思路。使用自带的轮播扩展,可以直接添加调用;使用模型的方式,可以做一些更高级的定义。


    上一篇: 输出当前所在位置(面包屑导航)
    下一篇: Windows服务器IIS安全工具-D盾_防火墙 相关文章:

    2019-03-29 为什么你的365bet体育开户_365bet网站谁有_365bet备用网址日本主页上的图像很重要
    2019-03-29 阿里的域名持有者申请域名线下转移操作流程
    2019-03-29 365bet体育开户_365bet网站谁有_365bet备用网址日本建设的价格为什么区别那么大?
    2019-03-29 免费赠送的虚拟主机的三级域名是什么?
    2019-03-29 在我的虚拟主机根目录下有三个目录,文件应传至哪个目录下呢?
    2019-03-29 域名解析生效后,为何访问到365bet体育开户_365bet网站谁有_365bet备用网址日本建设公司虚拟主机控制面板
    2019-03-29 使用FTP软件上传文件时,提示密码错误,无法连接是为什么
    2019-03-29 如何跟网页设计公司讨论365bet体育开户_365bet网站谁有_365bet备用网址日本的视觉风格问题?
    2019-03-29 如果我对设计的成果不满意,可以要求重新设计吗?
    2019-03-29 网页设计公司完成的作品越多,代表品质越好吗?
    2019-03-29 365bet体育开户_365bet网站谁有_365bet备用网址日本出现崩溃的原因
    2019-03-29 解决365bet体育开户_365bet网站谁有_365bet备用网址日本支持请求需要多长时间
    2019-03-29 如何创建一个免费365bet体育开户_365bet网站谁有_365bet备用网址日本
    2019-03-29 本章概括【腾邦国际】-【腾邦现货】的含义及好处
    2019-03-28 滕邦国际,【滕邦现货】具体介绍资料
    2019-03-28 10、 【滕邦国际】,滕邦现货
    2019-03-28 抖音买粉,抖音流量,抖音涨粉
    2019-03-27 行业大牛带你玩转建站, 处处先人一步!
    2019-03-27 成为金领365bet体育开户_365bet网站谁有_365bet备用网址日本建设工程师 不是套用几个模板就可以搞定
    2019-03-27 网页设计师也应该懂得SEO技巧
    相关分类:
  • 公司新闻
  • 常见问题
  • 行业新闻
  • 365bet体育开户_365bet网站谁有_365bet备用网址日本推广
  • 365bet体育开户_365bet网站谁有_365bet备用网址日本推广
  • 365bet体育开户_365bet网站谁有_365bet备用网址日本建设
  • 推广常识
  • IT教程
  • SEO优化
  • 365bet体育开户_365bet网站谁有_365bet备用网址日本开发
  • 客户案例
  • 解决方案
  • 提交您的电话,免费赠送一年维护及关键词排名

  • 联系人*
  • 手机号*
    1. 首页
    2. 365bet体育开户
    3. 365bet体育开户_365bet网站谁有_365bet备用网址日本推广
    4. 软件开发
    5. 案例展示
    6. 关于我们
    7. 联系我们

      扫码添加微信咨询

    Copyright 2008-2018 通宝918官方下载 Shenzhen Sinco Network Co., Ltd 严禁抄袭模仿本站 违者依法追究责任! 粤ICP备14083186号-3

  • 通宝918官方下载
    电话 : 0755-2101 0201
    手机 : 136 3165 7619
    地址 : 深圳市龙华新区东环一路旭日大厦ll08室
  • 广州分公司
    电话 : 020-8092 8113
    手机 : 135 3988 3715
    地址 : 广州市海珠区宝岗大道268号中新大厦1912
  • 东莞分公司
    电话 : 0769-3331 9353
    手机 : 137 1719 8162
    地址 : 东莞市南城区鸿福路83号曼哈顿广场2409
  • 武汉分公司
    电话 : 027-8355 8661
    手机 : 182 4491 9118
    地址 : 武汉市东西湖区金银湖路18号财富大厦30E
  • 上海分公司
    电话 : 021-3113 7661
    手机 : 132 6719 9217
    地址 : 上海市闸北区江场西路299弄中铁广场堡尼大厦2131
  • 拨打电话
  • 添加微信
  • QQ咨询