vsode (Visual Studio Code) HTML + CSS 实现顶部超链接导航栏

最新推荐文章于 2024-06-21 11:16:58 发布

-熟

最新推荐文章于 2024-06-21 11:16:58 发布

阅读量570

点赞数 13

文章标签： vscode html css

本文链接：https://blog.csdn.net/liye100866/article/details/139022847

版权

vsode (Visual Studio Code) HTML + CSS

参考资料

—————————————————————————————————————————————————————————————————

HTML框架

-创建栏目

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ulfather"> <!-- 创建栏目 -->
        <li class="lifather">
            <h4>一</h4>
        </li>
        <li class="lifather">
            <h4>二</h4>
        </li>
        <li class="lifather">
            <h4>三</h4>
        </li>
        <li class="lifather">
            <h4>四</h4>
        </li>
        <li class="lifather">
            <h4>五</h4>
        </li>
        <li class="lifather">
            <h4>六</h4>
        </li>
        <li class="lifather">
            <h4>七</h4>
        </li>
        <li class="lifather">
            <h4>八</h4>
        </li>
    </ul>
</body>

-vsode (Visual Studio Code) 运行结果

在这里插入图片描述

创建副栏目

-仅展示栏目1，

<li class="lison">修子栏</li>
<li class="lison">修子栏</li>
<li class="lison">修子栏</li>

在这里插入图片描述

CSS 美化

-写之前导入CSS ，href这里写自己CSS的名称

<link rel="stylesheet" type="text/css" href="mystyle.css">

在这里插入图片描述

-先写设置
图床：ImgTP - 免费公共图床

在这里插入图片描述

-写一下子栏效果


.ulson {
    background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明*/
    border-radius: 0px 0px 5px 5px;          /*圆角效果*/
    color: rgb(250, 250, 250);               /*设置字体白色*/
    display: none;                          /*初始状态隐藏*/
 }

.lifather:hover .ulson {
    display: block;                        /*设置点击*/
}