美丽的404页纯CSS3实现的实例教程

在共享的HTML5和CSS3来创造一个创新的404页，一个美丽的404页纯CSS3实现今天和你分享的，有详细的代码供大家学习，兴趣的朋友可以参考下
在你分享有趣的404页。今天，我会用纯CSS3实现共享一个漂亮的404页面，结果如下：
实现的代码。

HTML代码：

xml代码将内容复制到剪贴板。
四百零四

误差

也许我可以帮忙。
<输入类型文本name=搜索class=srchfld占位符=你看什么
要求

搜索

我的建议。

回家
文件夹

CSS3代码：

CSS代码将内容复制到剪贴板。
体
{
背景颜色：# 0a7189；
# FFF颜色；
字体：100%蛇
字体大小：1.8rem；
字体重量：300；
}

一
{
颜色：# 75c6d9；
文字装饰：无；
}

H3
{
保证金底部：1%；
}

UL
{
列表样式：无；
保证金：0；
填充：0；
行高：50px；
}

李A：盘旋
{
颜色：# FFF；
}

。中心
{
文本对齐：中心；
}

搜索栏样式
表格> *
{
垂直对齐：中间；
}

srchbtn。
{
边界：0；
边界半径：7px；
填充物：0 17px；
背景：# e74c3c；
宽度：99px；
底部边框：5px固体# c0392b；
颜色：# FFF；
身高：65px；
字体大小：1.5rem；
光标：指针；
}

srchbtn：活跃。
{
底部边框：0px固体# c0392b；
}

srchfld。
{
边界：0；
边界半径：7px；
填充物：0 17px；
马克斯：404px宽度；
宽度：40%；
底部边框：5px固体# bdc3c7；
身高：60px；
颜色：# 7f8c8d；
字体大小：19px；
}

srchfld：焦点。
{
轮廓颜色：RGBA（255, 255, 255，0）；
}

404 *** /样式
。头
{
字体大小：13rem；
字体重量：700；
保证金：2% 0 2% 0；
文字阴影：0px 3px 0px # 7f8c8d；
}

错误样式
。错误
{
保证金：- 70px 0 2% 0；
字体大小：7.4rem；
文字阴影：0px 3px 0px # 7f8c8d；
字体重量：100；
}

以上是我今天与大家分享的404页。谢谢你的阅读。我希望能帮助你。请注意它。我们将努力分享更多的优秀文章。