前端炒冷饭：03 垂直导航

垂直导航

效果

前端炒冷饭：03 垂直导航

代码目录：

前端炒冷饭：03 垂直导航

代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新布局</title>
    <link rel="stylesheet" href="../CSSFile/index.css" type="text/css">
</head>
<body>
<ul>
    <li>
        <a href="#" class="actvte">
            <h3>
                新博客
            </h3>
        </a>
    </li>
    <li>
        <a href="#">
            <h3>
                往期博客
            </h3>
        </a>
    </li>
    <li>
        <a href="#">
            <h3>
                日常吐槽
            </h3>
        </a>
    </li>
    <li>
        <a href="#">
            <h3>
                我的歌唱
            </h3>
        </a>
    </li>
</ul>
<div>


    版权声明：本文为博主原创文章，转载请附上博文链接！
</div>
</body>
</html>

CSS代码

body
{
    margin: 0;
}

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f8715f;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li
{
    display: inline;
}

li a
{
    display: block;
    color: #6ca3ff;
    padding: 8px 16px;
    text-decoration: none;
}

li a.header
{
    background-color: #f89cab;
    color: #285cf8;
}

li a.actvte
{
    background-color: #f81c30;
    color: #7643f8;
}

li a:hover:not(.actvte)
{
    background-color: #e2bff8;
    color: #f8e5c4;
}

div
{
    margin-left: 25%;

    padding: 1px 16px;

    height: 1000px;
}

JS代码

/**
 * 无
 */