不帅 发表于 2015-1-15 23:10:16

来谈谈:CSS{position:fixed}让HTML流动在扫瞄器的某个地位

有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
网页制造Webjx文章简介:跨扫瞄器的CSS流动定位{position:fixed}.
不晓得您是不是寄望了,扫瞄本站时,扫瞄器右下角有一个标着top的玄色直角三角形,能够点击它前往到正在扫瞄的网页页眉。当转动网页时,它的地位一向没有任何改动,您感到它怎样?这就是经由过程CSS的定位属性{position:fixed}来完成的,经由过程它可让HTML元素离开文档流流动在扫瞄器的某个地位。
[*]IE7、Firefox、Opera,都撑持CSS的{position:fixed},以是很简单完成(《详解定位与定位使用》)
[*]IE6不撑持该属性,可是在利用!DOCTYPE声明指定standards-compliant(尺度)形式能够经由过程CSShack完成
[*]上述声明下IE5和IE5.5今朝没有发明经由过程地道CSS可以办理的计划,可是能够经由过程IE独有的expression在CSS中完成(挪动网页时流动元素会动),这和罕见浮动Logo告白使用Javascript完成道理是一样的,只不外能够间接写在CSS中对照烦琐的
[*]使用IE独占的前提正文语句能够针对分歧的IE版本准确设置,同时制止了这些代码被其他扫瞄器读到,团体以为比地道的CSSHack好,假如你安装了多个IE(包含绿色版本),前提正文将会以最高版本的IE为尺度。
完成代码以下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head>......<styletype="text/css">#fixed{position:fixed;top:5em;right:0;......}针对IE7、Opera、Firefox一行弄定</style>IE6中使用容器对溢出内容的处置体例来完成的<!--><styletype="text/css">html{overflow:hidden;}body{height:100%;overflow:auto;}#fixed{position:absolute;right:17px;}fixed元素的相对地位是相对HTML元从来说,转动条是body元素的,这是设置right:17px的缘故原由</style><!--><!--><styletype="text/css">#fixed{position:absolute;top:expression(eval(document.body.scrollTop+50));}</style><!--></head><body><divid="wrapper">......</div><divid="fixed"><h2>{position:fixed}</h2></div></body></html>(单个IE,地道经由过程前提正文辨别IE扫瞄器)
(多个IE,经由过程前提正文+CSShack辨别IE扫瞄器,分明的比地道前提正文庞大且不容易读,放下去次要是便于同个PC具有多个IE扫瞄器伴侣[一样平常应当做是web开辟的]能够间接看到效果,下同。)
也许有人像我一样,在!DOCTYPE声明是XHTML1.0Strict大概是XHTML1.1时,喜好在声明后面加上XMLProlog(如:<?xmlversion="1.0"encoding="utf-8"?>),但此时IE7以下都处于Quirks(兼容)形式,以是上述针对IE6的Hack生效,这个时分你能够对IE6也经由过程expression来完成。
当IE6处于quriks形式时,IE6和IE5.5对CSS剖析体例几近相同,以是当看到《position:fixedforInternetExplorer》时,我找到了在Quirks形式下IE6/IE5.5/IE5一致的CSS办理计划:
<?xmlversion="1.0"encoding="utf-8"?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"lang="zh"><head>......<!--><styletype="text/css">body{overflow:hidden;}#wrapper{height:100%;overflow:auto;}#fixed{position:absolute;right:17px;}</style><!--></head><body><divid="wrapper">......</div><divid="fixed"><h2>{position:fixed}</h2></div></body></html>(单个IE,地道经由过程前提正文辨别IE扫瞄器)
(多个IE,经由过程前提正文+CSShack辨别IE扫瞄器)
对照两个地道的CSShack发明,两个道理仿佛不异,在于html元素和body元素的使用和对CSS的{position:fixed}的撑持水平上,可是这实践上是一种Hack,基础上不具有通用性,晓得这个办法就能够了。必要提示的是IE6standards-compliant形式下HTML元素不论给它设置甚么样的高度和宽度,它的巨细都一直充斥全部扫瞄器的可视地区,而IE5和Quirks形式下html元素和body元素一切宽高设置城市被疏忽而坚持充斥扫瞄器的可视地区,更多内容请看《IE中的html元素》
也许有人会想,如今能够引进了XMLProlog又能用纯CSS办法办理了IE7以下的成绩,这下爽了,可是加上XMLProlog后俄然发明IE6处于Quirks形式,之前在standards-compliant形式下的计划又变形了,呵呵,这就是我们弄IE的了局。
</p>
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。

深爱那片海 发表于 2015-1-17 20:09:33

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

柔情似水 发表于 2015-1-26 22:44:31

可以使用 CSS 检查工具进行设计。

再现理想 发表于 2015-2-5 05:54:02

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。

因胸联盟 发表于 2015-2-11 07:30:32

技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。

谁可相欹 发表于 2015-3-2 00:48:51

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。

冷月葬花魂 发表于 2015-3-11 03:53:52

HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)

精灵巫婆 发表于 2015-3-17 22:08:30

不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。

兰色精灵 发表于 2015-3-25 08:09:22

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
页: [1]
查看完整版本: 来谈谈:CSS{position:fixed}让HTML流动在扫瞄器的某个地位