html css制作404页面,一款纯css3实现的漂亮的404页面

实现的代码。

html代码：

404

ERROR

Lost? Maybe I can help.

required />

My Suggestions.

Home
Portfolio

css3代码：

body

{

background-color: #0A7189;

color: #fff;

font: 100% "Lato" , sans-serif;

font-size: 1.8rem;

font-weight: 300;

}

{

color: #75C6D9;

text-decoration: none;

}

{

margin-bottom: 1%;

}

{

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;

}

html css制作404页面,一款纯css3实现的漂亮的404页面相关推荐

推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
html舞动特效,7款纯CSS3实现的炫酷动画应用
原标题:7款纯CSS3实现的炫酷动画应用 HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效.但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以 ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
2014圣诞节一款纯css3实现的雪人动画特效
在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览源码下载实现的代码. html代码: <span cla ...
一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览源码下载实现的代码. html代码: <di ...
html纯css页面滑动效果,纯css3滑动按钮动画效果
android系统的滑动按钮相信大家都使用过.这款插件就是使用纯css3制作出类似android系统的滑动按钮效果. HTML html代码十分简单.使用一个大的div作为包裹容器,给它一个class ...
HTML css实现翻页效果,一个纯CSS3实现的酷炫翻书效果
效果细节其实项目中的关键在于几个属性,perspective和rotate,便是透视和旋转 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果.z> ...
css 面包屑 30个字节,纯CSS3编写的面包屑导航收集
Tomcat虚拟目录配置方法及原理 tomcat 安装好之后,只需要把你的程序包放到$Tomcat_Home$/webapps下就可以直接使用了.这样会使webapps越来越大就需要设置虚拟目录: 1 ...
html css制作404页面,CSS3绘制404页面
标题有点噱了... 最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个. 只用的CSS3中的旋转, 效果如下上代码: Error .circle { width: 200px ...

html css制作404页面,一款纯css3实现的漂亮的404页面

html css制作404页面,一款纯css3实现的漂亮的404页面相关推荐

最新文章

热门文章