https://tools.imiku.me/ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <link rel="stylesheet" href="./css/style.css"> <title>导航</title>. <style> * {-webkit-tap-highlight-color: transparent;} ::-webkit-scrollbar {width: .5rem;height: .625rem;} ::-webkit-scrollbar-thumb {background-color: #249ffd;} h2 {font-size: 20px;margin-bottom: 10px;font-weight: bold;} p {line-height: 1.5;} a {color: #0366d6;word-break: break-all;text-decoration: none;cursor: alias;} body {font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;word-spacing: .0625rem; -webkit-font-smoothing: antialiased;min-height: 100vh;background-color: #f4f8fb;} .wrap {position: relative;max-width: 75rem;margin: 0 auto;box-sizing: border-box;padding: 0 1.25rem 1.25rem;} .nya-container {position: relative;padding: 1.5625rem 2rem;margin-top: 1.125rem;margin-bottom: 3.125rem;box-shadow: 0.5rem 0.875rem 2.375rem rgba(39, 44, 49, .06), 0.0625rem 0.1875rem 0.5rem rgba(39, 44, 49, .03);background-color: #fff;border: none;border-radius: .5rem;} .nya-container .til {position: absolute;left: 1.875rem;top: -1.125rem;padding: .3rem .9375rem;font-weight: 700;font-size: 0;background-color: #249ffd; color: #fff;box-shadow: 0 0.5rem 0.625rem rgba(36, 159, 253, .30196);border-radius: .8rem;} .nya-container .til span {font-size: 1rem;line-height: 1.25rem;vertical-align: middle;font-weight: 300;} .nya-btn {display: inline-block; padding: .625rem .9375rem;font-size: 1rem;font-weight: 700;cursor: pointer;outline: 0;border: .0625rem solid #dcdee0;background-color: rgba(#249ffd, .1);transition: border-color .2s ease, color .2s ease;letter-spacing: .0625rem;} .nya-btn:hover {border-color: #249ffd;color: #249ffd;} .nya-container .nya-btn {position: relative;margin: .4375rem 0.3rem;width: calc(20% - .875rem);box-sizing: border-box;overflow: hidden;text-align: center; text-overflow: ellipsis;white-space: nowrap;transition: all .3s ease;background-color: transparent;font-size: 1.125rem;border-radius: .25rem;} .nya-container .nya-btn:hover {transform: translateY(-.125rem);box-shadow: 0 0.5rem 1rem 0 rgba(10, 14, 29, .04), 0 0.5rem 4rem 0 rgba(10, 14, 29, .08);} a.nya-btn {color: #2f3e4c;} .nya-container.welcome {margin-bottom: 2rem;margin-top: 1.125rem;} .nya-container.welcome .close {cursor: pointer;position: absolute;right: -.75rem;top: -.75rem;display: flex;align-items: center;justify-content: center; box-sizing: border-box;width: 1.875rem;height: 1.875rem;border-radius: 50%;color: #fff;background-color: #249ffd;box-shadow: 0 0.5rem 0.625rem rgba(36, 159, 253, .30196);} </style> </head> <body> <div class="wrap"> <div class="nya-container welcome"> <h2>欢迎使用导航</h2> <p> 写点什么呢?写啥啊,自己用就xb写呗! </p> <div title="关闭" class="close">X</div> </div> <div class="nya-container"> <div class="til"><span>常用</span></div> <a href="https://github.com" target="_blank" title="GitHub is where people build software. " class="nya-btn hot badge" rel="noopener noreferrer">github</a> <a href="https://weibo.com" target="_blank" title="微博" class="nya-btn hot badge" rel="noopener noreferrer">微博</a> <a href="https://www.zhihu.com/" target="_blank" title="有问题，上知乎" class="nya-btn hot badge" rel="noopener noreferrer">知乎</a> <a href="http://yhqtb.vip/" target="_blank" title="能省一块是一块" class="nya-btn hot badge" rel="noopener noreferrer">优惠券淘宝</a> <a href="https://portal.qiniu.com/bucket/xs/index" target="_blank" title="七牛云开发者平台" class="nya-btn hot badge" rel="noopener noreferrer">七牛</a> </div> <div class="nya-container"> <div class="til"><span>音频</span></div> <a href="https://music.163.com/" target="_blank" title="网易云音乐" class="nya-btn hot badge" rel="noopener noreferrer">网易云音乐</a> <a href="http://www.qingting.fm/#/home" target="_blank" title="蜻蜓FM听书" class="nya-btn hot badge" rel="noopener noreferrer">蜻蜓FM</a> <a href="https://fm.qq.com/" target="_blank" title="企鹅FM" class="nya-btn hot badge" rel="noopener noreferrer">企鹅FM</a> <a href="https://www.ximalaya.com/" target="_blank" title="喜马拉雅" class="nya-btn hot badge" rel="noopener noreferrer">喜马拉雅</a> <a href="http://mp3.yhqtb.vip/" target="_blank" title="搜索、播放、下载" class="nya-btn hot badge" rel="noopener noreferrer">在线音乐播放器</a> </div> <div class="nya-container"> <div class="til"><span>视频</span></div> <a href="https://www.bilibili.com/" target="_blank" title="哔哩哔哩" class="nya-btn hot badge" rel="noopener noreferrer">哔哩哔哩</a> <a href="https://v.qq.com/" target="_blank" title="腾讯视频" class="nya-btn hot badge" rel="noopener noreferrer">腾讯视频</a> <a href="http://www.iqiyi.com/" target="_blank" title="爱奇艺" class="nya-btn hot badge" rel="noopener noreferrer">爱奇艺</a> </div> <div class="nya-container"> <div class="til"><span>小说</span></div> <a href="http://yhqtb.vip/mybook/#/" target="_blank" title="yhqtb.vip/mybook" class="nya-btn hot badge" rel="noopener noreferrer">yhqtb.vip/mybook</a> <a href="http://www.zxcs.me/" target="_blank" title="藏尽网络中最好的精校小说" class="nya-btn hot badge" rel="noopener noreferrer">知轩藏书</a> </div> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $('.nya-container.welcome .close').click(function(){ alert('页面这么短,关他干什么') }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 导航页 喜欢 (0)or分享 (0)
