CSS实现可爱的提醒页面效果
效果如下
于是乎就写了起来，当然还是写了好久，不禁吐槽布局什么的看来又是白学了。
刚开始的时候使用flex，因为图片需要水平垂直居中，所以优先想到了昨天看的很方便的flex布局模式。
这里看到了flex布局，当时就觉得，代码好短好方便，然后就用了（可见flex版）。
在flex里，只需要margin: auto一行代码就能实现各方位的居中效果了。
然后?宓氖牵?⒏?⌒轮?笏??E11都不行……我当时以为只有上古浏览器不行，看来这句话是真的：
新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。
↑明明在我的火狐里也可以这个玩样儿到底是什么时候写的啊。
后来还尝试了能不能写一个响应式，写着写着突然发现，图片变小了是没错，但小到最后就没法看了啊喂……而且由于是斜的，定位也不方便，所以后来还是采取了固定的方式，但还是有个地方值得mark：
background: url(/cdn.jpg) no-repeat;
background-position: center;
background-size:contain;
background-size:contain;可以让背景变成自适应的（也就是图片缩放啦）。
当然最后还是选择了absolute（请看昨天的上一篇文章吧），完全固定的方式，略显粗糙的定位了一下，但总体而言已经是效果中最让人满意的了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hokster CDN</title>
<style type="text/css">
html, body {
margin: 0 auto;
padding: 0;
height: 100%;
width: 100%;
}
html, body, div, img, p {
box-sizing: border-box;
}
.container {
margin: 0 auto;
height: 100%;
}
.container > img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
box-sizing:unset;
}
.container > .content {
bottom: 0;
box-sizing: unset;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
height: 575px;
width: 1115px;
}
.vertical {
position: relative;
margin: 0 auto;
text-align: center;
height: 340px;
width: 780px;
box-sizing:unset;
padding-right: 100px;
padding-top: 250px;
vertical-align: center;
font-family: "Microsoft Yahei";
}
</style>
</head>
<body>
<div class="container">
<img src="/cdn.jpg">
<div class="content">
<div class="vertical">
<p>CDN无法完成本次请求的说！以下是详细原因：</p>
<p>当前CDN节点根据您请求的域名找不到主机ID！</p>
<p>如果刚绑定域名，请等待5分钟后查看，持续出现本提示请与Hostker联系</p>
</div>
</div>
</div>
</body>
</html>
由此，布局真是让人吐血的东西，接下来，今天还会更新一些关于布局的文章。
您可能感兴趣的文章：
CSS实现可爱的提醒页面效果
彻底弄懂CSS盒子模式(DIV布局快速入门)
用CSS跨浏览器管理网页中图片的透明度
div css对网站优化及在seo方面的好处
JS定时关闭窗口及定时提醒效果的例子
超级兔子让浮动层消失的前因后果
消息通知提醒插件 Pines Notify
页面消息提醒插件 Sticky
Photoshop鼠标绘制可爱的大白教程
jQuery的效果集工具包 Glimmer