博客園（自定義導航欄）

来源:https://www.cnblogs.com/zmdComeOn/archive/2019/08/07/11315606.html
-Advertisement-
Play Games

自定義導航欄。 效果如下： 1.1.自定義導航欄 我的博客皮膚用的是AnotherEon001,假如你的博客用的是其它皮膚，樣式需要自己修改，要想達到一樣的效果，建議也用同款皮膚 （1）把預設的導航欄給隱藏掉 既然我們想要自定義導航欄，預設的導航欄就不能顯示 （2）頁首html代碼 裡面一個ul包含 ...


自定義導航欄。

 效果如下：

 

1.1.自定義導航欄

 我的博客皮膚用的是AnotherEon001,假如你的博客用的是其它皮膚，樣式需要自己修改，要想達到一樣的效果，建議也用同款皮膚

 

（1）把預設的導航欄給隱藏掉

既然我們想要自定義導航欄，預設的導航欄就不能顯示

#header{display:none;}

（2）頁首html代碼

裡面一個ul包含很多div（一個div代表一個分類），div裡面是下拉框（a標簽，裡面是你的博客文章地址），自己可以隨意增加刪除分類。

<p style="text-align: center;font-size:35px;margin-bottom:19px;margin-top:20px;opacity: 0.5">Zhang_derek</p>

<div id="test33" >
    <ul style="margin-left:0px;margin-right: 0px;" class="test11" >
     
     

     <div class="dropdown">
      <a href="https://www.cnblogs.com/" class="dropbtn"><span style="22px;opacity: 0.2;font-size: 18px" >博客園</span></a>
        <div class="dropdown-content">
        </div>
      </div> 

<div class="dropdown">
      <a href="http://www.cnblogs.com/derek1184405959/" class="dropbtn"><span style="opacity: 0.2;font-size: 18px" >我的首頁</span></a>
        <div class="dropdown-content">
        </div>
      </div> 
    
       <div class="dropdown">
      <a href="#" class="dropbtn">全部分類</a>
        <div class="dropdown-content">
        <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1131360.html"  >1.Python基礎</a>
            <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1214771.html" >2.Django基礎</a>
              <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1174868.html"  >3.Django項目</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1192235.html"  >4.REST framework</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1206098.html" >5.CRM客戶關係管理</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1214770.html"  >6.前端</a>
          <a class="menu" href="https://cuiqingcai.com/"  >7.資料庫</a>
          
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1212517.html" >8.python進階</a>
           <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1214774.html"  target="_Blank">9.資料庫</a>
           <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1163820.html"  target="_Blank">10.爬蟲</a>
        </div>
      </div> 


        <div class="dropdown">
      <a href="http://www.cnblogs.com/derek1184405959/" class="dropbtn">Flask基礎</span></a>
        <div class="dropdown-content">
           <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/9027171.html"  >1.快速入門</a>
           <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/9028895.html"  >2.請求擴展和資料庫連接池</a>
           <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/9031618.html"  >3.信號和wtforms</a>
           <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/9032613.html"  >4.SQLAlchemy</a>
        </div>
        </div> 



      <div class="dropdown">
      <a href="#" class="dropbtn">Python基礎</a>
        <div class="dropdown-content">
        <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8041517.html"  target="_Blank">1.簡介</a>
            <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8041926.html"  target="_Blank">2.數據類型</a>
              <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8042679.html"  target="_Blank">3.文件操作</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8043411.html"  target="_Blank">4.迭代器生成器裝飾器</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8044289.html"  target="_Blank">5.函數</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8065488.html"  target="_Blank">6.內置函數</a>
                       
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8078948.html"  target="_Blank">7.常用模塊</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1131360.html"  target="_Blank">更多</a>
        </div>
      </div>   





        <div class="dropdown">
      <a href="#" class="dropbtn">Django基礎</a>
        <div class="dropdown-content">
        <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8338229.html"  target="_Blank">1.安裝與運行</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8351759.html"  target="_Blank">2.路由規則</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8377735.html"  target="_Blank">3.Model</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8421195.html"  target="_Blank">4.模板語言與分頁</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8442120.html"  target="_Blank">5.Cookie</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8445045.html"  target="_Blank">6.Session</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8445842.html"  target="_Blank">7.CSRF 中間件</a>
        
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1214771.html"  target="_Blank">更多</a>
        </div>
      </div> 





        <div class="dropdown">
      <a href="#" class="dropbtn">項目相關</a>
        <div class="dropdown-content">
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8712206.html"  target="_Blank">1.REST framework 源碼分析</a>
        <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8567522.html"  target="_Blank">2.用戶註冊和登錄系統</a>
            <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8590360.html"  target="_Blank">3.線上教育平臺</a>
              <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8733194.html"  target="_Blank">4.生鮮超市</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1206098.html"  target="_Blank">5.CRM客戶關係管理
</a>
                <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1215982.html"  target="_Blank">6.Flask構建微電影
</a>
         
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1174868.html"  target="_Blank">更多</a>
        </div>
      </div> 
    



         <div class="dropdown">
      <a href="#" class="dropbtn">Python進階</a>
        <div class="dropdown-content">
        <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/9005830.html"  target="_Blank">1.魔法函數</a>
         <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/9011453.html"  target="_Blank">2.深入類和對象</a>
             
         
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1212517.html"  target="_Blank">更多</a>
        </div>
      </div> 
        

        <div class="dropdown">
      <a href="#" class="dropbtn">Python爬蟲</a>
        <div class="dropdown-content">
        <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8448875.html"  target="_Blank">1.urllib和urllib2</a>
            <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8449159.html"  target="_Blank">2.Opener和Requests</a>
              <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8449682.html"  target="_Blank">3.XPATH和BeautifulSoup4</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8449923.html"  target="_Blank">4.利用多線程爬蟲</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8450130.html"  target="_Blank">5.Selenium模擬用戶操作</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8450342.html"  target="_Blank">6.Scrapy框架原理介紹</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8450457.html"  target="_Blank">7.Spider類</a>
          
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1163820.html"  target="_Blank">更多</a>
        </div>
      </div> 

       
         <div class="dropdown">
      <a href="#" class="dropbtn">前端知識</a>
        <div class="dropdown-content">
        <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8313575.html"  target="_Blank">1.HTML</a>
            <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8322341.html"  target="_Blank">2.CSS</a>
              <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8324589.html"  target="_Blank">3.Javascript</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8324860.html"  target="_Blank">4.Dom</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8331168.html"  target="_Blank">5.Jquery</a>
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8331789.html"  target="_Blank">6.Jquery實例</a>
                        <a class="menu" href="http://www.cnblogs.com/derek1184405959/p/8447397.html"  target="_Blank">7.Ajax</a>
         
          <a class="menu" href="http://www.cnblogs.com/derek1184405959/category/1214770.html"  target="_Blank">更多</a>
        </div>
      </div> 

      
      <div class="dropdown">
      <a href="#" class="dropbtn">學習資源</a>
        <div class="dropdown-content">
        <a class="menu" href="https://docs.djangoproject.com/en/2.0/"  target="_Blank">1.Django2.0官網</a>
            <a class="menu" href="http://www.django-rest-framework.org/"  target="_Blank">2.REST framework官網</a>
              <a class="menu" href="http://docs.jinkan.org/docs/flask/"  target="_Blank">3.Flask文檔</a>
          <a class="menu" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html"  target="_Blank">4.Bootstrap教程</a>
          <a class="menu" href="http://blog.didiaoyuan.com/2017/04/18/%E6%80%BB%E6%9C%89%E4%BD%A0%E8%A6%81%E7%9A%84%E7%BC%96%E7%A8%8B%E4%B9%A6%E5%8D%95(GitHub)/"  target="_Blank">5.總有你要的書單</a>
          <a class="menu" href="http://www.pythondoc.com"  target="_Blank">6.python中文學習大本營</a>
                        <a class="menu" href="https://cuiqingcai.com/"  target="_Blank">7.爬蟲學習博客</a>
          <a class="menu" href="http://www.pythondoc.com/flask-mega-tutorial/index.html"  target="_Blank">8.The Flask Mega-Tutorial </a>
        <a class="menu" href="http://ondras.zarovi.cz/sql/demo/"  target="_Blank">9.表設計工具 </a>
        <a class="menu" href="http://flask.pocoo.org/extensions/"  target="_Blank">10.Flask extensions</a>
        </div>
      </div>
      
      <div class="dropdown">
      <a href="#" class="dropbtn">娛樂休閑</a>
        <div class="dropdown-content">
        <a class="menu" href="https://weibo.com/"  target="_Blank">1.微博</a>
                                <a class="menu" href="http://720yun.com/"  target="_Blank">2.全景圖片欣賞</a>
              <a class="menu" href="http://yingyu.xdf.cn/list_907_1.html"  target="_Blank">3.雙語閱讀</a>
          
          <a class="menu" href="http://china.nba.com/"  target="_Blank">4.NBA</a>
          <a class="menu" href="https://www.toutiao.com/"  target="_Blank">5.今日頭條</a>
          <a class="menu" href="https://tieba.baidu.com/f?kw=%C4%DA%BA%AD%B6%CE%D7%D3&fr=ala0&tpl=5"  target="_Blank">6.內涵段子</a>
          
        </div>
      </div>

    </ul>
  </div>

 

 （3）頁面定製css

#test33 ul {
margin: 0;
padding: 0;
list-style-type: none; /*去除li前的標註*/
background-color: #333;
overflow: hidden; /*隱藏溢出的部分，保持一行*/
}


#test33 li {
float: left; /*左浮動*/
}


#test33 li a, .dropbtn {
display: inline-block; /*設置成塊*/
color: white;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}


#test33 li a:hover, .dropdown:hover .dropbtn { /*滑鼠移上去，改變背景顏色*/
background-color: blue;
}


#test33 .dropdown {
/*display:inline-block將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。*/
display: inline-block;
}


#test33 .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


#test33 .dropdown-content a {
display: block;
color: black;
padding: 8px 10px;
text-decoration:none;
}


#test33 .dropdown-content a:hover {
background-color: #a1a1a1;
}


#test33 .dropdown:hover .dropdown-content{
display: block;
}

 

1.2.設置背景圖片

給自己的博客設置一個好看的背景圖片

（1）首先在設置---->>>相冊裡面添加一張背景圖片

 

 （2）頁面定製css代碼

background-image裡面的地址就是你相冊裡面添加的圖片地址

body { 
     background-color: #efefef;
    background-image:url(http://images.cnblogs.com/cnblogs_com/today-happy/1214264/t_blog.jpg); 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-position: center 0; 
     background-size: cover; 
    padding-top:0px;
  }

 

1.3.一個好看的時鐘

上一篇介紹了添加時鐘，但是又發現了一個更好看的時鐘，就分享給大家了，效果如下：

 

 （1）公告欄裡面

時鐘的寬高按可以自己設置合適的大小

<div id="clockdiv">

<canvas id="dom" width="120" height="120">時鐘canvas</canvas>

</div>

<script type="text/javascript" src="https://files.cnblogs.com/files/siwuxie095/clock.js"></script>

（2）頁面定製css代碼

/*公告欄時鐘*/
#clockdiv {

text-align: left;

}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • DexOpt相關的異常
    查找的資料 dvm探討之odex繞過 DexClassLoader4.4.2動態載入分析（磁碟載入分析） Unable to extract+optimize DEX from '/system/app/AWCarInfo.apk'不能從 '/system/app/AWCarInfo.apk'中提取 ...
  • javascript實現blob加密視頻源地址
    一、HTML代碼： 二、JavaScript代碼： 三、效果圖如下： ...
  • 前端筆記之微信小程式（三）GET請求案例&文件上傳和相冊API&配置https
    一、信息流小程式-GET請求案例 1.1服務端介面開發 一定要養成介面的意識，前端單打獨鬥出不來任何效果，必須有介面配合，寫一個帶有分頁、關鍵詞查詢的介面： 分頁介面：http://127.0.0.1:3000/info?page=1 查詢介面：http://127.0.0.1:3000/searc ...
  • 玫瑰花小製作分享-JavaScript（七夕專屬浪漫）
    分享一個玫瑰花的製作小方法，用小小的代碼給自己的她送上一個不一樣的玫瑰花。 ...
  • Cesium區分單擊【LEFT_CLICK】和雙擊事件【LEFT_DOUBLE_CLICK】
    在cesium中，用戶滑鼠左鍵雙擊視圖或Entity時，實際觸發的是兩次click和一次dbclick事件，非常影響代碼設計，本文記錄瞭如何區分單擊【LEFT_CLICK】和雙擊事件【LEFT_DOUBLE_CLICK】的代碼及原理方法。 ...
  • 前端筆記之微信小程式（二）{{}}插值和MVVM模式&數據雙向綁定&指令&API
    一、雙花括弧{{}}插值和MVVM模式 1.1 體會{{}}插值 index.wxml的標簽不是html的那些標簽，這裡的view就是div。 {{}}這樣的插值寫法，叫做mustache語法。mustache是鬍子的意思，因為{{}}像鬍子。 要在同名js文件下的data屬性中定義： 所有的框架： ...
  • 博客園美化大全
    1.1、自動生成目錄 效果如下： （1）頁腳js代碼 首先得有js許可權 （2）頁面定製css代碼 1.2.增加返回頂部按鈕 （1）頁面定製css代碼 （2）頁首html代碼 1.3.愛心特效（滑鼠點擊頁面） 滑鼠點擊頁面效果： 把下麵代碼複製到公告欄裡面 1.4.公告欄時鐘 公告裡面 1.5.公告欄 ...
  • 代碼調試console對象的花式玩法
    轉自阮一峰http://www.ruanyifeng.com/home.html console.log()，console.info()，console.debug() console.log方法用於在控制台輸出信息。它可以接受一個或多個參數，將它們連接起來輸出。 console.log方法會自動 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類