纯html 404页面,一款纯css3实现的漂亮的404页面_html/css

一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose

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

在线预览源码下载

实现的代码。

html代码：

404

ERROR

Lost? Maybe I can help.

My Suggestions. Home

Portfolio

css3代码：

body { background-color: #0A7189; color: #fff; font: 100% "Lato" , sans-serif; font-size: 1.8rem; font-weight: 300; } a { color: #75C6D9; text-decoration: none; } h3 { margin-bottom: 1%; } ul { list-style: none; margin: 0; padding: 0; line-height: 50px; } li a:hover { color: #fff; } .center { text-align: center; } /* Search Bar Styling */ form > * { vertical-align: middle; } .srchBtn { border: 0; border-radius: 7px; padding: 0 17px; background: #e74c3c; width: 99px; border-bottom: 5px solid #c0392b; color: #fff; height: 65px; font-size: 1.5rem; cursor: pointer; } .srchBtn:active { border-bottom: 0px solid #c0392b; } .srchFld { border: 0; border-radius: 7px; padding: 0 17px; max-width: 404px; width: 40%; border-bottom: 5px solid #bdc3c7; height: 60px; color: #7f8c8d; font-size: 19px; } .srchFld:focus { outline-color: rgba(255, 255, 255, 0); } /* 404 Styling */ .header { font-size: 13rem; font-weight: 700; margin: 2% 0 2% 0; text-shadow: 0px 3px 0px #7f8c8d; } /* Error Styling */ .error { margin: -70px 0 2% 0; font-size: 7.4rem; text-shadow: 0px 3px 0px #7f8c8d; font-weight: 100; }

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

纯html 404页面,一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose相关推荐

新南威尔士大学纯硅量子计算机,全球首款纯硅量子计算机芯片在新南威尔士大学诞生...
全球首款纯硅量子计算机芯片在新南威尔士大学诞生传统计算机在计算和存储信息的时候,使用的是0和1组成的普通比特位.但是量子计算机的量子比特位,子锐机器人维修,却能够借助量子的物理现象,同时叠加0和1的 ...
404 html代码,不懂代码，如何制作漂亮的404页面【新手简易教程】
404是用户在访问页面时,搜索引擎常返回的状态码,常见的还有200,301,302,500等.搜索引擎通过http状态码识别网页状态,404状态码,常指所访问的页面不存在或已被删除. 404页面,是用 ...
html css制作404页面,一款纯css3实现的漂亮的404页面
实现的代码. html代码: 404 ERROR Lost? Maybe I can help. required /> Search My Suggestions. Home Portfoli ...
推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览源码下载实现的代码. html代码: <di ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
2014圣诞节一款纯css3实现的雪人动画特效
在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览源码下载实现的代码. html代码: <span cla ...
html舞动特效,7款纯CSS3实现的炫酷动画应用
原标题:7款纯CSS3实现的炫酷动画应用 HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效.但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以 ...
PHP 页面静态化/纯静态化/伪静态化
转载:https://www.cnblogs.com/caoruiy/p/4698938.html 概念 PHP静态化分为:纯静态化和伪静态化:纯静态化又分为:局部静态化和完全静态化纯静态化 ...
每日分享，三款纯jquery移动端日期时间选择插件
序言:mm再也不用担心我找不到合适好看的日期选择插件了,今天分享三款纯jquery移动端日期时间选择插件,赶紧点赞收藏转发吧. 一.jQuery移动端触屏滑动时间日期选择插件简介:jQuery移动端 ...

纯html 404页面,一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose

纯html 404页面,一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose相关推荐

最新文章

热门文章