由于我首選是放在一為導航頁面，所以HTML代碼的話就放在首頁內(nèi)容（自定義）里面；區(qū)塊也支持自定義，會緩存在本地。請自行內(nèi)置CSS、JS文件，ico圖標。

更多美化內(nèi)容可以關(guān)注我的網(wǎng)站：https://navw.cn/（歡迎大家申請友聯(lián)）

插件版：http://www.95zz02.com/question/7222.html

<div class="ioui-content switch-container home-container sidebar_no container">
<div class="ioui-main">
<div class="content-wrap">
<div class="content-layout">
<div class="dock-container" id="dock-container" style="left: 50%;">
<div class="dock" id="dock">
<ul class="dock-icons">
<!-- 這里添加您的圖標 -->
<li class="dock-icon-divider">
<hr class="dock-divider" id="dock-divider" style="display: none">
<!-- 添加分割線 -->
</li>
<li class="dock-icon" title="大海資源庫">
<a target="_blank">
<img src="https://vip.lzzcc.cn/favicon.ico"
alt="大海資源庫">
<span class="docktooltip">大海資源庫</span>
<!-- 添加標題元素 -->
</a>
</li>

<li class="dock-icon" title="花瓣">
<a target="_blank">
<img src="https://navw.cn/dahai/img/huaban.png" alt="花瓣">
<span class="docktooltip">花瓣</span>
</a>
</li>

<li class="dock-icon" title="可畫設(shè)計">
<a target="_blank">
<img src="https://navw.cn/dahai/img/canva.png"
alt="可畫設(shè)計">
<span class="docktooltip">可畫設(shè)計</span>
</a>
</li>
<li class="dock-icon" title="喜馬拉雅">
<a target="_blank">
<img src="https://navw.cn/dahai/img/xima.png"
alt="喜馬拉雅">
<span class="docktooltip">喜馬拉雅</span>
</a>
</li>
<li class="dock-icon" title="小紅書">
<a target="_blank">
<img src="https://navw.cn/dahai/img/xiaohongshu.png"
alt="小紅書">
<span class="docktooltip">小紅書</span>
</a>
</li>
<li class="dock-icon" title="抖音">
<a target="_blank">
<img src="https://navw.cn/dahai/img/douyin.png"
alt="抖音">
<span class="docktooltip">抖音</span>
</a>
</li>

<!-- 其他應用圖標 -->
<li class="dock-icon-divider">
<hr class="dock-divider">
<!-- 添加分割線 -->
</li>
<li class="dock-icon add-app" title="添加應用">
<img src="https://navw.cn/dahai/img/dahai-添加.webp"
alt="添加應用">
<span class="docktooltip">添加應用</span>
</li>
<li class="dock-icon close-dock" title="關(guān)閉">
<img src="https://navw.cn/dahai/img/dahai-收起.webp"
alt="關(guān)閉">
<span class="docktooltip">折迭dock欄</span>
</li>
<li class="dock-icon" title="網(wǎng)站提交">
<a href="/contribute.html"
target="_blank">
<img src="https://navw.cn/dahai/img/dahai-提交.webp"
alt="網(wǎng)站提交">
<span class="docktooltip">網(wǎng)站提交</span>
</a>
</li>
</ul>
</div>
</div>
<div class="expand-dock" id="expand-dock" title="展開DOCK欄" style="display: none">
<i class="iconfont icon-arrow-r"></i>
</div>
<!-- 添加應用的對話框 -->
<div id="addAppModal" class="modal" style="display: none">
<div class="dockmodal-content">
<span class="close">×</span>
<h2>添加應用</h2>
<h5>添加后右鍵點擊即可刪除</h5>
<h2></h2>
<form id="appForm">
<label for="appUrl">網(wǎng)址鏈接（必填）：</label>
<input type="text" id="appUrl" name="appUrl" required="" placeholder="請?zhí)顚懢W(wǎng)址鏈接"><br><br>
<label for="appName">網(wǎng)站名稱（必填）：</label>
<input type="text" id="appName" name="appName" required="" placeholder="請?zhí)顚懢W(wǎng)站名稱"><br><br>
<label for="appIcon">圖標鏈接（非必填）：</label>
<input type="text" id="appIcon" name="appIcon" placeholder="不填寫鏈接自動獲取網(wǎng)址圖標"><br><br>
<input type="submit" value="添加">
</form>
</div>
</div>
<!-- 刪除應用對話框 -->
<div id="customDialog" class="dialog" style="display: none">
<div class="dialog-content">
<p>確定刪除該應用嗎？</p>
<button id="confirmDeleteBtn">確定</button>
<button id="cancelDeleteBtn">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="https://navw.cn/dahai/dock.js"></script>
<link rel="stylesheet" >