淘宝全屏海报代码(天猫店铺装修全屏代码)
淘宝全屏海报代码
关于宽屏的代码定位问题,首先咱们要脱离文档流的束缚,最主要的便是Position特点,懂一点网页技术的人都知道这是设置元素定位的,关于这个特点详细的介绍,您能够看看我的另一篇文章:CSS中HTML元素定位Position参数可选值详解,其次运用负边距来移动元素的相对父级元素的位置,关于这段话你或许不太理解,没关系你能够看看这篇文档:运用CSS处理网页布局居中问题。
footer-more-trigger
淘宝里边有一个footer-more-trigger的类,这个类设置的相对定位的特点,咱们能够运用这个类达到咱们想要的效果。
.footer-more-trigger{
position:absolute;
padding:6px11px4px14px;
width:37px;
line-height:1.3;
border:1pxsolid#fff;
left:-12px;
top:-5px;
}
解说其间意义
position:absolute,便是绝对定位,脱离文档流,说的浅显点,便是脱离淘宝的950界限,想要实现全屏,那咱们就要用到这个特点。
padding,内边距,咱们不需求,所以要把它去掉,设置padding:0即可;
width,宽度,这个咱们也不需求,不用理它就能够,设置为width:0px也能够;
line-height,行高,全屏海报不需求这个,也不理它;
border,边框,这个有必要设置为border:none,也便是把边框设为无,要不左右上下将会各占1个象素;
left,左偏移,模板设置的是-12px,这个当然不是咱们需求的数值;
top,上偏移,模板设置的是-5px,留意,这儿咱们有必要设置为top:auto,也便是主动,千万不要设置为top:0px。
事实上,咱们只需求用到这个class里的position:absolute绝对定位特点,其它的是咱们不需求的,或许会有朋友说了,那咱们自己写一个绝对定位不就行了,干嘛非要调用这个class?如果咱们自界说能用这个特点,那我就不用搞的这么杂乱了,淘宝在保存代码的时候,会主动过滤掉关于定位的代码。
学过HTML、XHTML的,应该都知道CSS的加载次序为:行内款式-内部款式-外部款式,其间行内款式优先级最高,所以咱们在代码中参加style=”top:auto;border:none;padding:0;”将会被加载,而不会再去加载模板自带的CSS款式。
PS:其实不必非得要用footer-more-trigger这个类,任何拥有Position定位的且不会被淘宝主动过滤掉的类,咱们都能够运用。
1920px全屏海报代码
宽度1920px,高度随意自己调,同时修改两处500px即可。
依据上面的代码,或许你也看出来了,A标签界说了一个1920px的宽度和A标签父元素的左边负距离,这个值刚好的两倍的关系,依据上面的代码,咱们也能得出下面的代码。
1680px全屏海报代码
宽度1680px,高度随意自己调,同时修改两处500px即可。
1440px全屏海报代码
宽度1440px,高度随意自己调,同时修改两处500px即可。
天猫店铺装修全屏代码
宽度1920px,高度随便自己调,同时修改两处500px即可。
<divstyle="height:500px;">
<divclass="sn-simple-logo"style="padding:0px;left:50%;top:auto;">
<divclass="sn-simple-logo"style="padding:0px;left:-960px;top:auto;">
<ahref="#"style="width:1920px;height:500px;display:block;"target="_blank">
<imgalt="全屏海报"border="0"src="#"/>
</a>
</div>
</div>
</div>
通过查看天猫的CSS文件,我们可以搜索到一下代码:
.sn-simple-logo{
_width:auto!important
}
#content.sn-simple-logo{
position:absolute
}
同样有一个position:absolute属性,我们就可以使用这个类给我们添加全屏的效果。
优秀作品:
最新作品:
评论列表(共310人参与)参与讨论或分享设计作品获得视觉癖积分奖励
008 《注册会员
2021-05-09 13:59:13
用情况会有所不同,圆形浴缸的实际半径有:80cm、75cm、70cm和60cm。一般来说,70cm在普通家庭中较为常见,但由于圆形浴缸的尺寸比较大且独具特色,并不是所有家庭都适应的越来越多的小家庭喜欢这样的布局。 2、床头柜的装饰作用在卧室里除了
回复候生活需注册会员
2021-05-09 23:38:0
箱 集装箱的游客
2021-05-09 0:58:59
游客64120:淘宝全屏海报> 质量如此通明! 好玻璃,来自于(填写品牌称号)玻璃! 玻璃通明,你我真诚。 并具初始强度后,要开端勾缝,预备好所需的填缝剂,用抹灰刀将勾缝剂灌入马赛克缝隙里,留意每次刮浆面积不超过2平方米。填缝剂均匀涂于马赛克外表,保证一切的灰缝可以彻
回复店装修你注册会员
2021-05-09 6:55:14
ore-trigger 淘宝里边有一个footer-more-tr量为截面数的3倍;95、120mm导线载流量是其截面积数的2.5倍,顺次类推。 条件有变加折算,高
回复