第二十课--案例--导航栏....czli ..czli .......spli .....　　<p>今天，我和几个要好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .sp {
        width: 90%;
        height: 5%;
        background-color: #7f7f7f;
        float: right;
    }

    .cz {
        width: 10%;
        height: 100%;
        float: left;
    }
    .czul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        background-color: #555;
        border: 1px black solid;
        width: 10%;
        height: 100%; /* 全屏高度 */
        position: fixed;
        overflow: auto; /* 如果导航栏选项多，允许滚动 */
    }

    .czli .cza {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }

    .czli .cza:hover {
        background-color: #111;
        color: white;
    }

    .czli {
        text-align: center;
        border-bottom: 1px solid #555;
    }

    .czli:last-child {
        border-bottom: none;
    }

    .active {
        background-color: #4CAF50;
        color: white;
    }

    .spul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px #333 solid;
        background-color: #333;
        position: fixed;
        top: 0;
        width: 90%;
    }

    .spli {
        display: inline;
        float: left;
    }

    .spli .spa:hover {
        background-color: #111;
        color: white;
    }

    .spa {
        display: block;
        width: 60px;
        padding: 8px 16px;
        text-decoration: none;
        color: white;
        text-align: center;
    }

    .spli {
        border-right: 1px solid #bbb;
    }

    .spli:last-child {
        border-right: none;
    }
    .content{
        width: 89%;
        height: 100%;
        float: right;
        margin-top: 2%;
        padding: 10px;
    }
</style>
<body>
<div class="cz">
    <ul class="czul">
        <li class="czli"><a href="#home" class="active cza">主页</a></li>
        <li class="czli"><a href="#news" class="cza">新闻</a></li>
        <li class="czli"><a href="#contact" class="cza">联系</a></li>
        <li class="czli"><a href="#about" class="cza">关于</a></li>
    </ul>
</div>
<div class="sp">
    <ul class="spul">
        <li class="spli"><a href="#home" class=" spa">主页</a></li>
        <li class="spli"><a href="#news" class="spa">新闻</a></li>
        <li class="spli"><a href="#contact" class="spa">联系</a></li>
        <li class="spli" style="float:right"><a href="#about" class="active spa">关于</a></li>
    </ul>
</div>
<div class="content">
    <h1 style="text-align: center">人民公园游玩</h1>
    <h3 style="text-align: center"><span>时间:</span><time>2019-08-04</time><span>作者:</span><span>今天来源:本站投稿</span></h3>
    　　<p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
        <p>今天，我和几个要好的朋友约好到人民公园游玩。</p>
</div>
</body>
</html>