首页 > 开发 > CSS > 正文

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

2024-07-11 08:30:19

字体：大中小

来源：转载

供稿：网友

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

　　实现的代码。

　　html代码：

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

<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和jquery

下一篇：ul li内容宽度的问题的解决方案

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注