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

时间：2021-05-08

　　之前为大家分享了那些创意有趣的404页面。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<sectionclass="center">

<h1class="header">

404</h1>

<pclass="error">

ERROR</p>

</article>

<imgsrc="vovg1x.png"alt="FunnyFace">

</article>

<p>

Lost?MaybeIcanhelp.</p>

</article>

<formaction="">

<inputtype="text"name="search"class="srchFld"placeholder="Whatareyoulookingfor?"

required/>

<buttontype="submit"class="srchBtn">

Search</button>

</form>

</article>

<h3>

MySuggestions.</h3>

<ul>

<li><ahref="">Portfolio</a></li>

</ul>

</article>

</section>

　　css3代码：

CSS Code复制内容到剪贴板

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;

}

lia:hover

{

color:#fff;

}

.center

{

text-align:center;

}

form>*

{

vertical-align:middle;

}

.srchBtn

{

border:0;

border-radius:7px;

padding:017px;

background:#e74c3c;

width:99px;

border-bottom:5pxsolid#c0392b;

color:#fff;

height:65px;

font-size:1.5rem;

cursor:pointer;

}

.srchBtn:active

{

border-bottom:0pxsolid#c0392b;

}

.srchFld

{

border:0;

border-radius:7px;

padding:017px;

max-width:404px;

width:40%;

border-bottom:5pxsolid#bdc3c7;

height:60px;

color:#7f8c8d;

font-size:19px;

}

.srchFld:focus

{

outline-color:rgba(255,255,255,0);

}

.header

{

font-size:13rem;

font-weight:700;

margin:2%02%0;

text-shadow:0px3px0px#7f8c8d;

}

.error

{

margin:-70px02%0;

font-size:7.4rem;

text-shadow:0px3px0px#7f8c8d;

font-weight:100;

}

　　以上就是今天和大家分享的404页面，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

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

相关文章

基于CSS3实现的漂亮Menu菜单效果代码

一款利用纯css3实现的win8加载动画的实例分析

一款纯css3实现的颜色渐变按钮的代码教程

使用css3实现的windows8开机加载动画

css3实现的多级渐变下拉菜单导航效果代码