仓酷云

标题: 来谈谈：CSS制造网页：position:relative [打印本页]

作者: 精灵巫婆 时间: 2015-1-15 23:11
标题: 来谈谈：CSS制造网页：position:relative
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
破洛洛文章简介：css心得之善用position:relative。

多是团体习气吧，我团体在写css款式的时分position:relative都很罕用。不到必不得以不必，由于这器材在面临IE年夜叔的时分老是会各类被推到，好比多个positon嵌套的的时分会发生相似z-index优先级的掉控，不晓得其他coder们碰着过这个成绩没？归正我是碰着不下1次了。
举个栗子以下：html代码节略写法，你懂的

ul.ppli年夜宝span年夜宝的屁屁li二宝span二宝的屁屁li三宝span三宝的屁屁

复制代码

从下面的代码原本没啥成绩，成绩在于给他穿上衣服(css)以后，由于一些需求，你讲li的cssposition:relative了，
那末li就傻逼了，这个时分你怎样设置li的z-index为多年夜都盖不外以后下一个li的内容。
不睬解下面表达的意义能够见下图。

css代码

.pp{width:300px;margin:50pxauto;background:#fff;height:300px;padding:10px;}.ppli{border:1pxsolid#ccc;margin-bottom:10px;height:30px;position:relative;background:#fff;z-index:9;}.ppspan{display:block;width:40px;height:40px;background:#f09;position:absolute;right:10px;bottom:-20px;z-index:10;}

复制代码

如图，右边是chrome下的效果，右边是IE6的效果，可见，当给li设置positon:relative后不管内里的元素设置z-index为多年夜，都改不外以后的li内容。(爷的我又把下面的字从头打了一遍==)
办理计划

从视觉下面了解，如许的情形就像AI(Illustrator)里的图层一样，一层比一层高，也像个沙箱，外部的z-index是怎样也不克不及超出下一层的z-index。
最好不要给列表型的li大概div增加position:relative，一向以来针对IE如许头疼的bug，都是以避开如许的情形来办理。(实在应当不算bug，应当是扫瞄器开辟者了解性上的分歧)。
固然另有一种举措，因为是由于下一个li设置了position挡住了前一个position的li，那末只需制止position挡住position就能够委曲完成如许的情形。以是你只必要在position:absolute的dom表面套一层div，做到不挡住前一个li中的position:absolute就能够。
别的一种办法是在特定的情形下如hover事务，如触发式弹出浮窗(显现更多信息)，
这个时分我是如许来完成，当hover的时分给li增加一个class“hover”，然后只需界说hover的时分是position:relative就能够了，如许的优点是hover的时分其他li没有position:relative，那末就没有之前的bug了。
关于初级扫瞄器能够间接写:hover乃至都能够离开js效力会更高
position:relative在:hover上的妙用

先看下图，左边如许的按钮不晓得应当会在一些效果里打仗过吧？相似向左向右的按钮，

细心察看发明按钮两头的线是共享的，可是按下往的时分色彩会变深。
完成举措良多，我通常为对个中一个按钮利用负边距，然后在:hover效果上下手脚(因为IE6只撑持a上的hover，以是一样平常都是利用a)，实在很复杂就是在hover的时分，给它设置position:relative，然后将z-index设置一个数字便可完成。
以此类推，上图中apple的导航也能够利用如许的举措来完成效果。是否是挺带感^__^
</p>
符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

作者: 若相依 时间: 2015-1-17 20:10
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 飘灵儿 时间: 2015-1-24 14:34
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 再现理想 时间: 2015-2-1 17:24
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 精灵巫婆 时间: 2015-2-7 13:54
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 老尸 时间: 2015-2-22 18:36
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 金色的骷髅 时间: 2015-3-7 04:02
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 活着的死人 时间: 2015-3-14 12:17
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 爱飞 时间: 2015-3-21 08:56
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

欢迎光临仓酷云 (http://ckuyun.com/)