博客園（自定義導航欄）
自定義導航欄。javascript
效果以下：css
1.1.自定義導航欄
個人博客皮膚用的是AnotherEon001,假如你的博客用的是其它皮膚，樣式須要本身修改，要想達到同樣的效果，建議也用同款皮膚html
（1）把默認的導航欄給隱藏掉前端
既然咱們想要自定義導航欄，默認的導航欄就不能顯示java
#header{display:none;}
（2）頁首html代碼python
裏面一個ul包含不少div（一個div表明一個分類），div裏面是下拉框（a標籤，裏面是你的博客文章地址），本身能夠隨意增長刪除分類。sql
<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.設置背景圖片
給本身的博客設置一個好看的背景圖片django
（1）首先在設置---->>>相冊裏面添加一張背景圖片flask
（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;
}
相關文章
- 1. 博客園（自定義導航欄）
- 2. ReactNative 自定義導航欄
- 3. iOS-自定義導航欄
- 4. 自定義導航欄1
- 5. 微信小程序自定義的導航欄，用自定義導航欄 ———**navigationStyle:custom**
- 6. 博客園自定義主題樣式
- 7. 自定義博客園我的首頁
- 8. 博客園自定義樣式
- 9. 博客園的自定義皮膚
- 10. 博客園自定義樣式參考
- 更多相關文章...
- • jQuery Mobile 導航欄 - jQuery Mobile 教程
- • 自定義TypeHandler - MyBatis教程
- • RxJava操作符（十）自定義操作符
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 博客園（自定義導航欄）
- 2. ReactNative 自定義導航欄
- 3. iOS-自定義導航欄
- 4. 自定義導航欄1
- 5. 微信小程序自定義的導航欄，用自定義導航欄 ———**navigationStyle:custom**
- 6. 博客園自定義主題樣式
- 7. 自定義博客園我的首頁
- 8. 博客園自定義樣式
- 9. 博客園的自定義皮膚
- 10. 博客園自定義樣式參考