仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1056|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS层的使用及其定位(相对定位和绝对定位)

[复制链接]
兰色精灵 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:18:54 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
层的随便定位的特征给网页计划者带来的很年夜的便利,但同时也带来了必定的贫苦。为何如许说呢?

  人人都晓得,为了让网页可以主动地顺应用户设置的分辩率,在网页制造过程当中人们接纳了百分比的设置体例,从而页面的一切元素重新排版,包管本来的格局。但假如你在页面上利用了层,你会发明当扫瞄器巨细改动时,层的地位却没有改动,了局它和其他的元素之间的共同呈现了错位征象,页面变得乱七八糟了。而我们是不克不及够强迫用户利用特定的分辩率的,那末就只要想举措让层的地位也可以象表格一样依据扫瞄器巨细的改动而从头定位,这就必要公道地利用绝对定位和相对定位了。

  相对定位(position:absolute):即层默许的定位体例,相对于扫瞄器左上角的边沿入手下手盘算定位数值。
  绝对定位(position:relative):层的地位相对某个元素设置,该元素地位改动,则层的地位响应改动。

  对照两种定位体例,不难发明,利用绝对定位的层才是真正完成计划者头脑的体例,从而完整把握层的排版。

  那末,相对定位有无用呢?固然有效了,当你的网页全体利用层来排版,并且页面是利用默许的居左安排的,那末利用默许的相对定位体例能够便利的排版,进步计划的事情效力。

  在Dreamweaver中,拔出的层固然都是利用的相对(absolute)定位体例,可是拔出的体例分歧,带来的效果是分歧的。后面我们已晓得,利用菜单拔出的层是没有定位的坐标的,只要当你利用鼠标拖动该层改动其地位后,才会写入座标值。而拖沓出来的层的初始地位坐标就是鼠标入手下手举措时的坐标。

  请明白一个观点:由Dreanweaver付与坐标值的层是相对于扫瞄器边沿定位的层。不带坐标值的层则是相对某元素定位的层!

  以是,最复杂的设置绝对定位层的的体例就是:选定拔出层的地位(比方某个单位格大概页面中某处)将光标停止在该地位,然后选择Insert-->Layer,便可在该地位创立一个流动巨细的层,这个层就是相对该地位定位的了。必要注重,接纳这类体例创立的层,你只可使用鼠标调剂它的巨细,相对不成以挪动它的地位!也就是说,在属性面板上,层的地位栏中(LeftTop)相对不成以无数值。

  良多情形下,拔出的层的地位其实不必定正确,出格是Dreamweaver并不是真实的所见即所得的软件,网页的排版只要到扫瞄器中显现才能够真正看到排版的体现,以是下面所说的办法就显的过于复杂而简单出成绩了。这个时分,你必要给层一个定位的参照物,让它真正地做到绝对的定位。


  复杂的参照物能够是一个父层,即先拔出一个绝对定位的空缺的层,在此层中拔出你真正必要的层,而这个层是能够随便拖沓改动地位的。但如许究竟在网页中多拔出了一个空缺的层,我想它必定不是专业的网页计划师所但愿的。上面我们先容利用CSS来完成真实的绝对定位的层。





  我们必要先设置一个CSSClass,来界说定位的体例为绝对:
  .ceng{position:relative;}
  然后,付与你所必要的参照物(能够是table,tr,td...)一个CSS属性为这个类。如许扫瞄器就会以它的左上角为原点,创建新的坐标系。再在这个参照物的上级拔出层,则层相对于该参照物定位,假如你必要改动层的地位,你能够间接在层的属性面板上输出LeftTop的数值(不成以利用鼠标拖沓),牢记此数值的坐标原点是你所指定的参照物,而不是扫瞄器的边沿(在Dreamweaver中编纂时,该层看起来象是相对于页面边沿定位的,但在扫瞄器中,它是相对于你所指定的参照物的)。





  良多伴侣利用层是为了比及静态的效果,比方利用工夫线让某个物体活动起来,增添网页的动感,那末绝对定位后的层还能够活动吗?回覆固然是一定的。因为界说工具的两个地位必要拖动该工具改动地位,以是利用复杂的层定位的办法是不可的,但假如你利用CSS来设置绝对定位的效果的话,那末就完整能够完成了。只是必要注重,界说活动的初始地位和停止地位时,你仍旧不成以利用鼠标拖沓,而只能自行输出Left和Top的数值。

  原本层的利用并非很庞大的,但我却把它独自作为一个章节,缘故原由就是层的定位有必定难度,但愿伴侣们看过以上的先容后,在Dreamweaver中多实行几回,不然仍是简单呈现成绩的。

  OK!关于层的利用就说这么多。

一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
再现理想 该用户已被删除
沙发
发表于 2015-1-18 06:03:42 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
冷月葬花魂 该用户已被删除
板凳
发表于 2015-1-25 23:17:55 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
小妖女 该用户已被删除
地板
发表于 2015-2-4 13:38:53 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
再见西城 该用户已被删除
5#
发表于 2015-2-10 00:50:53 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
6#
发表于 2015-2-28 13:39:12 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
飘飘悠悠 该用户已被删除
7#
发表于 2015-3-9 23:58:23 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
精灵巫婆 该用户已被删除
8#
发表于 2015-3-17 03:28:14 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
金色的骷髅 该用户已被删除
9#
发表于 2015-3-23 18:29:36 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 23:34

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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