dreamweaver设置背景颜色,dreamweaver表格背景颜色怎么设置

首页 > 实用技巧 > 作者:YD1662023-06-08 16:29:51

4.当上级框添加绝对或相对定位后,下级框以上级框的位置为基准点

在代码中为外框添加绝对定位,此时的效果。当外框向下和向右偏移50像素后,加上其本身的大小300像素,小框偏移300像素应该与外框相交才对。此时小框在外框右下角,由此可以得知,当上级框添加相对定位后,下级框的绝对定位将以上级框的左上角为基准进行偏移。

dreamweaver设置背景颜色,dreamweaver表格背景颜色怎么设置(17)

也可以试着将大框的绝对定位改为相对定位,此时下级框的绝对定位仍然以上级框的左上角为基准进行偏移。当多个绝对定位的框重叠时需要考虑到一个问题,框的叠加顺序是怎样的?在前面的实例中会发现,后加到代码中的框会叠加在前面的小框上。但是,如果要改变这个叠加顺序有什么好的方法吗?有,可以在框的代码中添加一个样式来改变,即在“CSS设计器”中设置z-index(堆积顺序)的值。设置后数值大的框会叠加在数值小的框上面。

dreamweaver设置背景颜色,dreamweaver表格背景颜色怎么设置(18)

5.使用淘宝样式突破限制

绝对定位是最灵活的布局方法,但是在淘宝装修中使用绝对定位的样式(position:absolute)会被官方屏蔽。为什么很多淘宝店铺中仍然可以进行绝对定位的布局呢?这是因为他们借用了淘宝的样式,将代码修改后实现的。

● footer-more-trigger

在淘宝集市店可以直接调用footer-more-trigger。当我们给一个框添加绝对定位时正常的写法为:

<divstyle="position:absolute; ……"

为了使绝对定位在淘宝店铺中生效,可以写成:<divclass="footer-more-trigger"style="…"

● sn-simple-logo

在天猫店铺需要调用sn-simple-logo,将上面代码中的footer-more-trigger改为sn-simple-logo即可适用于天猫店铺,也可以将两个类名均写上,这样该代码就可以兼容两种店铺。写法如下:

<divclass="footer-more-triggersn-simple-

logo"style="…"

在调用上面的类名后还需要将不用的样式覆盖,以避免影响我们自己的样式,具体的操作如下。

01 在使用绝对定位的框上,删除position:absolute;。

02 为这个框添加调用的淘宝样式class=“footer-more-trigger sn-simple-logo”。

03 在这个框的行内样式中,覆盖那些由于借用淘宝官方样式而被附加上的样式style=“margin:0;padding:0; border:0; left:***px; top:***px; width:***px; height:***px; ”.

04 将style中的***参数根据框的大小和定位修改为具体的值。

在详情页中不可以使用这里调用样式的方法。

突破950像素极限,宽度延展

淘宝集市店铺的模块中最宽的为950像素,所以在做超出官方宽度的全屏海报、通栏分类时就需要购买收费模板,但是这里讲的绝对定位可以突破950像素宽度的限制。

1.如何突破

在淘宝集市专业版旺铺中,主要内容区为嵌套的框,共9个层级,而添加的“自定义内容”代码会放置在1这个层级中,如图7-121所示。在“自定义内容”外面嵌套了9个框。要想让“自定义内容”突破950像素取决于1~9这9个框的样式,如果框1~9中有一个框有相对或绝对定位,且设置了超出隐藏的样式,那么这个框就达到了最宽,其以下的所有框将以该框为基准来定位,也就是说其下级框都不可能超出950像素的宽度。

dreamweaver设置背景颜色,dreamweaver表格背景颜色怎么设置(19)

在框1~9中,框7具有相对定位的样式,并设置了框为100%和超出隐藏的样式。也就是浏览器有多大,框就有多宽。所以“自定义内容区”模块中的代码使用绝对定位的时候,是以框7为基准进行定位的。由于框7的宽度为100%屏幕宽,所以可以实现突破950像素宽度的要求。

淘宝专业版旺铺的不同官方模板中,首页的结构都可以突破950像素宽度,但自定义页面中框2就具有相对定位的样式,并设置了超出隐藏,且宽度为950像素,所以自定义内容无法突破950像素宽。

2.突破950像素实现全屏海报

知道了突破950像素的原理后就可以实现自定义海报的全屏效果了。为了方便实时查看,本实例的代码在淘宝装修后台的“自定义内容区”模块中编写。

01 准备一张制作好的海报图,宽度为1920px,将图片上传到图片空间。

dreamweaver设置背景颜色,dreamweaver表格背景颜色怎么设置(20)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.