html基础之好看的header

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

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

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

html代码：

<div class="header-div">
        <ul class="header-ul">
            <li class="header-li">
                <em><b style="color: white;" id="toubu">我的首页</b></em>

            </li>
            <li class="header-li">
                <a href=""><em>课程</em></a>
                <i class="tagging">热门</i>

            </li>
            <li class="header-li">
                <a class="" href=""><em>江湖</em></a>


            </li>
            <li class="header-li">
                <a class="" href=""><em>专栏</em></a>


            </li>
            <li class="header-li">
                <a class="header-download" href="/download"><em>下载</em></a>
                <script>
                    $(".header-download").mouseover(function(){
                     $(".tanchuang").css("display","block")
                    })
                    $(".header-download").mouseleave(function(){
                     $(".tanchuang").css("display","none")
                    })

                </script>

            </li>
            <li class="header-li">
                <a class="" href="https://www.baidu.com/"><em>导航</em></a>


            </li>
            <div class="land-div">
                <li class="land-li">
                    <a href="land.html" target="_top"><em>登录</em></a>


                </li>
            </div>
        </ul>
    </div>

 <table class="tanchuang" >
        <tr>
            <th>项目</th>
            <th colspan="3">可下载</th>
        </tr>
        <tr>
            <td colspan="4">暂时无法下载哦~</td>
        </tr>
    </table>

 

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