淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 4093|回复: 23
收起左侧

【幽兰】基础版&专业版全屏店招制作教程

  [复制链接]
  • TA的每日心情

    2016-4-18 13:29
  • 签到天数: 28 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    1

    主题

    6

    帖子

    6587

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6587

    发表于 2016-4-22 16:47:20 | 显示全部楼层 |阅读模式
    本帖最后由 Rain 于 2016-4-22 21:55 编辑

    今天给大家带来一个全屏店招的制作方法,此方法可完美实现基础版、专业版的全屏店招效果,
    完美支持搜索列表页、详情页
    此方法相比其他大神公布的写法,
    我这个方法,更简单,更方便,只需要修改几条属性就能达到想要的全屏效果


    其实此方法的原理非常简答,通过修改官方导航的menu-list来实现的,如图:
    QQ截图20160422152236.png
    修改默认menu-list的宽高,1920x150px来实现我们的全屏尺寸;

    QQ截图20160422143236.png

    然后再给我们相应的skin-box-bdt设置宽度、高度、定位偏移量,来达到我们全屏居中效果,如下图:

    QQ截图20160422143717.png

    最后的话,我们将menu导航菜单给隐藏掉,就达到了全屏的效果,


    接下来,我们只需要对我们的店铺招牌进行自定义即可,加上我们相应的自定义代码即可实现,如下图:

    QQ截图20160422152551.png

    导航CSS代码如下:
    1. .all-cats{display: none;}/*隐藏所有分类*/
    2. .menu{display: none;}/*隐藏导航文字菜单*/
    3. .skin-box-bd{/*设置导航父容易的宽度、定位偏移量*/
    4.         position: relative;
    5.         width: 1920px;
    6.         height: 0;
    7.         left: -485px;
    8. }
    9. .menu-list{/*设置全屏店招的宽度、高度、背景、定位偏移量*/
    10.         width: 1920px;
    11.         height: 150px;
    12.         background: url(#image背景图片) no-repeat center;/*图片为你的1920x150px的背景图片*/
    13.         position: relative;
    14.         top: -150px;
    15. }


    店招自定义代码如下:
    1. <div style="height: 150px;" data-titile="幽兰设计制作">
    2.         <div style="position: relative;z-index: 99;width: 950px;height: 150px;background: none;">
    3.                  
    4.                 <!--内容区域-->

    5.         </div>
    6. </div>






    评分

    参与人数 2美工币 +50 收起 理由
    路过时光尽头 + 20 感谢分享!
    pjhheng + 30 很给力!没测试··先给着

    查看全部评分

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2015-9-29 17:06
  • 签到天数: 87 天

    连续签到: 1 天

    [LV.6]渐入佳境

    26

    主题

    339

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52932

    最佳新人热心会员天猫美工

    发表于 2016-4-22 16:57:04 | 显示全部楼层
    发你店铺看看
  • TA的每日心情
    心跳
    10 小时前
  • 签到天数: 1128 天

    连续签到: 7 天

    [LV.10]功行圆满

    12

    主题

    803

    帖子

    22万

    积分

    高级会员

    阅读权限: 50

    出来混迟早要开店铺的~

    Rank: 8Rank: 8

    积分
    228497

    淘宝皇冠店美工天猫美工最佳新人热心会员宣传达人活跃会员优秀版主

    发表于 2016-4-22 17:53:04 | 显示全部楼层
    等51过了,就好好折腾店铺~ 已经收藏好了~  万分感激~
    代小学生打架 做作业~
  • TA的每日心情
    大哭
    昨天 14:19
  • 签到天数: 650 天

    连续签到: 3 天

    [LV.9]已臻大成

    37

    主题

    2231

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    【单身狗认证】

    Rank: 8Rank: 8

    积分
    138011

    最佳新人热心会员宣传达人活跃会员优秀版主灌水之王

    QQ
    发表于 2016-4-22 18:08:12 | 显示全部楼层
    感谢分享!这对新人很有用处!
  • TA的每日心情
    抱抱
    2016-11-23 10:46
  • 签到天数: 135 天

    连续签到: 1 天

    [LV.7]炉火纯青

    9

    主题

    887

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31914

    淘宝皇冠店美工最佳新人热心会员

    QQ
    发表于 2016-4-22 18:10:29 | 显示全部楼层
    好像看不懂

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    大哭
    2016-11-15 22:21
  • 签到天数: 185 天

    连续签到: 2 天

    [LV.7]炉火纯青

    15

    主题

    316

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24671

    最佳新人热心会员

    QQ
    发表于 2016-4-23 00:33:14 | 显示全部楼层
    这个很棒,五月份试试。 为什么我头像没了, ORZ
  • TA的每日心情

    2016-5-30 09:42
  • 签到天数: 53 天

    连续签到: 1 天

    [LV.5]略有小成

    1

    主题

    171

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11002

    发表于 2016-4-23 09:18:52 | 显示全部楼层
    谢谢分享,收藏

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    吐舌头
    昨天 09:46
  • 签到天数: 779 天

    连续签到: 6 天

    [LV.10]功行圆满

    13

    主题

    1408

    帖子

    16万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    166899

    天猫美工最佳新人宣传达人热心会员

    发表于 2016-4-23 10:15:06 | 显示全部楼层
    改天试试

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2016-11-26 10:43
  • 签到天数: 62 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    34

    帖子

    7776

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    7776

    发表于 2016-4-23 13:45:32 | 显示全部楼层
    谢谢分享,收藏

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2016-10-5 11:26
  • 签到天数: 270 天

    连续签到: 1 天

    [LV.8]自成一派

    2

    主题

    173

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43388

    发表于 2016-4-28 12:00:31 | 显示全部楼层
    屌屌的 楼主可以继续分享点其他的
    天晴
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-4 18:18 , Processed in 0.138067 second(s), 26 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表