淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1563|回复: 19
收起左侧

这两天自己写代码遇到的问题解决了 来分享下

[复制链接]
  • TA的每日心情
    不爽
    2015-7-1 10:35
  • 签到天数: 44 天

    连续签到: 2 天

    [LV.5]略有小成

    16

    主题

    175

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12943

    最佳新人热心会员

    QQ
    发表于 2015-6-23 17:53:22 | 显示全部楼层 |阅读模式
    本帖最后由 huwenling 于 2015-6-23 17:55 编辑

    本人码盲 磕磕碰碰 摸索到现在 突然想写一个弹出层的代码 如今代码写好了  分享下  也分享下在写的过程中遇到的问题
    1. <div style="height:387px;width:1920px;">
    2.   <div class="footer-more-trigger" style="width:1920px;height:387px;left:auto;top:auto;margin:0;padding:0;border:0;">
    3.     <div class="footer-more-trigger" style="left:-485px;top:-20px;margin:0;padding:0;border:0;">
    4.       
    5.           <div style="width:1920px; height:156PX;"><img src="http://img02.taobaocdn.com/imgextra/i2/2561508845/TB2.HdAdpXXXXbbXXXXXXXXXXXX_!!2561508845.jpg"></div>
    6.           <div style="width:1920px; height:161px;">  
    7.           <div style="width:473px; height:161px; float:left;"><img src="http://img03.taobaocdn.com/imgextra/i3/2561508845/TB261trdpXXXXaXXpXXXXXXXXXX_!!2561508845.jpg"></div>
    8.             
    9.           <div class="t1" style="width:195px; height:161px; float:left;"><img src="http://img03.taobaocdn.com/imgextra/i3/2561508845/TB2Wo8jdpXXXXbIXpXXXXXXXXXX_!!2561508845.jpg"></div>
    10.             <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.t1',
    11.                                                 'align':{
    12.                                                         'node':'.t1',
    13.                                                         'offset':[0,0],
    14.                                                         'points':['cc','cc']
    15.                                                 }
    16.                                                 }">
    17.                                                     <div style="width:195px; height:161px;">
    18.                                                         <img src="http://img03.taobaocdn.com/imgextra/i3/2561508845/TB2_DBqdpXXXXcYXXXXXXXXXXXX_!!2561508845.jpg">
    19.                                                                 </div>
    20.                       </div>
    21.                                                    
    22.           <div class="t2" style="width:196px; height:161px; float:left;"><img src="http://img02.taobaocdn.com/imgextra/i2/2561508845/TB2QtlwdpXXXXbfXXXXXXXXXXXX_!!2561508845.jpg"></div>
    23.     <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.t2',
    24.                                         'align':{
    25.                                                 'node':'.t2',
    26.                                                 'offset':[0,0],
    27.                                                 'points':['cc','cc']
    28.                                         }
    29.                                         }">
    30.                                             <div style="width:196px; height:161px;">
    31.                                                 <img src="http://img01.taobaocdn.com/imgextra/i1/2561508845/TB2.dpMdpXXXXXTXXXXXXXXXXXX_!!2561508845.jpg">
    32.                                                         </div>
    33.                                                         </div>
    34.                                                    
    35.           <div class="t3" style="width:203px; height:161px; float:left;"><img src="http://img03.taobaocdn.com/imgextra/i3/2561508845/TB23rJvdpXXXXcNXXXXXXXXXXXX_!!2561508845.jpg"></div>
    36. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.t3',
    37.                         'align':{
    38.                                         'node':'.t3',
    39.                                         'offset':[0,0],
    40.                                         'points':['cc','cc']
    41.                                     }
    42.                                     }">
    43.                                       <div style="width:203px; height:161px;">
    44.                                           <img src="http://img02.taobaocdn.com/imgextra/i2/2561508845/TB2.70wdpXXXXXjXpXXXXXXXXXX_!!2561508845.jpg">
    45.                                                     </div>
    46.                                                     </div>
    47.                                                    
    48.           <div class="t4" style="width:187px; height:161px; float:left;"><img src="http://img02.taobaocdn.com/imgextra/i2/2561508845/TB2Lo8JdpXXXXXbXXXXXXXXXXXX_!!2561508845.jpg"></div>
    49. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.t4',
    50.                         'align':{
    51.                                         'node':'.t4',
    52.                                         'offset':[0,0],
    53.                                         'points':['cc','cc']
    54.                                     }
    55.                                     }">
    56.                                       <div style="width:195px; height:161px;">
    57.                                           <img src="http://img04.taobaocdn.com/imgextra/i4/2561508845/TB2_fhsdpXXXXayXpXXXXXXXXXX_!!2561508845.jpg">
    58.                                                     </div>
    59.                                                     </div>
    60.                                                    
    61.           <div class="t5" style="width:192px; height:161px; float:left;"><img src="http://img02.taobaocdn.com/imgextra/i2/2561508845/TB2ZeJudpXXXXXgXpXXXXXXXXXX_!!2561508845.jpg"></div>
    62. <div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{'trigger':'.t5',
    63.                         'align':{
    64.                                         'node':'.t5',
    65.                                         'offset':[0,0],
    66.                                         'points':['cc','cc']
    67.                                     }
    68.                                     }">
    69.                                       <div style="width:192px; height:161px;">
    70.                                           <img src="http://img04.taobaocdn.com/imgextra/i4/2561508845/TB2nUdudpXXXXXZXpXXXXXXXXXX_!!2561508845.jpg">
    71.                                                     </div>
    72.                                                     </div>
    73.             
    74.            <div style="width:474px; height:161px; float:left;"><img src="http://img01.taobaocdn.com/imgextra/i1/2561508845/TB20QBCdpXXXXaDXXXXXXXXXXXX_!!2561508845.jpg"></div></div>
    75.             
    76.           <div style="width:1920px; height:70px; float:left;"><img src="http://img04.taobaocdn.com/imgextra/i4/2561508845/TB2UwhIdpXXXXXwXXXXXXXXXXXX_!!2561508845.jpg"></div>
    77.                
    78.          </div>
    79.      </div>
    80. </div>
    复制代码
    这是完成的代码 在写的过程中遇到的最棘手的问题就是 排版布局错乱  卡了我两天  偶然间看到别人写的别的一篇代码才幡然醒悟
    在写的过程中我使用一个大的DIV容器去包含N多个小的DIV  这是我错的地方 我忽略了 DIV的布局思路和表格是一样的
    在这里提醒像我一样还不懂布局的新手们  布局是以行为基准的 一行需要一个容器  千万不能一个容器 容纳了多行 多行就会错乱



    评分

    参与人数 1美工币 +20 收起 理由
    龍的傳人 + 20 赞一个!

    查看全部评分

    有时候我们走的太远,以至于忘记了为什么而出发!
  • TA的每日心情
    加油
    2016-10-17 16:29
  • 签到天数: 327 天

    连续签到: 1 天

    [LV.8]自成一派

    6

    主题

    370

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    63610

    最佳新人热心会员

    发表于 2015-6-23 23:59:28 | 显示全部楼层

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


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

  • TA的每日心情
    抱抱
    2016-11-3 16:54
  • 签到天数: 112 天

    连续签到: 1 天

    [LV.6]渐入佳境

    1

    主题

    110

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16486

    发表于 2015-6-24 08:06:50 | 显示全部楼层
    受教了!
  • TA的每日心情
    抱抱
    2016-10-14 17:55
  • 签到天数: 90 天

    连续签到: 1 天

    [LV.6]渐入佳境

    17

    主题

    585

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23827

    发表于 2015-6-24 08:34:23 | 显示全部楼层
    写完后加一个清除浮动

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


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

  • TA的每日心情
    抱抱
    2015-8-28 09:03
  • 签到天数: 75 天

    连续签到: 2 天

    [LV.6]渐入佳境

    4

    主题

    236

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16452

    发表于 2015-6-24 08:56:23 | 显示全部楼层

    受教了!
    哈哈哈哈哈
  • TA的每日心情
    抱抱
    2015-8-14 09:53
  • 签到天数: 53 天

    连续签到: 1 天

    [LV.5]略有小成

    7

    主题

    248

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12565

    最佳新人热心会员

    QQ
    发表于 2015-6-24 09:08:43 | 显示全部楼层
    收藏了,以后可以做参考,谢谢分享
    好的开始,需要不断的努力!
  • TA的每日心情
    臭美
    2015-9-30 09:04
  • 签到天数: 224 天

    连续签到: 3 天

    [LV.7]炉火纯青

    5

    主题

    495

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    76999

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

    发表于 2015-6-24 09:15:48 | 显示全部楼层
    支持楼主一个

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


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

  • TA的每日心情
    抱抱
    3 天前
  • 签到天数: 39 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    250

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14285

    QQ
    发表于 2015-6-24 09:44:43 | 显示全部楼层
    码盲,不懂啊,不会写啊

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


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

  • TA的每日心情
    不爽
    昨天 16:41
  • 签到天数: 129 天

    连续签到: 1 天

    [LV.7]炉火纯青

    20

    主题

    454

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    28014

    最佳新人热心会员

    发表于 2015-6-24 16:24:08 | 显示全部楼层

    码盲,不懂啊,不会写啊

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


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

  • TA的每日心情
    不爽
    2015-7-1 10:35
  • 签到天数: 44 天

    连续签到: 2 天

    [LV.5]略有小成

    16

    主题

    175

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12943

    最佳新人热心会员

    QQ
     楼主| 发表于 2015-6-25 00:15:04 | 显示全部楼层
    喜喜 发表于 2015-6-24 16:24
    码盲,不懂啊,不会写啊

    慢慢就会了哦  其实我也不怎么会
    有时候我们走的太远,以至于忘记了为什么而出发!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-8 06:19 , Processed in 0.134779 second(s), 24 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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