标签：
几天前为了给Aaron大神评论，注册了自己的博客园账号，却一直没来得及打理,昨天写代码发现了一些问题，想整理成一篇博客的时候才意识到自己已经很久没有登陆过CSDN了。上次写博客的时候我正在学习JAVAEE，对自己究竟喜欢什么，想要做什么感到一片迷茫。时间稍纵即逝，一晃两个月过去，看着以前的博客才发现自己已经好久没有写JAVA代码了。这两个月之间，从java到前端到php再回到前端，虽然都只是学了一些皮毛，但总算让我找到了自己的所爱，纵然大家都在说前端这样那样的不好，但我还是决定坚定不移地走下去了，于是把博客迁到了园子，这是一个很棒的开始！
好了，这篇博文本意不是谈理想的啦，博客园最吸引我的地方是个人博客的样式可以自己定义，想要成为一名前端的我自然不会错过这个练手的大好机会。点击管理进入后台界面，找到设置，发现有写自定义css的文本框，勾上禁用默认，后返回主页，效果是这样的
一看到这种网页就有一种想布局的冲动有没有！这时把网页的html代码扒到sublime里，简单分析一下结构，在head标签里链一个新建的css文件就可以开工了
命名规范，注释到位，没有什么比看这种代码更爽快的事情了，这里我做了代码折叠，可以看出网页由#home包裹，上中下布局，展开的代码过于繁琐，我就不一一截图了，大致为：
#header（头部）分为#blogTitle（博客名称）和#navigator（导航）
#main（中部）分为#mainContent（内容区）和#sideBar（侧边栏）
#footer（页脚）为版权声明部分
先上一张我重新定义样式以后的效果图（时值期末时间紧张，加上我的博客刚开通也没人看，就图个自己乐呵，这里没上bootstrap，也没有考虑移动端的显示效果，刚拿手机试了一下，还是有点惨......好吧 重在思路）：
为了保证后台数据的正常传输，以上html代码博客园是不允许我们更改的，这在写css代码的时候会带来一些不便，下面列举几个我在编码过程中遇到的问题：
一、原html代码里，博客名称在导航的上面，如果我想让导航在名称上面显示，如果可以更改html，只需调整这两部分代码的顺序再稍加修饰即可，但是html不能修改，这是我以前没有遇到过的，好在利用一些定位的知识可以解决，方法是，为他们公共的父盒子#header设置相对定位，再对#blogTitle和#navigator分别绝对定位
二、以前做页面都是使用本地的图片，然后整个文件夹传到个人网站上，这次自己准备的图片怎么引用呢？这个问题其实很容易解决，因为css里的url是可以引来自网络的链接的，为了防止外链失效，这里我选择的是将选好的图片上传到自己博客园的相册里，进入相册找到上传的图片，查看图片链接即可得到url。
三、还是图片，这次要说图片大小，首先，我们自己挑选的图片往往都比较大（数百K甚至上M），增加流量又降低速度，实在不是个明智的选择，但使用其他图片又难遂心愿，这时我们就需要将挑好的图片进行压缩，百度一下图片压缩会有很多结果，而且是在线压缩，不用下载什么软件，这里我用的是图好快 http://www.tuhaokuai.com/ （现搜的，不存在广告问题）我的两张图都压到了50k（选择压缩30%）左右才放上去的，其次，上面我使用的雪橇犬背景是不随滚动条滚动的，看上去挺神奇，其实是使用了一个这样的属性 background attachment:fixed ，说到background，来博客园的初衷就是要发一篇关于background-size的，写完这篇再整理那篇吧。
四、内容区蒙版的设计，也是我觉得最有意思的一点。一般我们在设置蒙版的时候都会在需要设置的容器里添加一个div.mask，设置背景色，透明度什么什么的，但是这次不一样，html代码不能改动，那怎么办呢？好在css有提供了before、after选择器，在我的页面里具体的使用是这样的
#main{
position: relative;
min-height: 1200px;
/*border: 2px solid red;*/
/*background: url("banner.jpg") no-repeat;*/
background: url("http://images.cnblogs.com/cnblogs_com/iny7/775666/o_banner.jpg") no-repeat;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
z-index: 0;
}
#main:after{
position: absolute;
content: ‘‘;
top: 0;
width: 100%;
height: 100%;
background-color: #ccc;
opacity: 0.9;
z-index: -1;
/*IE*/
filter:alpha(opacity=0.9);
}
为需要添加蒙版的#main层设置相对定位，并添加一个after伪类，并设置绝对定位，宽高100%，背景颜色透明度等。最关键的是两个z-index。为什么会这样写呢？下面就来细说这个问题：
首先来看未设置蒙版的#main层(为了使得长博客能正常显示，即右半边自适应，对#main里面的左右两个区域我采用了左绝对，右浮动的两列布局）
为了方便讲解，这里将边框临时换成了红色，很容易看出我们的内容的显示已经严重收到了狗头的影响，但我实在好喜欢这张图片，怎么办呢？就是加蒙版！使用刚才提出的方法，不设置两个z-index，我们来看看效果：
这......跟说好的不一样呀！虽然遮住了狗头，但是把文字也盖住了，好像帝都的天空一样伸手不见五指，不是我想要的，为什么会这样呢？来用chrome审查一下元素
原来，这个after选择器是在“使用该选择器的元素”的内容后追加，而不是<div id="main">这一行的后面追加的，目前这种情况下，因为浏览器根据html的顺序进行渲染，后渲染的蒙版自然会遮住先渲染的内容。既然这样，使用before选择器把蒙版加到#main层内容的最前面不就行了？说干就干，修改为before后效果是这样的
奇怪的现象发生了，左边绝对定位的侧边栏如愿显示，但是右边浮动定位的内容区仍然在雾霾的笼罩下，也就是说：绝对定位的蒙版层没有被后来的浮动定位的内容层覆盖，为了证明这个猜想，将内容区的定位方式由右浮动先后改为绝对定位和相对定位，结果如下:
绝对定位：
可以看到改为绝对定位后，html代码里比蒙版层靠后的#mainContent如愿显示出来，又因为#sideBar更靠后，所以#sideBar的边框是压在#mainContent之上的（经过试验，调换他们的html代码顺序会使得红色在蓝色之上，这里不再截图说明）
相对定位：
和上面的情况是一样的，html中靠后的div会在更上层显示
除此之外，我还做了几次试验，总结出来就是：不考虑z-index的情况下，已经设置相对定位的父盒子内，绝对定位和相对定位的子盒子会显示在浮动定位和标准文档流中的盒子之上，而绝对定位和相对定位的盒子之间的显示顺序由他们html文档中出现的顺序决定，越晚出现的盒子显示越靠上显示，这个试验的过程中也加深了我对之前学习css定位时没能完全理解的一些理论的理解，比如：绝对定位脱离了标准文档流，相对定位和浮动是仍在文档流内（会对其他元素产生影响）
有了理论的支持，再回到刚才显示的问题上：要想让浮动定位的内容区显示在相对定位蒙版层之上，只需要在浮动的基础上为它添加相对定位即可，效果如下
但是这个方法添加了额外的定位方式，增加了代码量，如果在项目中我们想要再增加一个甚至多个浮动的元素，难道要为每一个都设置相对定位吗？这个问题既然来自蒙版层，那有没有办法通过修改蒙版层代码来一劳永逸地使得所有其他盒子正常显示呢？答案是有的，方法就来自刚才那句“不考虑z-index的情况下”，首先将代码还原为左绝对右浮动，显示效果为：
我们知道，z-index只能在设置了（relative absolute fixed）定位的元素上使用，对只浮动的mainContent是不起作用的，所以这次要从蒙版的z-index下手
第一步、为父元素#main的z-index赋值，这里我给了0，这一步的目的是使得他的子元素的z-index无论设置为多少都将在该父元素中显示（z-index的原理参考资料有很多，这里不再赘述）
第二步、将蒙版层的z-index设置为-1（在不改动其他元素z-index的情况下，这个值已经足够小以至于所有子元素都在他之上了）
来看最终的效果图：
因为蒙版层被“压”到了下面，所以未进行三种定位的元素也可以显示在它之上了!
对这个样式有兴趣的同学可以到我的Github下载，想要自己写样式的同学也可以从之前的版本中拿到最初的布局修饰或者在下面留言找我拿代码，可以的话
https://github.com/iny7/Front-end/tree/master/cnblog
如果对你有用的话，请给我点个星哟^_^
标签：
原文地址：http://www.cnblogs.com/iny7/p/5111566.html
