html css制作404页面,CSS3绘制404页面

html css制作404页面,CSS3绘制404页面标题有点噱了…最近在做一个交通有关的项目,想做一个类似标志牌的404,所以就有了这个.只用的CSS3中的旋转,效果如下上代码:Error.circle{width:200px;height:200px;border-radius:200px;border:15pxsolid#B22727;}.circle>div{color:#B22727;font:bol…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

标题有点噱了…

最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个.

只用的CSS3中的旋转, 效果如下

dbdfea3befa35a77c3137366b220f186.png

上代码:

Error

.circle {

width: 200px;

height: 200px;

border-radius: 200px;

border: 15px solid #B22727;

}

.circle > div {

color: #B22727;

font: bolder 50px arial;

transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

-ms-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

-moz-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

-o-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);

position: absolute;

top: 0;

left: 0;

}

.block {

width: 60px;

display: inline-block;

height: 15px;

background-color: #B22727;

margin: 12px 10px;

}

404

兼容IE9+ 及其他, 主要是 transform 的兼容问题, 以下来自这里:

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

Internet Explorer 9 需要前缀 -ms-。

虽然除了 transform, 还有其他可以玩的, 像圆角, 404两边的条, 但是觉得效果这个东西, 还是不要炫技术的好.

本来不想上传效果图的, 弄了弄发现css写css代码会被注释掉, 诶 申请个js权限去

一款纯css3实现的漂亮的404页面

之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: …

html5和css3打造一款创意404页面

之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览   源码下载 实现的代码. h …

jQuery+CSS3实现404背景动画特效

效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: …

CSS3绘制六边形

因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( …

【项目1-1】使用HTML5+CSS3绘制HTML5的logo

作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 …

CSS3制作404立体字体

CSS3制作404立体字体页面效果     鼠标移动上去,背景色变白.       动态效果:     .demo p:first-child span:hover { text-shadow:0px …

thinkphp访问不存在的模块或者方法跳转到404页面

使用的thinkphp 版本是3.2.0, 在config.php中配置 404地址,即可: ‘TMPL_EXCEPTION_FILE’ => ‘./Application/Home/View/ …

网站设置404页面 –nginx

有的时候根据域名要先知道用的什么web 服务器 最简单的 http://tool.chinaz.com/pagestatus/  输入域名,看返回的头部信息 用的那个web浏览器 下面的方法也是根据头 …

JavaWeb 自定义404页面

本来,Tomcat中自定义404页面不过是在web.xml文件中写4行代码的事情. 直接引用 Tomcat官方FAQ 怎样自定义404页面? 编辑web.xml …

随机推荐

VB将JSON映射到表格实现解析

现在抓取网页数据的时候,经常会遇到JSON的数据,相对于繁杂无标签名的HTML源,用JSON传回的数据比较直观好看点.但是从其中提炼数据也让人觉得很烦躁,基本上就是不断的查找,截取,或者组装成JS代码 …

为什么静态成员、静态方法中不能用this和super关键字

1.      在静态方法中是不能使用this预定义对象引用的,即使其后边所操作的也是静态成员也不行. 因为this代表的是调用这个函数的对象的引用,而静态方法是属于类的,不属于对象,静态方法成功加载 …

Space and GridLayout 教程

Ice Cream Sandwich (ICS) sports two new widgets that have been designed to support the richer user i …

以下是jQuery和JavaScript实现相同操作的等价代码。

选择元素  Javascript代码 1.// jQuery   2.var els = $(‘.el’);   3.  4.// 原生方法   5.var els = document.queryS …

融云(找到“每个App都有沟通的需求”的细分市场)

近日,国内著名App驾考宝典和融云达成合作,为应用增加IM功能,实现亿级用户之间聊天.消息一出,IM(即时通讯)领域的大佬,同时也是个上线不到两岁的新生力量,再次引发了行业的关注. 对业内人士而言,即 …

安装Postgresql踩过的坑

PG安装相关的 1  系统语言的设置 PG的安装,和系统的locale设置有一定的关系,需要设置,如在.profile或.bashrc中 也可以运行下面的命令: dpkg-reconfigure lo …

STL—对象的构造与析构

STL内存空间的配置/释放与对象内容的构造/析构,是分开进行的.   对象的构造.析构         对象的构造由construct函数完成,该函数内部调用定位new运算符,在指定的内存位置构造对象 …

hdu5904 LCIS

这题惩罚我这种经常不管常数的懒人 直接 1e6 TLE 如果1e5对数组枚举过 诶其实很想吐槽些伤心事,但是还是不想在博客上吐口水 不管今年比赛结果如何 请享受比赛 #include

十个 PHP 开发者最容易犯的错误

PHP 语言让 WEB 端程序设计变得简单,这也是它能流行起来的原因.但也是因为它的简单,PHP 也慢慢发展成一个相对复杂的语言,层出不穷的框架,各种语言特性和版本差异都时常让搞的我们头大,不得不浪费 …

记一个逻辑bug

1     从数据库中找出一个学生能选的毕业设计(毕设的select or not 字段表示本题目是否已经被选 此时就按照其值为n来查询) 2     用户选择某个毕设后,先更新毕设表(select …

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164556.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 旋转编码器原理「建议收藏」

    旋转编码器原理「建议收藏」文章整理于网络:一、简介旋转变压器(resolver)是一种电磁式传感器,又称同步分解器。它是一种测量角度用的小型交流电动机,用来测量旋转物体的转轴角位移和角速度,由定子和转子组成。其中定子绕组作为变压器的原边,接受励磁电压,励磁频率通常用400、3000及5000HZ等。转子绕…

  • Linux vim退出_怎么关闭vim

    Linux vim退出_怎么关闭vim有些终端在vim退出后可以恢复到打开vim前终端的状态,类似这样:$vim/etc/sysconfig/####这里表示打开vim#####sdskk,一些文件内容:q$vim/etc/sysconfig/##终端恢复到先前状态但是有些不行,解决这个问题需要以下两步:1、设置TERM环境变量为xterm或者xterm-color,可以在.ba…

  • python udp发送数据(http视频传输)

    一、前言最近想写一个实时的视频传输程序,然后上网找了很久没有找到合适的我想用OpenCV进行图像采集,然后用pygame将视频信号转化为可通过UDP网络传输的字符流,然后到达终端后再通过pygame对字符流进行解析,进而将图像显示出来之所以使用UDP传输而不是TCP传输,是因为UDP在视频传输方面拥有快速、无需连接等优点,适合密集传送大量信息的场合但UDP传输有一个问题,…

  • java开发webservice的几种方式「建议收藏」

    java开发webservice的几种方式「建议收藏」webservice的应用已经越来越广泛了,下面介绍几种在Java体系中开发webservice的方式,相当于做个记录。1.Axis2方式Axis是apache下一个开源的webservice开发

  • 微信小程序 onLoad与onShow之间传值「建议收藏」

    微信小程序 onLoad与onShow之间传值「建议收藏」在写一个页面的刷新效果,需求是在页面第一次进来时,做出一次数据加载,之后在页面有个评论操作,每次评论成功都将本页的数据进行刷新。考虑到如果刷新都用onLoad()的话,会造成比较大的资源浪费,所以,把需要进行数据刷新的部分放到onShow页面进行刷新。因为我的函数在加载评论数据的时候,需要一个bookid数值,传参到服务器这样才能获取相对应的数据。但是bookid是从上个页面通过option…

  • 测试用例八大要素及额外十小要素

    测试用例八大要素及额外十小要素测试用例八大要素1.测试用例编号由字母、字符、数字组合而成的字符串,有唯一性,易识别性。eg:1)系统测试:产品编号-ST-系统测试项名-系统测试子项名-编号2)集成测试:产品编号-IT-集成测试项名-集成测试子项名-编号3)单元测试:产品编号-UT-单元测试项名-单元测试子项名-编号这样看到编号就可以知道是做的什么测试,测试的对象是什么,也方便维护。 2.测…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号