html基础之好看的header

自己编写了一个适用的header（仅用于学习），部分运用了JQ（可以有弹窗table，可以自己设计），运用JQ可以自己下载或者运用在线的JQ

这是我用的在线JQ的链接放在这了：

html代码：

        

            

                我的首页

            
            

                课程
                热门

            
            

                江湖


            
            

                专栏


            
            

                下载
                

            
            

                导航


            
            

                

                    登录


                
            
        
    

 

        

            
项目
            
可下载
        
        

            
暂时无法下载哦~
        
    

 

css代码：

a:hover{
   color: rgb(10, 10, 10);
}
a{
   text-decoration: none;
   color:white;
}
.header-div{
   width: 1408px;
   height: 20px;
   padding: 8px 16px;
   background-color:  rgb(0 0 0 / 73%);
   border-radius: 10px;
}
.tagging{
   font-size: 3px;
    width: 24px;
    height: 16px;
    color: #fdfcfc;
    background-color: red;
    padding: 0px 6px;
    border-radius: 20px ;
    border: 1px;
    position: absolute;
    top: 11px;

}
.header-ul{
   margin-block-start: 0px;
    margin-block-end: 0px;
   width: 1408px;
   height: 20px;
   overflow: hidden;
   white-space: nowrap;
   padding: 0%;
}

.header-li{
   list-style: none;
   float: left;
   margin-left: 20px;
   width: 100px; 
}

.land-li{
   list-style: none;
   float: right;
   padding-right: 30px;
}
.tanchuang{
   border: 1px solid black;
   border-spacing: 0px;
   border-collapse: collapse;
   position: relative;
   left: 480px;
   top: 0px;
   display: none;
   width: 99px;
 
}
td,th{
   border: 1px solid black;
   text-align: center;
   
}