自制簡易導航頁

時間  2019-11-16
標籤 自制 簡易 導航 简体版
原文   原文鏈接

效果以下：css

基本功能html

網址訪問統計，使用的HTML5本地存儲。jquery

單頁面，很實用。web

代碼以下：app

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>公共導航頁</title>
<style>
html, body{height:100%; width:100%; margin:0; padding:0;}
body {line-height:1.5; font-family: 微軟雅黑; background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));}
.nav {border:solid 1px #B8D4B8; margin-bottom:20px; border-radius: 5px; background-color: #fff;}
.nav:hover {box-shadow: 0 5px 30px #999;}
.nav h3 {margin:0; background-color:#B8D4B8; padding:5px 10px; font-weight:normal; font-size:16px;}
.nav h3 i {font-style:normal; padding-left:10px; color:red;}
.clear {clear:both; height:15px;}
.nav a {float:left; width:150px; margin-top:15px; margin-left:10px; text-align:center; text-decoration: none;}
.nav a:hover {text-decoration: none; color:red;}
.nav a i {font-style:normal; color:#999; font-size:9px; position: relative; top:-10px; left:0px; padding:1px 3px;}
</style>
<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $('.nav a').each(function(){
        var href = $(this).attr('href');
        var count = window.localStorage.getItem(href);
        count = count || 0;
        $(this).append('<i>' + count + '</i>');
        $(this).attr('target', '_blank');
        $(this).click(function(){
            var count = parseInt($(this).find('i').html()) + 1;
            $(this).find('i').html(count);
            window.localStorage.setItem(href, count);
            console.log(count);
        });
        $(this).hover(function(){
            $(this).parents('.nav').find('h3 i').html($(this).attr('href'));
        }, function(){
            $(this).parents('.nav').find('h3 i').html('');
        });
    });
});
</script>
</head>
<body>
<div style="max-width:1000px; margin:10px auto;">

<h3>公共導航頁</h3>

<div class="nav">
<h3>★ 公共外網 <i></i></h3>
<a href="http://www.baidu.com">百度搜索</a>
<a href="http://fanyi.baidu.com/">百度翻譯</a>
<a href="https://www.baidu.com/s?wd=qq&tn=baidulocal">百度無廣告</a>
<a href="http://www.cnblogs.com">博客園</a>
<a href="http://www.zhihu.com/explore">知乎發現</a>
<a href="http://tech.163.com">163科技</a>
<a href="http://www.bootcss.com/">Bootstrap</a>
<div class="clear"></div>
</div>

<div class="nav">
<h3>★ 工做外網 <i></i></h3>
<a href="http://www.xxx.cn">RDC_V1</a>
<div class="clear"></div>
</div>

<div class="nav">
<h3>★ 內網調試 <i></i></h3>
<a href="http://www.z1.com">指紋識別_V1</a>
<a href="http://www.z2.com">大壩壓實</a>
<a href="http://www.z3.com">庫存管理</a>
<a href="http://www.z4.com">指紋識別_V3</a>
<a href="http://www.z5.com">設備監控</a>
<a href="http://www.z7.com">上海宏信</a>
<a href="http://www.z8.com">RDC運料監控</a>
<a href="http://www.z9.com">基礎框架</a>
<div class="clear"></div>
</div>

</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程