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>
由此，布局真是让人吐血的东西，接下来，今天还会更新一些关于布局的文章。
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看...2016-09-14
- 有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下把普通照片快速转换成卡通效果的教程，各位想知道具体制作步骤的使用者们，那么下面就快阿里跟着小编一起看一...2016-09-14
PHP传值到不同页面的三种常见方式及php和html之间传值问题
在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24- 直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
- 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30
jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说调出时尚个性青色人像照片效果的调色教程，各位想知道到底该怎么调色的，那么下面就快来跟着小编一起看一看...2016-09-14
- 翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21
SQLMAP结合Meterpreter实现注入渗透返回shell
sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25- 这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
- ps软件是现在很多人比较喜欢的，有着非常不错的使用效果，这次文章就给大家介绍下ps怎么制作图片阴影效果，还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06
- 对于乱码这个问题php开发者几乎都会有碰到过，我们下面主要是介绍了php文件乱码和页面乱码。PHP页面转UTF-8编码问题 1.在代码开始出加入一行： header("Content-Type: text/html;charset=utf-8"); 2.PHP文件编码问题...2015-10-21
- ps软件是现在很多人比较喜欢使用的，有着非常不错的功能。这次文章就给大家介绍下ps立体倒影效果制作方法，还不知道怎么制作的赶紧来看看。 最终效果  1...2017-07-06
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16