html做一个好看的按钮下拉列表

àì夳堔傛蜴生んèń 2022-11-12 04:27 192阅读 0赞

# html做一个好看的按钮下拉列表 #

--------------------

![在这里插入图片描述][20210322222357242.gif]

--------------------

![在这里插入图片描述][20210322222447574.png]

<!DOCTYPE html>
    <html>
    <head>
    <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; border-radius:25px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow:5px 8px 10px 2px #888888; border-radius:25px; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style>
    </head>
    <body>
    
    <h1>下拉菜单</h1>
    
    <p>请把鼠标移到按钮上，以打开下拉菜单。</p>
    
    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
      <a href="https://blog.csdn.net/XRTONY?orderby=ViewCount">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </div>
    
    <p><b>Note:</b>我们的测试链接用了 href="#"。真实的网站会用 URL。</p>
    
    </body>
    </html>

![在这里插入图片描述][20210322222443468.png]

[20210322222357242.gif]: /images/20221022/ec5bc3b7adc64429882ab0ace7a47951.png
[20210322222447574.png]: /images/20221022/0b719ef84d224a3b85b86ac3d0c2cd7a.png
[20210322222443468.png]: https://img-blog.csdnimg.cn/20210322222443468.png

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 Html 单选按钮多选按钮下拉列表

![20200611185106301.PNG][] <form action="" method="get"> 姓名：<input type="te

比眉伴天荒/ 2023年02月17日 03:18/ 0 赞/ 15 阅读

相关 html做下拉列表效果

html做下拉列表效果文章目录 html做下拉列表效果 ![在这里插入图片描述][20210323223705390.gif] ------------

╰+哭是因爲堅強的太久メ/ 2022年11月12日 10:59/ 0 赞/ 213 阅读

相关 html做一个好看的按钮下拉列表

html做一个好看的按钮下拉列表 -------------------- ![在这里插入图片描述][20210322222357242.gif] ---------

àì夳堔傛蜴生んèń/ 2022年11月12日 04:27/ 0 赞/ 193 阅读

相关一个好看的按钮点击特效

.home-more-p { width: 114px; height: 44px; background

不念不忘少年蓝@/ 2022年10月06日 05:45/ 0 赞/ 256 阅读

相关 html 下拉列表的点击事件

select 事件是注册在自己标签上的，不是onclick，而是onchang [view ][view] [cop][view]<select onchange="fun

超、凢脫俗/ 2022年06月08日 03:14/ 0 赞/ 718 阅读

相关 HTML下拉列表select的应用场景

最新更新时间：2019年1月30日17:50:17 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：下拉列表应用场景概述

谁践踏了优雅/ 2022年03月21日 04:57/ 0 赞/ 371 阅读

相关自己封装一个下拉列表

// html: <header> <oSelect @changeOption="onChangeOption" :select

野性酷女/ 2021年11月23日 11:46/ 0 赞/ 329 阅读

相关 HTML中的下拉列表 select

HTML中的下拉列表： Html代码 ![收藏代码][icon_star.png] 1. <select> 2. <option value ="1

Dear 丶/ 2021年09月25日 16:08/ 0 赞/ 563 阅读

相关好看的按钮集合HTML + CSS各种好看按钮组件

展示效果 \[注意:\]并不是单纯的效果，而是有动画的 ![展示的效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

深藏阁楼爱情的钟/ 2021年09月21日 22:08/ 1 赞/ 1372 阅读

相关 HTML select 下拉列表

select 下拉列表由 `< select>` 和 `< option>` 标签配合使用生成。下拉列表控件提供可供选择的项，可以选中其中的一项或者多项。

小灰灰/ 2020年05月16日 17:43/ 0 赞/ 908 阅读