VIP
加入QQ群
关注微信公众号
联系我们
请求更新
文本是《WordPress（共53篇）》專題的第 16 篇。閱讀本文前，建議先閱讀前面的文章：
- 1.【B2】添加導航欄上下滑動特效
- 2.【B2】網格樣式文章滑鼠懸浮彈出分類角標
- 3.【B2】美化button動態按鈕
- 4.【WordPress】右側小工具仿CSDN社區
- 5.【WordPress】四欄目美化代碼
- 6.【B2】問答模組新增OpenAI ChatGPT機器人自動回答功能
- 7.【WordPress】圖片自動添加alt和title
- 8.【B2】代碼塊添加一鍵複製和美化
- 9.【B2】評論後自動刷新頁面
- 10.【WordPress】增加文章內頁顯示最後編輯時間
- 11.【WordPress】隨滑鼠移動3D圖片效果
- 12.【子比】優知新整站數據包 (含全部文章數據+自帶插件)
- 13.WP-Cron 優化指南：提升 WordPress 性能，減少伺服器負擔
- 14.【WordPress】ds-download-link：以獨特圖示選擇，打造文章下載鏈接新體驗 (修復版)
- 15.【B2】懶載入優化
效果演示
使用教學
以下代碼放到後台-模組管理-自定義
<div class="home-row-left content-area "><div id="html-box-sige" class="html-box"><div class="home-first-screen">
<div class="parts row">
<div class="col-sm-6 col-md-3 part-first">
<div class="home-first-part home-menus">
<ul>
<li><a href="/category/ruanjian" target="_blank" rel="noopener noreferrer"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-ruanjian"></use> </svg><span>軟體下載</span></a></li>
<li><a href="/circle/wxbd" target="_blank" rel="noopener noreferrer"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-ziliao"></use> </svg><span>文學賞析</span></a></li>
<li><a href="/category/shipinsucai" target="_blank" rel="noopener noreferrer"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-yingshi"></use> </svg><span>影視音樂</span></a></li>
<li><a href="/category/yuanma" target="_blank" rel="noopener noreferrer"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-suyuanmaguanli"></use> </svg><span>網絡源碼</span></a></li>
<li><a href="/category/youxi" target="_blank" rel="noopener noreferrer"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-youxi"></use> </svg><span>遊戲樂園</span></a></li>
<li><a href="/vips" target="_blank" rel="noopener noreferrer"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-huiyuanquanyi"></use> </svg><span>至臻會員</span></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-topics">
<h2 class="hf-title"><strong><a rel="external nofollow noopener noreferrer" target="_blank" href="/category/jiaocheng" target="_blank">教程專區</a></strong><a rel="external nofollow noopener noreferrer" target="_blank" href="/category/jiaocheng" target="/category/jiaocheng" class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a rel="external nofollow noopener noreferrer" target="_blank" href="https://www.xiaohuli.vip/" target="_blank"><span class="thumb" style="background-image:url(/img/618huo.png)"><img class="aligncenter size-full wp-image-61318" src="/img/618huo.png" width="853" height="290" alt="優惠劵秒殺平台,優惠券折扣,9塊9包郵,限時特賣,優品折扣,好省樂購" title="好省樂購秒殺平台-優惠券折扣直播第一站！每天更新千款，純人工篩選驗貨，限時限量特賣，全場1折包郵！" /></span><strong class="title">好省樂購全場包郵</strong></a>
</div>
<div class="col-xs-6">
<a rel="external nofollow noopener noreferrer" target="_blank" href="https://www.xiaohuli.vip/?r=activity/ac&id=663" target="_blank"><span class="thumb" style="background-image:url(/img/618huo2.png)"><img class="aligncenter size-full wp-image-61319" src="/img/618huo2.png" width="853" height="290" alt="好省樂購秒殺平台-優惠券折扣直播第一站！每天更新千款，純人工篩選驗貨，限時限量特賣，全場1折包郵" title="優惠劵秒殺平台,優惠券折扣,9塊9包郵,限時特賣,優品折扣,好省樂購" /></span><strong class="title">好省樂購618開門紅</strong></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-subjects">
<h2 class="hf-title"><strong><a href="/circle" target="_blank" rel="noopener noreferrer">论坛交流</a></strong><a href="/circle" target="_blank" class="more" rel="noopener noreferrer">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6">
<a rel="external nofollow noopener noreferrer" target="_blank" href="/task" target="_blank"><span class="thumb" style="background-image:url(/img/qiandao.png)"><img src="/img/qiandao.png" alt="thumb"></span><strong class="title">簽到免費獲取積分</strong></a>
</div>
<div class="col-xs-6">
<a rel="external nofollow noopener noreferrer" target="_blank" href="/distribution" target="_blank"><span class="thumb" style="background-image:url(/img/tuiguang.png)"><img src="/img/tuiguang.png" alt="thumb"></span><strong class="title">推廣下載有收益</strong></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-course">
<h2 class="hf-title"><strong><a rel="external nofollow noopener noreferrer" target="_blank" href="/announcements" target="_blank">網站公告</a></strong><a rel="external nofollow noopener noreferrer" target="_blank" href="/announcements" target="_blank" class="more">more</a></h2>
<div class="courses">
<div class="course-items">
<ul>
<li><a rel="external nofollow noopener noreferrer" target="_blank" href="https://www.xiaohuli.vip/vip%e4%bb%8b%e7%bb%8d" target="_blank"><strong>會員須知</strong><span>會員說明</span></a></li>
<li><a rel="external nofollow noopener noreferrer" target="_blank" href="https://www.xiaohuli.vip/%e5%85%b3%e4%ba%8e%e6%88%91%e4%bb%ac" target="_blank"><strong>關於我們</strong><span>關於我們</span></a></li>
<li><a href="#" target="_blank" rel="noopener noreferrer"><strong>素材發佈</strong><span>上傳規則</span></a></li>
<li><a rel="external nofollow noopener noreferrer" target="_blank" href="/requests" target="_blank"><strong>意見反饋</strong><span>意見反饋</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>以下代碼放入css樣式
引入阿里向量圖示
<script src="//at.alicdn.com/t/font_3169120_wjprs1djc7p.js"></script>您已閱讀完《WordPress（共53篇）》專題的第 16 篇。請繼續閱讀該專題下面的文章：
- 17.WordPress代碼實現網站統計功能（評論總數/建站天數等）
- 18.Nginx 加強 WordPress 防護的規則
- 19.【Wordpress】右鍵功能表及F12美化
- 20.【B2】免外掛程式實現 FancyBox燈箱
- 21.【Wordpress】功能表緩存外掛程式
- 22.【Wordpress】單個文章設置有效期，到期自動下線美化版
- 23.【B2】首頁文章標題美化
- 24.【Wordpress】大氣炫彩流光文字特效美化代碼
- 25.【Wordpress】文章側邊加一個滾動公告
- 26.【WordPress】附件密碼下載外掛程式 – NGDown
- 27.【B2】文章內頁H標題美化
- 28.【Wordpress】文章頁添加彩色漸變框美化
- 29.【Wordpress】文章頁添加更新時間時效性
- 30.【子比】頂部多功能元件加個可愛的小人
- 31.【Wordpress】側邊欄視頻卡片優化：提升用戶互動體驗
- 32.【Wordpress】隨機評論彈窗
- 33.【Wordpress】網站添加阿里巴巴Iconfont圖示詳細圖文教程
- 34.【Wordpress】訪問記錄外掛程式
- 35.【Wordpress】添加一個時光軸頁面
- 36.【Wordpress】後台怎麼讓文章/分類/頁面/標籤顯示ID
- 37.【B2】主題統計外掛程式
- 38.【Wordpress】不支援svg/ico/webp上傳怎麼辦？
- 39.【B2】增加和Google彈窗廣告一樣的效果
- 40.【Wordpress】側邊欄添加60s讀懂世界。
- 41.【Wordpress】WP2AI文章變成智慧知識庫
- 42.【Wordpress】GT3 Photo & Video Gallery Pro v1.7.2.18 圖片視頻混排展示清單頁瀑布流頁面創建外掛程式下載
- 43.【Wordpress】搜尋結果頁面人機驗證代碼 (算術驗證)
- 44.【子比】側邊欄推廣小工具
- 45.【Wordpress】側邊欄如何實現一圖三按鈕的效果
- 46.【Wordpress】美化之文章內頁新增彩色漸變框 (共9套)
- 47.【Wordpress】無需外掛程式限制用戶進入後台控制面板介面
- 48.【子比】網站添加宣傳子比購買頁面
- 49.【Wordpress】添加短劇搜索功能
- 50.【子比】側邊欄顯示天氣預報加一言教程
- 51.【Wordpress】贊助頁面
- 52.【子比】添加一個我的網站頁面
- 53.【Wordpress】AI圖文+視頻+關鍵詞自動生成騰訊雲deepseek聯網滿血版
文章標題：【B2】首頁添加導航區塊樣式
本文鏈接：https://angelal.cc/1217.html
文章版權：除非特別註明，否則均為AngelaL的原創文章，轉載必須以鏈接形式標明本文鏈接
本文最後更新發佈於：2025年02月26日 18:38, 某些文章具有時效性,若有錯誤或已失效,請在下方留言。
