html中的下拉列表怎么写,css下拉列表怎么做？

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

使用CSS创建一个鼠标移动上去后显示下拉菜单的效果。

示例：

下拉菜单实例

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

}

.dropdown:hover .dropdown-content {

display: block;

}

鼠标移动后出现下拉菜单

将鼠标移动到指定元素上就能看到下拉菜单。

鼠标移动到我这！

HTML中文网

www.html.cn

效果如下：

实例解析

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。

使用容器元素 (如：

) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用

元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

html中的下拉列表怎么写,css下拉列表怎么做？相关推荐

html中collapse代码怎么写,CSS 面试题: 手写 collapse(折叠) 的 css/html 部分
注意根据@_小白_的建议,用input配合伪类实现效果更好, 我实现了一下, 但是在微信小程序不好使(微信的input标签的type不支持值为checkbox或radio), 所以暂时这个阶段, 处 ...
html5中底部对齐怎么写,css设置元素底部垂直对齐
css中怎么让div里面的文字底部对齐两种办法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. css如何使div里面的文字垂直对齐页面里有五段文字/图片,我想使每个部分的文字,像旁边的图 ...
html中左右浮动怎么写,css 浮动(float)页面布局
[第一步整体布局与公共CSS定义]我们先来分析一下这个页面页面主要分5大块,顶部的Logo.导航条Nav.Banner.Content.Footer,如下图下载 (116.12 KB) 2009 ...
在html中双虚线怎么写,CSS虚线实现方法及多种应用实例
很多 CSS 初学者在前端开发过程中,经常会用到 CSS 虚线样式,但是不知道 CSS 虚线样式该如何实现,比如一个 CSS 这样写:border-style:dotted solid double ...
html中盒子浮动怎么写,CSS盒子的浮动
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用"浮动"方式后,块级元素的表现就会有所不同. CSS中有一个fl ...
html中斜体样式怎么写,css斜体样式怎么写
在css中,可以使用"font-style"属性来实现文字斜体样式,语法"font-style:italic|oblique",其中italic是斜体样式,ob ...
html中版心居中怎么写,CSS 版心和布局
版心(可视区)指网页中的主体内容区域.一般在浏览器中居中显示,显示宽度常见960px,980px,1000px,1200px等. 布局流程确定页面版心分析页面中的行模块,以及每一个行模块中的列模块 ...
html中字体大写怎么写,CSS 字体属性
CSS 字体属性属性描述font简写属性.在一条声明中设置所有字体属性. font-family规定文本的字体系列(字体族). font-size规定文本的字体大小. font-style规定文本的 ...
html中字体行间距怎么写,css行间距(html文字行间距怎么设置)
设置行距是 line-height 例如:line-height:30px; line-height:25px是绝对行高,line-height:2是默认行高的两倍,倍数用的多一些,因为子元素继承父样 ...

html中的下拉列表怎么写,css下拉列表怎么做？

鼠标移动后出现下拉菜单

html中的下拉列表怎么写,css下拉列表怎么做？相关推荐

最新文章

热门文章