博客園主題

1、CSS 樣式

body { 
     background-color: #efefef;
    background-image:url(https://raw.githubusercontent.com/hj1933/img/master/iimg/SainteVictoireCezanneBirthday_ZH-CN8216109812_1920x1080.jpg
); 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-position: center 0; 
     background-size: cover; 
    padding-top:0px;
  }

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


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

#test33 .dropdown .dropbtn{
	color: white;
	font-size: 14px;
        text-decoration: none;
}

#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;
}

2、HTML

	


	<p style="text-align: center; font-size: 35px; margin-bottom: 19px; margin-top: 20px; opacity: 0.5">Hubery_Jun</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="opacity: 0.2; font-size: 18px">博客園</span></a>
        <div class="dropdown-content">
        </div>
      </div> 

<div class="dropdown">
      <a href="https://www.cnblogs.com/midworld/" 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="https://www.cnblogs.com/midworld/category/1327548.html">1.Python基礎</a>
        <a class="menu" href="https://www.cnblogs.com/midworld/category/1487990.html">2.python進階</a>
            <a class="menu" href="https://www.cnblogs.com/midworld/category/1410563.html">3.Django基礎</a>
              <a class="menu" href="https://www.cnblogs.com/midworld/category/1487989.html">4.Django項目</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1488017.html">5.REST framework</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1327552.html">6.Linux 基礎</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1327550.html">7.前端</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1487981.html">8.數據庫</a>
          
          
           <a class="menu" href="https://www.cnblogs.com/midworld/category/1474063.html" target="_Blank">9.算法</a>
           <a class="menu" href="https://www.cnblogs.com/midworld/category/1327555.html" target="_Blank">10.爬蟲</a>
           <a class="menu" href="https://www.cnblogs.com/midworld/category/1420892.html">11.日常錯誤集錦</a>
        </div>
      </div> 


        <div class="dropdown">
      <a href="#" class="dropbtn">Flask基礎</a>
       <div class="dropdown-content">
        <a class="menu" href="https://www.cnblogs.com/midworld/p/11075990.html" target="_Blank">1.Flask 入門（第一篇）</a>
            <a class="menu" href="https://www.cnblogs.com/midworld/p/11075995.html" target="_Blank">2.Flask 入門（第二篇）</a>
              <a class="menu" href="https://www.cnblogs.com/midworld/p/11076008.html" target="_Blank">3.Flask 入門（第三篇）</a>
     
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1488014.html" target="_Blank">更多</a>
        </div>

        </div> 

         <div class="dropdown">
      <a href="#" class="dropbtn">Tornado基礎</a>
      
      	 <div class="dropdown-content">
        <a class="menu" href="https://www.cnblogs.com/midworld/category/1488016.htmll" target="_Blank">1.Tornado基礎</a>
     
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1488016.html" target="_Blank">更多</a>
        </div>
        </div> 



      <div class="dropdown">
      <a href="#" class="dropbtn">Python基礎</a>
        <div class="dropdown-content">
        <a class="menu" href="https://www.cnblogs.com/midworld/p/9917749.html" target="_Blank">1.初識Python</a>
            <a class="menu" href="https://www.cnblogs.com/midworld/p/9917810.html" target="_Blank">2.基本數據類型（一）</a>
              <a class="menu" href="https://www.cnblogs.com/midworld/p/10270047.html" target="_Blank">3.分支循環</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/10268355.html" target="_Blank">4.函數</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/10271228.html" target="_Blank">5.文件處理</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/10471590.html" target="_Blank">6.Python 推導式</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1327548.html" target="_Blank">更多</a>
        </div>
      </div>   





        <div class="dropdown">
      <a href="#" class="dropbtn">Django基礎</a>
        <div class="dropdown-content">
        <a class="menu" href="https://www.cnblogs.com/midworld/p/10467998.html" target="_Blank">1.第一個 Django 應用</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/11002829.html" target="_Blank">2.Django 之 logging</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/10992027.html" target="_Blank">3.Django 之 auth 模塊</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/10991994.html" target="_Blank">4.Django 之 JsonResponse 對象</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/10992000.html" target="_Blank">5.Django 之裝飾器實現登錄認證</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/10992005.html" target="_Blank">6.部署</a>
        
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1410563.html" target="_Blank">更多</a>
        </div>
      </div> 





        <div class="dropdown">
      <a href="#" class="dropbtn">Django項目相關</a>
        <div class="dropdown-content">
          <a class="menu" href="https://www.cnblogs.com/midworld/p/11076046.html" target="_Blank">1.CRM</a>
        <a class="menu" href="https://www.cnblogs.com/midworld/p/11076071.html" target="_Blank">2.堡壘機</a>
    	<a class="menu" href="https://www.cnblogs.com/midworld/p/11076065.html" target="_Blank">3.kingadmin</a>
    	<a class="menu" href="https://www.cnblogs.com/midworld/p/11076074.html" target="_Blank">4.通用權限框架
</a>

          <a class="menu" href="https://www.cnblogs.com/midworld/category/1487989.html" target="_Blank">更多</a>
        </div>
      </div> 
    



         <div class="dropdown">
      <a href="#" class="dropbtn">Python進階</a>
        <div class="dropdown-content">
        <a class="menu" href="https://www.cnblogs.com/midworld/p/10301472.html" target="_Blank">1.面向對象</a>
         <a class="menu" href="https://www.cnblogs.com/midworld/p/10301475.html" target="_Blank">2.面向對象進階</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/p/10301463.html" target="_Blank">3.裝飾器詳解</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1487991.html" target="_Blank">4.Python模塊</a>
           <a class="menu" href="https://www.cnblogs.com/midworld/category/1487990.html" target="_Blank">更多</a>
         
        </div>
      </div> 
        

        <div class="dropdown">
      <a href="#" class="dropbtn">Python爬蟲</a>
        <div class="dropdown-content">
        <a class="menu" href="https://www.cnblogs.com/midworld/category/1327555.html" target="_Blank">1.requests 庫</a>
           
        </div>
      </div> 

       
         <div class="dropdown">
      <a href="#" class="dropbtn">前端基礎</a>
        <div class="dropdown-content">
        <a class="menu" href="https://www.cnblogs.com/midworld/category/1327550.html" target="_Blank">1.HTML</a>
            <a class="menu" href="https://www.cnblogs.com/midworld/category/1327551.html" target="_Blank">2.CSS</a>
              <a class="menu" href="https://www.cnblogs.com/midworld/category/1327549.html" target="_Blank">3.Javascript</a>
          <a class="menu" href="https://www.cnblogs.com/midworld/category/1462105.html" target="_Blank">4.Jquery</a>
        </div>
      </div> 

      


    </ul>
  </div>