陈表达学html-弹出显示下拉菜单-窗口案例

最新推荐文章于 2024-07-06 14:43:30 发布

Excel_VBA创维大表格จุ๊บ

最新推荐文章于 2024-07-06 14:43:30 发布

阅读量940

点赞数

分类专栏： HTML+css+js+vue 网页网站设计 vsto插件开发文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44681501/article/details/128281966

版权

vsto插件开发同时被 3 个专栏收录

42 篇文章 12 订阅

订阅专栏

HTML+css+js+vue

7 篇文章 1 订阅

订阅专栏

网页网站设计

3 篇文章 0 订阅

订阅专栏

没按下按钮前

按下按钮后

直接复制拿走

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    #导航栏{border: 1px solid red;border-radius: 5px;background-color: powderblue;flex-direction: row;height: 30px;line-height: 30px;margin-right: 55px;z-index: 1}
    #导航栏:active + #弹窗{display: block;}
    #弹窗{display: none;background-color: lightgrey;border-radius: 15px;height: 270px;width: 100px;overflow: hidden}
    span{z-index: 2}
    select{width: 80%;height: 30px;border-radius: 5px}
    img{height: 55px;width: 55px;border-radius: 50%}

</style>
<body>



<div id="导航栏">
    <span id="pages1">主页</span>
    <span id="pages2">商品分类</span>
    <span id="pages3">下载</span>
    <span id="pages4">学习</span>
    <span id="pages5">课程</span>
    <button>显示</button>
</div>

<div id="弹窗">
    <img src="https://p0.ssl.img.360kuai.com/t01250d21a5195f9f0a.webp" alt="刘备">
    <p>个人资料</p>
    <p>消息通知</p>
    <p>我的收藏</p>
    <p>系统设置</p>
    <select>
        <option>钱包管理</option>
        <option>账号管理</option>
        <option>设备管理</option>
    </select>
</div>


</body>
</html>