关于Html的导航栏的制作

发布于：2022-05-09 10:00:23  栏目：技术文档

<style>
    ul{/*设置导航栏的框框*/
        margin: 30px auto;
        width: 600px;
        height: 350px;
        padding: 0px;
    }
    ul li{
        list-style-type: none;
        float: left;
    }
    ul>li a{
        display: block;
        width: 100px;
        height: 50px;
        font-family: Microsoft Yahei;
        line-height: 50px;
        background-color: crimson;
        margin: 0px 0px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        font-size: 15px;
    }
    ul>li a:hover {
        background-color: white;
        color:red;
    }
</style>
``````html
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">前言</a></li>
    <li><a href="#">前端</a></li>
    <li><a href="#">后端</a></li>
    <li><a href="#">云计算</a></li>
    <li><a href="#">大数据</a></li>
</ul>

相关推荐