博客园主题
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>