一款纯css3实现的漂亮的404页面的实例教程 - IT知识教程 - 中企动力

登录注册

做网站
做推广
做电商

服务支持
应用与服务
关于中企

中企商学院

查看更多

核心必备

数字门户内贸营销版

全球营销版通用版

企业域名企业邮箱

行业应用

医院专业版学校专业版

律所专业版数字名片

视觉设计

VR全景视频制作

图片拍摄

网络安全

等保认证 SSL证书

查看更多

核心必备

全球SEO 百度首屏展位

Yandex推广 Google海外推广

解决方案

外贸推广解决方案

查看更多

核心必备

全网商城移动商城

装修服务

电商产品拍摄

解决方案

零售行业OMO解决方案政府采购电商平台解决方案

查看更多

查看更多

查看更多

帮助中心

数字门户产品服务保障服务中心

设计师信息化讲堂

解决方案

外贸数字营销解决方案企业视频直播解决方案

企业安全等保解决方案品牌数字化营销解决方案

品牌零售数字商业解决方案智慧园区解决方案

B2B电商平台建设解决方案数字化政务门户解决方案

开拓型外贸企业解决方案成长型外贸企业解决方案

行业解决方案

实战应用

产品剖析律所行业专家

平台产品导入外贸信息洞察

行业解读

学习中心

电商运营学院网站建设学院

查看更多

应用与服务

VR智能全景个性化场景定制服务

网站安全服务云定制

企业视频直播 Banner设计

产品主图设计图片处理

查看更多

企业概况

关于我们企业文化

发展历程数码庄园

法律隐私

资质荣誉

企业资质所获荣誉

新闻中心

新闻公告媒体报道

社会公益视频中心

行业资讯

联系我们

联系我们全国网点

工作机会

查看更多

查看更多

网站建设 IT知识 IT知识教程一款纯css3实现的漂亮的404页面的实例教程

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

2021-05-08 21:10:15

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

　　实现的代码。

　　html代码：

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

<sectionclass="center">

<article>

<h1class="header">

404</h1>

<pclass="error">

ERROR</p>

</article>

<article>

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

</article>

<article>

<p>

Lost?MaybeIcanhelp.</p>

</article>

<article>

<formaction="">

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

required/>

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

Search</button>

</form>

</article>

<article>

<h3>

MySuggestions.</h3>

<ul>

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

<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;

}

a

{

color:#75C6D9;

text-decoration:none;

}

h3

{

margin-bottom:1%;

}

ul

{

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页面，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章

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

本文实例讲述了基于CSS3实现的漂亮Menu菜单效果代码。分享给大家供大家参考。具体如下：这是一款基于CSS3实现的漂亮Menu菜单代码，请注意，ie9以下版本

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

　　今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：　　实现的代码。　　html代码：XML/HTM

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

　　之前为大家分享很多纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非

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

今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：实现的代码。html代码：复制代码代码如下:Wind

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

本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码。分享给大家供大家参考。具体如下：这是一款基于css3实现的下拉菜单导航，是非常漂亮的动画菜单，而且是多

7 x 24

全国售后支持
100 倍

故障时长赔付
25 年

25年行业服务经验
70 家

全国售后支持
1600+ 名

超千人的设计、研发团队
150 万

服务企业客户150万家

Copyright © 1999-2025 中企动力科技股份有限公司（300.cn）版权所有京公网安备11030102010293号京ICP证010249-2

在线咨询

建站在线咨询

获取方案

获取建站报价/方案

我们联系您

微信咨询

扫一扫添加
动力姐姐微信

TOP