CSS 做个提醒页面 - 从山寨hostker提醒页面说起

昨天看完布局，hostker正好有个页面需要用布局，心想：嘿，练手的机会到了。

于是乎就写了起来，当然还是写了好久，不禁吐槽布局什么的看来又是白学了。

刚开始的时候使用flex，因为图片需要水平垂直居中，所以优先想到了昨天看的很方便的flex布局模式。

昨天在：http://zh.learnlayout.com/flexbox.html

这里看到了flex布局，当时就觉得，代码好短好方便，然后就用了（可见flex版）。

在flex里，只需要margin: auto一行代码就能实现各方位的居中效果了。

然后囧的是，发给小新之后他说IE11都不行……我当时以为只有上古浏览器不行，看来这句话是真的：

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。

↑明明在我的火狐里也可以这个玩样儿到底是什么时候写的啊。

后来还尝试了能不能写一个响应式，写着写着突然发现，图片变小了是没错，但小到最后就没法看了啊喂……而且由于是斜的，定位也不方便，所以后来还是采取了固定的方式，但还是有个地方值得mark：

background: url(http://info.smartgslb.com/cdn.jpg) no-repeat;
background-position: center;
background-size:contain;

background-size:contain;可以让背景变成自适应的（也就是图片缩放啦）。

当然最后还是选择了absolute（请看昨天的上一篇文章吧），完全固定的方式，略显粗糙的定位了一下，但总体而言已经是效果中最让人满意的了：http://test.codesky.me/position-hostker.html

由此，布局真是让人吐血的东西，接下来，今天还会更新一些关于布局的文章。