原图
我做的
这里主要讲讲position:absolute;和position:relative;
①这里先看两个标签<header />,<nav />,他们是html5标签,<header> 标签定义文档的页眉(介绍信息),<nav> 标签定义导航链接的部分。我觉得html5也没什么,就是标签更语义化了?我不懂,乱说的,呵呵。
②126logo和右边的“你的专业单子邮箱”都是用图片代替文字,右边的使用background-image实现的,还有右边的
文字是用visibility: hidden;异曲同工吧!
③一些小细节,<a>标签的title属性可以让你鼠标在图片上时显示文字,<img>的alt属性是在图片没出来时显示的
文字。免费邮那几个之间距离是用margin-left,值得一提的是以前在创新工场导航中用到<li>,为了达到文字在同
行的效果,就是用了display: inline-block;(关于它的作用我之前提到过,不在赘述),但是为什么在126中没用
呢!,因为创新工场的导航是面还有图片,必须是设置高宽,以容纳上面的图片,而在126中只是普通的行内元素就
可以解决!所以在能少用代码的时候就少用!
④之前做的导航都用到了position,因为这个网页导航简单,所以主要说这个了!
设置了position: relative/absolute 都可以改变元素在文档中方的位置,可激活left,top,right,bottom和z-index属性(默认情况下,这些属性未激活,设置也无效)
先来说些理论,一般我们的文字都在文档流中,也就是(z-index: 0),设置position让会让文档浮动起来!,也就是z-index>0,他就会改变正常的文档流!
先来说说position:relative;
它用保留在自己在z-index:0层的占位,left,top,right,bottom值都是相对于自己在z-index:0层的位置。虽然
它的实际位置会因设置了left等而偏离原来在文档流中的位置,但对其他仍然在z-index:0层元素不会造成影响!
而absolute完全脱离了文档流,不再在index-z:0层保留占位符,其left,top等值是相对自己最近的一个设置了position:relative或absolute的祖先元素,若祖先元素都未设置,那就相对于body。
float与以上不同的是,它不会让元素上浮到另一个z-index层,它仍然让元素在z-index: 0层排列。float不能通过left等属性来准确控制元素坐标,只可left,right,它影响周围元素!
position:absolute和float会隐式改变display类型,不论之前什么类型元素(display:none除外),只要设置position: absolute,float:left/right中任意一个,都会让元素以display: inline-block的方式显示,可设置长宽,默认不占满父元素。就算我们显示地设置display:inline/bock,也仍然无效(float在IE6下的双边距bug利用添加display: include解决),但position: relative却不会隐式改变display类型!
可能大家看的有点摸不着头脑了,做些实验吧!
不知道在怎么试验,两个框框,一个大一个小,一个设置absolute,一个relative。自己慢慢摸索吧!(一个包着一个)