来看看:跨扫瞄器的CSS流动定位
现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。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中使用容器对溢出内容的处置体例来完成的*/
<!C>
<styletype="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/*fixed元素的相对地位是相对HTML元从来说,转动条是body元素的,这是设置right:17px的缘故原由*/
</style>
<!C>
<!C>
<styletype="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop+50));}
</style>
<!C>
</head>
<body>
<divid="wrapper">
……
</div>
<divid="fixed"><h2>{position:fixed}</h2></div>
</body>
</html
代码演示1(单个IE,地道经由过程前提正文辨别IE扫瞄器)
代码演示2(多个IE,经由过程前提正文+CSShack辨别IE扫瞄器,分明的比地道前提正文庞大且不容易读,放下去次要是便于同个PC具有多个IE扫瞄器伴侣[一样平常应当做是web开辟的]能够间接看到效果,下同。)
也许有人像我一样,在!DOCTYPE声明是XHTML1.0Strict大概是XHTML1.1时,喜好在声明后面加上XMLProlog(如:<?xmlversion="1.0"encoding="utf-8"?>),但此时IE7以下都处于quriks(兼容)形式,以是上述针对IE6的Hack生效,这个时分你能够对IE6也经由过程expression来完成。
当IE6处于quriks形式时,IE6和IE5.5对CSS剖析体例几近相同,以是当看到《position:fixedforInternetExplorer》时,我找到了在quriks形式下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>
……
<!C>
<styletype="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<!C>
</head>
<body>
<divid="wrapper">
……
</div>
<divid="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
代码演示3(单个IE,地道经由过程前提正文辨别IE扫瞄器)
代码演示4(多个IE,经由过程前提正文+CSShack辨别IE扫瞄器)
对照两个地道的CSShack发明,两个道理仿佛不异,在于html元素和body元素的使用和对CSS的{position:fixed}的撑持水平上,可是这实践上是一种Hack,基础上不具有通用性,晓得这个办法就能够了。必要提示的是IE6standards-compliant形式下HTML元素不论给它设置甚么样的高度和宽度,它的巨细都一直充斥全部扫瞄器的可视地区,而IE5和Quirks形式下html元素和body元素一切宽高设置城市被疏忽而坚持充斥扫瞄器的可视地区,更多内容请看《IE中的html元素》
也许有人会想,如今能够引进了XMLProlog又能用纯CSS办法办理了IE7以下的成绩,这下爽了,可是加上XMLProlog后俄然发明IE6处于Quriks形式,之前在standards-compliant形式下的计划又变形了,呵呵,这就是我们弄IE的了局
</p>
这工具比表格好的唯一就是你可以定义一个ID,想怎么玩它就怎么玩他,表格用来处理显示数据,DIV+css+TABLE就行了,都什么年代了,以前没有DIV,而且386的年代不也一样,现在都奔腾4了 使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。 Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 可以使用 CSS 检查工具进行设计。 由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。 直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
页:
[1]