CSS-实现导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: skyblue;
    }

    li {
        float: left;
        border: 1px solid black;
    }

    li a {
        display: block;
        color: #666;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover:not(.active) {
        background-color: #ddd;
    }

    li a.active {
        color: white;
        background-color: #4CAF50;
    }
</style>
</style>

<body>

    <ul>
        <li>
            <a href="#home">首页</a>
        </li>
        <li>
            <a href="#news">工作台</a>
        </li>
        <li>
            <a href="#contact">教学资源</a>
        </li>
        <li>
            <a href="#about">博思课程</a>
        </li>
        <li>
            <a href="#about">报表中心</a>
        </li>

        <li>
            <a href="#about">直播</a>
        </li>

        <li>
            <a href="#about">社区</a>
        </li>
    </ul>



</body>

</html>

实现效果:
在这里插入图片描述

你可能感兴趣的:(前端知识,css,前端,javascript)