侧边导航栏

最新推荐文章于 2024-07-16 17:18:30 发布

懒猫学it

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量43

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_72474479/article/details/131790745

版权

<body>
    <div class="box">
        <ul class="tip">
            <li class="nav">主播
                <ul>
                    <li>熊猫</li>
                    <li>狗熊</li>
                    <li>傻狗</li>
                    <li>老丈人</li>
                </ul>
            </li>
            <li class="nav">点赞数量
                <ul>
                    <li>4879</li>
                    <li>6512</li>
                    <li>8451</li>
                    <li>7894</li>
                </ul>
            </li>
            <li class="nav">粉丝数量
                <ul>
                    <li>100w</li>
                    <li>30w</li>
                    <li>500w</li>
                    <li>10w</li>
                </ul>
            </li>
            <li class="nav">直播时间
                <ul>
                    <li>晚7:00</li>
                    <li>晚8:00</li>
                    <li>上午11:30</li>
                    <li>下午14:00</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

    <title>主播信息</title>
    <style>
        *{
            /* 去除页面边距 */
            padding: 0;
            margin: 0;
        }
        body {
            height: 100vh;
            /* 弹性布局 */
            display: flex;

        }
        .box{
            text-align: center;
            /* 设置导航栏的大小 */
            width: 400px;
            height: 100%;
        }
        .tip{
            /* 设置导航栏里的大小 */
            display: inline-block;
            text-align: left;
            width: 180px;
            height: 320px; 
            /* 固定在页面位置，随页面滑动不更改位置 */
            position: fixed;
            /* 距离顶部高度 */
            top: 25%;
            /* 设置深度，可自行选择，以便之后添加其他内容 */
            z-index: 2;
        }
        .box .tip li{
            width: 180px;
            height: 80px;
            line-height: 80px;
            /* 左右居中 */
            text-align: center;
            /* 去除点 */
            list-style: none;
            /* 设置字体大小 */
            font-size: 18px;
            /* 去浮动，成为块级元素 */
            float: left;
            /* 鼠标形状 */
            cursor: pointer;
            /* 圆角，美观 */
            border-radius: 0px 15px 15px 0px;
            /* 背景颜色 */
            background-color: snow;
            /* 深度 */
            z-index: 2;
            /* 阴影效果 */
            box-shadow: 0px 5px 5px 0px rgb(255, 119, 0);
        }
        .box .tip .nav:hover{
            /* 鼠标悬停颜色变化 */
            background-color: rgb(255, 0, 255);
        }
        .box .tip li ul{
            /* 绝对定位，方便更改位置 */
            position: absolute;
            width: 180px;
            height: 320px;
            left: 0px;
            top: 0px;
            /* 去浮动，成为块级元素 */
            float: left;
            z-index: -1;
            /* 阴影 */
            box-shadow: 0px 5px 5px 0px rgb(0, 0, 0);
        }
        .box .tip .nav:hover ul {
            left: 150px;
            /* 效果完成时间 */
            transition: .6s;
            /* 阴影 */
            box-shadow: 0px 5px 5px 0px rgb(0, 0, 0);
        }
        .box .tip li ul li{
            /* 每行大小 */
            width: 180px;
            height: 80px;
            background-color: rgba(197, 235, 248, 0.549);
            border-radius: 0px 15px 15px 0px;
        }
        .box .tip li ul li:hover{
            background-color: rgba(190, 237, 151, 0.384);
            transition: .3s;
            /* 鼠标悬停效果 */
            cursor: pointer;
        }
        /* logo设置 */
        .word{
            position: relative;
            top: 40%;
            left: 20%;
            font-size: 30px;
            width: 300px;
            height: 100px;
            box-shadow: 15px 15px 10px 0px rgb(0, 0, 0);
            text-align: center;
            line-height: 100px;
            border-radius: 30px 10px 30px 10px;
        }
    </style>