Loading... > 之前的导航页视觉疲劳了,新做了一个渐变式的,为方便大家,去掉所有本地依赖,全部资源 在线引入,就一个单页`HTML`,随便放在哪个地方都可以,您也可以自己动手个性化,分享给大家,谢谢点赞。 ## 演示 http://itggg.cn  ## 功能 - 响应式设计,设备自适应 - 获取访客IP - 调用一言或今日诗词 - font-awesome 图标支持 ## 配置 <div class="tip inlineBlock info"> **标题,改成你自己的** </div> ```html <!-- 大标题名称 --> <h1>NULL H1</h1> <!-- 小标题一句话介绍 --> <h5>NULL H5</h5> ``` <div class="tip inlineBlock info"> **页面名称,改成你的内容** </div> ```html <!-- SEO名称/页面名称 --> <title>NULL</title> ``` <div class="tip inlineBlock info"> **3、ico图标,改成你的页面 ico** </div> ```html <!-- 页面ico图标 --> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> ``` <div class="tip inlineBlock info"> **4、一言和今日诗词二选一,默认一言,要使用诗词,去掉诗词注释,并把一言注释掉即可** </div> ```html <!-- 一言 --> <p id="hitokoto_text">em...</p> <!-- 今日诗词 --> <!-- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=" data-original="https://v2.jinrishici.com/one.svg?font-size=30&spacing=2&color=Gainsboro" /> --> ``` <div class="tip inlineBlock info"> **5、导航按钮,按格式添加即可,默认自带4个,修改链接和名称,要添加格式如下,不要超出`<p>`标签** </div> ```html <!-- 导航按钮 --> <a href=" ">NULL</a> | ``` <div class="tip inlineBlock info"> **6、图标按钮,默认3个,更多按格式添加即可,一行一个,样式参考:**[图标样式](http://www.fontawesome.com.cn/faicons/) </div> ```html <!-- 图标按钮 --> <li><a href=" " class="fa fa-qq fa-2x"><span class="label"></span></a></li> ``` <div class="tip inlineBlock info"> **7、渐变背景图片和颜色设置,默认使用必应每日一图,您也可以改成你直接的图片,替换链接即可,颜色可参考:**[中国传统颜色](http://zhongguose.com/) </div> ```js <!-- 渐变背景初始化 --> source: 'https://api.itggg.cn/c' gradients: [ ['#29323c', '#485563'], ['#FF6B6B', '#556270'], ['#80d3fe', '#7ea0c4'], ['#f0ab51', '#eceba3'] ``` ## 进阶 **动态图标支持,引入CSS,使用参考第四章节 “动态图标” :**[使用说明](https://www.itggg.cn/xuexi/319.html) ```html <link rel="stylesheet" href="https://itggg.cn/cdn/font-awesome-animation.min.css"> ``` ## 其他 <div class="tip inlineBlock success"> **附带两个纯色渐变样式** </div>  ## 下载 <div class="hideContent">此处内容需要评论回复后(审核通过)方可阅读。</div> Last modification:March 25th, 2021 at 10:27 am © 禁止转载 Support 如果你想请我喝奶茶的话 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
25 comments
好
大佬nb
赞赞
前来学习~~
感谢分享

拿去白嫖(☆ω☆)
下载学习一下~
多谢博主分享!
不客气 哈哈
学习一下
过来学习
学习下
下载学习一下~
随便学习(´இ皿இ`)
膜拜大佬
不错 下载看看 感谢
随便看|´・ω・)ノ
不错 下载看看 感谢
白嫖!
准备下下来魔改
行啊,改好记得分享噢!
妙啊
尿~~啊!
膜拜大佬
白嫖了୧(๑•̀⌄•́๑)૭