首页 / CSS3 / 一款纯css3实现的漂亮的404页面
一款纯css3实现的漂亮的404页面
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了一款纯css3实现的漂亮的404页面，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2194字，纯文字阅读大概需要4分钟。
内容图文
之前为大家分享了那些创意有趣的404页面， html5和css3打造一款创意404页面， HTML5可爱的404页面动画很逗的机器人。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：
实现的代码。
html代码：
<
section
class
="center"
>
<
article
>
<
h1
class
="header"
>
404
</
h1
>
<
p
class
="error"
>
ERROR
</
p
>
</
article
>
<
article
>
<
img
src
="vovg1x.png"
alt
="Funny Face"
>
</
article
>
<
article
>
<
p
>
Lost? Maybe I can help.
</
p
>
</
article
>
<
article
>
<
form
action
=""
>
<
input
type
="text"
name
="search"
class
="srchFld"
placeholder
="What are you looking for?"
required
/>
<
button
type
="submit"
class
="srchBtn"
>
Search
</
button
>
</
form
>
</
article
>
<
article
>
<
h3
>
My Suggestions.
</
h3
>
<
ul
>
<
li
><
a
href
=""
>Home</a></li><li><a href="">Portfolio</a></li></ul></article></section>
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;
}
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/11301
原文：http://www.cnblogs.com/liaohuolin/p/4125589.html
内容总结
以上是互联网集市为您收集整理的一款纯css3实现的漂亮的404页面全部内容，希望文章能够帮你解决一款纯css3实现的漂亮的404页面所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。