350装修平台已服务318多万家 淘宝店装修,拥有25万多个 350代理, 今日已售488 套模板 客户端下载 350教程论坛 350后台登陆 咨询邮箱 咨询邮箱:350@seo-lv.com 350模板官方微博 350模板微信
淘宝首屏装修代码分享与解析
发表日期:2022-06-28 09:17   文章编辑:350模板官网小编    浏览次数:
 

<*div style="height:图片高度">
 
<*div class="footer-more-trigger" style="padding:0; top:auto;left:50%">
 
<*div class="footer-more-trigger" style="padding:0;top:auto; left:-960px">
你的大图(内容区域)
 
</div>
 
</div></div>
天猫版
 
<*div style="height:图片高度"><*div class="sn-simple-logo" style="padding:0; top:auto;left:50%"><*div class="sn-simple-logo" style="padding:0; top:auto;left:-960px">你的大图(内容区域)</div></div></div>
首先提醒一下新手,在书写代码的时候,每个代码都是有开头和结尾的,比如我们看到上面的代码,开头都是<div>结尾则是</div>,也就是说,每一段代码的格式首先都是<div></div>这样的形式存在的。
 
<div style="height:图片高度px">
 
这里style是作为一个CSS样式输出的一个写法,标准的写法是style="CSS样式",height这个代码代表的是高度,单位px;
 
另外这里我要和大家说一下,宽度的码是width,这里没有写,是表示宽度随着你图片的大小而改变,如果你里面不是一张图片,而是一个块的内容区,最好就把宽度也写上去。
 
*如果我们发现整个大屏和下边有10个左右的像素间隙,我们可以把高度减去这个间隔的高度,可以去除这个间隙
 
例:
 
<divstyle="height:460px;">出现10个下边像素的间隙的话,我们就把高度定义为:<divstyle="height:450px">
 
<*div class="footer-more-trigger" style="padding:0;top:auto; left:50%"><*div class="footer-more-trigger" style="padding:0;top:auto; left:-960px">
这段代码的意思是,这是一个淘宝C店的大屏代码,他的样式是居中对齐。其实我们再来看一下天猫版的代码有什么区别:
 
<*div class="sn-simple-logo" style="padding:0; top:auto;left:50%"><*div class="sn-simple-logo" style="padding:0; top:auto;left:-960px">
可以发现,其实居中的代码都是一样的,也就是说样式都是一样的,不一样的只是大屏的一个名称的定义,也就是说,区别天猫和集市的一个定义方法,其实天猫和C店的代码区别就在这里。
 
div class="footer-more-trigger"这是一个固定的淘宝大屏的一个样式,总之要记住,这就是一个代表能超出950内容区(天猫是990宽,区分一下)的一个样式就可以了。
理解了上面的内容,我们就很容易能把天猫店的代码也理解清楚:
 
*div class="sn-simple-logo"
这就是代表了天猫店可以超出990内容区的一个代码。
 
通过上面的理解,我们可以延伸出很多不同效果的代码,这个大家回去的时候可以研究一下。
 
style="padding:0; top:auto; left:50%"style="padding:0; top:auto; left:-960px"
这两个style里面输出的样式这里讲一下:
 
padding:0 去除内容到最外层的间距,可以理解为去除了内容到height之间的一个间隙吧,我是这么理解的;
 
top:auto 这个是调整整个内容到上边的距离,有些时候,我们会发现我们在后台关闭了导航下的10个像素还是会有一个间隔,那么这个时候我们可以把这个top改为top:-10px,以去除那10个间隙。
 
left:50% 这个是调整到左边的距离是自适应宽度的50%,left:-960px这个是淘宝1920宽度的一半,这个值我们也可以自己定义,如果不居中,我们可以自己定义到居中。
 

店铺模板

350店铺模板

查看模板 注册领取

手机模板

350手机模板

查看模板 注册领取

详情模板

350详情模板

查看模板 注册领取

免费领取

海报模板

350海报模板

在线设计

购买/价格

工具

350更多工具

350主图视频 更多工具
标签:    
如没特殊注明,文章均为350模板官网原创,转载请注明来自http://www.seo-lv.com//zxzs/426.html
相关文章推荐