html如何做一个侧面的导航栏

html如何做一个侧面的导航栏,第1张

你的导航是浮动不随网页上下滚动条移动可以使用:div{ position:fixed; left:0; top:0; width:100px; height:100%;}
如果是跟随内容改动,你的内容区分左右两块,左边写你的导航就可以了

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=10">
    <title>Document</title>
    <style>
        {
            margin:0;
            padding:0;
        }
       ul{
           list-style: none;
           background-color: black;
           color:blanchedalmond;
           width: 100px;
           line-height: 48px;
       }
       li:nth-of-type(2n+1){
        background-color: blue;
       }
       li:hover{
           color: red;
           background-color: yellow;
       }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

 请采纳


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13205170.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-06-20
下一篇 2023-06-20

发表评论

登录后才能评论

评论列表(0条)

保存