码迷,mamicode.com
首页 > 其他好文 > 详细

天猫通栏店尾

时间:2015-03-15 19:36:24      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

装修店铺的时候做一个通栏店尾,用全屏做的时候会出现滚动条,于是修改了一下,将宽度设置成100%,测试也没什么问题,首页,搜索页,详情页都显示正常。有需要的同学可以试一下。

首先效果是这样的

技术分享
 然后代码是这样的

<div style="height:100px;">
    <div class="sn-simple-logo" style="padding:0px;left:0;top:auto;margin:0px;width:100%;height:100px;background:#FF0;">
        <div style=" width:1200px; height:50px; margin:0 auto;">内容</div>
    </div> 
</div> 

顺便解释一下,给新入门的同学学习一下

<div style="height:100px;"> 这个外层的div的高度是100px。全屏浮动是没有高度的,不设置这里的话会档到淘宝官方的内容,这里高度应该和内容高度一样,这样就不会挡到了,内容是100px,所以这里也设置也100px。
<div class="sn-simple-logo" ...#FF0;">引用天猫的类,这里正常的全屏模块都是width:1920px或者自己设置的宽度,这样发现会出现滚动条,所以设成100%让模块自适应宽度。除了left:0;top:auto;width:100%,这几个外,其他都可以根据需要自己设置。
<div...>最后这个就是要放的内容,宽度高度自便,我放了自己设计的内容,所以和上图一样。


 

天猫通栏店尾

标签:

原文地址:http://www.cnblogs.com/sujan/p/4340153.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!