博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

在上一篇博客中已经介绍了 自动生成目录、返回顶部、爱心特效、添加github图标、扩大和缩小、设置签名、添加分享和推荐反对功能,这一篇介绍怎么自定义导航栏。

 效果如下:

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;

}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

转--在学Go语言

开始学点儿Go语言,这语言据说在国内比在国外火,社区上褒贬不一,不过“小马过河”嘛,总要先自己试试再来下结论。 环境准备: 1.在Golang中国下载安装go语...

4257
来自专栏糊一笑

移动端效果之ScrollList

写在前面 列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll,但是IScroll...

2816
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Weight Tracker

课程内容 Ø Charts & Graphs     你平时关注自己的体重吗?Weight Tracker使得你可以随时跟踪自己的体重,并且提供几种体重发展趋...

2008
来自专栏nimomeng的自我进阶

Event官方文档

当系统传递一个touch event,首先会send到一个特定的view。对于touch view来讲,这个view就是被hitTest:withEve...

1252
来自专栏向治洪

iOS开发入门笔记

iOS开发入门笔记 本文面向已有其它语言(如Java,C,PHP,Javascript)编程经验的iOS开发初学者,初衷在于让我的同事一小时内了解如何开始开发i...

4606
来自专栏我的博客

JQuery表格表单操作

1、多选框应用代码示例 <form action=”#” method=”post”> 你喜欢的明星是?<br /> <input type=”checkbox...

3074
来自专栏张善友的专栏

在OpenOffice.org和微软Office之间共享文档

原文:Sharing files between OpenOffice.org and Microsoft Office。翻译可能也比较随意。 本文版权请向原文...

2167
来自专栏青玉伏案

iOS开发针对对Masonry下的FPS优化讨论

今天博客的内容就系统的讨论一下Masonry对FSP的影响,以及如何更好的使用Masonry。如果你对iOS开发足够熟悉的话,那么对Masonry框架应该不陌生...

2616
来自专栏Python中文社区

用Python爬取东方财富网上市公司财务报表

摘要: 现在很多网页都采取JavaScript进行动态渲染,其中包括Ajax技术。有的网页虽然也用Ajax技术,但接口参数可能是加密的无法直接获得,比如淘宝;有...

1.6K3
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生(套打报表)

6月27日京东商城发布了中国电子商务领域首张电子发票,同时宣布相关系统正式上线,这标志着中国电子商务的步伐又向前迈出了重要的一步。目前“电子发票”覆盖的服务范围...

27410

扫码关注云+社区

领取腾讯云代金券