分类 前端学习笔记 下的文章

更新了404页面,
样式如下样式
在线预览:
404--点击此处预览
用到的新知识点:refresh 跳转,content值为设定秒数
源代码

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="refresh" content="10;url=http://www.longlanwack.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>404 找不到此页面/(ㄒoㄒ)/~~</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>*{padding:0;margin:0}a{text-decoration:none}.notfoud-container .img-404{height:214px;background:url(https://p.longlanwack.com/uploads/big/8e852d54fd6d0a7251ce61b03600055a.png) center center no-repeat;-webkit-background-size:510px auto;margin-top:30px;margin-bottom:20px}.notfoud-container .notfound-p{line-height:20px;font-size:30px;padding-bottom:20px;border-bottom:2px solid #00A1D6;text-align:center;color:#262b31}.notfoud-container .notfound-reason{color:#000000;font-size:20px;line-height:16px;text-align:left;width:300px;margin:0 auto}.notfoud-container .notfound-reason p{margin-top:16px}.notfoud-container .notfound-reason ul li{margin-top:16px;margin-left:100px}.notfoud-container .notfound-btn-container{margin:40px auto 0;text-align:center}.notfoud-container .notfound-btn-container .notfound-btn{display:inline-block;border:1px solid #ebedef;background-color:##F4F4F4f0;color:#fff;font-size:15px;border-radius:5px;text-align:center;padding:10px;line-height:16px;white-space:nowrap}
</style>

</head>
<body>
<link rel="shortcut icon" href="https://abbs.longlanwack.com//view/img/favicon.ico">
<div class="notfoud-container">

    <div class="img-404">

    </div>

    <p class="notfound-p"><strong>404 找不到指定的文件</strong></p>

    <div class="notfound-reason">

      <p><strong>可能的原因:</strong></p>

        <ul>
            
            <strong><li>域名输入错误</li>

            <li>不存在该页面</li>

            <li>服务器被外星人劫持了</li></strong>
  </div>

    

    <div class="notfound-reason">
      <blockquote>
        <p style="font-size: 13px; text-align:center; color: #00a1d6;">您的浏览器信息 / Your browser's information:
          <script>document.write(navigator.userAgent);</script>
         </p>
      </blockquote>
      <p style="text-align: center; font-size: 15px; color: #778899;"><strong>·  Powerwd by <a href="http://longlanwack.com/" style="color: #1E90FF;">LongLanWack</a></strong></p>
      <p style="text-align: center; font-size: 17px; color: #000000;"><strong>将在10s后跳转至首页...</strong></p>
  </div>
</div></body>

</html>

如果觉得有用,就给一个评论吧~

方法:
1.在当前使用的typecho主题的functions.php文件中添加以下代码:

function get_post_view($archive){
    $cid    = $archive->cid;
    $db     = Typecho_Db::get();
    $prefix = $db->getPrefix();
    if (!array_key_exists('views', $db->fetchRow($db->select()->from('table.contents')))) {
        $db->query('ALTER TABLE `' . $prefix . 'contents` ADD `views` INT(10) DEFAULT 0;');
        echo 0;
        return;
    }
    $row = $db->fetchRow($db->select('views')->from('table.contents')->where('cid = ?', $cid));
    if ($archive->is('single')) {
 $views = Typecho_Cookie::get('extend_contents_views');
        if(empty($views)){
            $views = array();
        }else{
            $views = explode(',', $views);
        }
if(!in_array($cid,$views)){
       $db->query($db->update('table.contents')->rows(array('views' => (int) $row['views'] + 1))->where('cid = ?', $cid));
array_push($views, $cid);
            $views = implode(',', $views);
            Typecho_Cookie::set('extend_contents_views', $views); //记录查看cookie
        }
    }
    echo $row['views'];
}

2.在主题的index.php(列表页)或page.php(单页面)文件中添加阅读次数调用代码:

这篇文章被阅读了  <?php get_post_view($this) ?>  遍

效果:
效果

一个极简404错误页面。

预览
我是怎么写的呢?
源码见上。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="https://abbs.longlanwack.xyz//view/img/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>404 ERROR</title>
<style>
    body{
        background-color:#000000
    ;
        font-size:14px;
    }
    h2{
        font-size:60px;
        color:#eee;
        text-align:center;
        padding-top:30px;
        font-weight:bold;
    }
</style>
</head>

<body>
<h2>404错误,服务器找不到您请求的文件!</h2>
<p style="font-size: 15px; text-align: center; color: #778899;">您的浏览器信息 / Your browser's information:<script>document.write(navigator.userAgent);</script></p>
<p style="text-align: center; font-size: 13px; color: #778899;">·  Powerwd by <a href="http://longlanwack.xyz/" style="color: #1E90FF;">LongLanWack</a></p>
</body>
</html>

唉只可惜我的技术有限,不能写出更好看的页面了,先凑合着用用吧~

话不多说直接上方法。

<title>LongLanWack's Blog</title>
<link rel="shortcut icon" href="https://abbs.longlanwack.xyz//view/img/favicon.ico">

效果如下:
图1·效果
总结:

语句一:<link rel="shortcut icon" href="图片地址" />
语句二:<link rel="icon" href="图片地址" type="image/gif" />

type可以设置多种图片类型。如:gif/png/ico
icon建议上32*32的