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