下拉菜单展示
触碰之前样式如下:
触碰之后会有一个下拉菜单,菜单里可以包含包括文字、链接、图片等,且设置了各种样式。
重要代码展示
.drop {
/* border: 1px solid black;
width: 200px;
height: 200px; */
position: relative;
display: inline;
}
.dropbtn {
/* 字体颜色 */
color: white;
background-color: blueviolet;
font-size: 18px;
width: 100px;
height: 100px;
border: none;
cursor: pointer;
}
.drop:hover .dropbtn {
background-color: #3e8e41;
}
.dropcontent {
display: none;
position: absolute;
font-size: 20px;
/* 按照按钮长度设置的,也可以大一点 */
min-width: 100px;
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
}
.drop:hover .dropcontent {
display: block;
}
.dropbtn:hover .dropcontent {
background-color: aquamarine;
}
/* .dropcontent:hover {
background-color: gray;
} */
.dropcontent a {
text-decoration: none;
display: block;
min-height: 30px;
}
.dropcontent a:hover {
color: #3e8e41;
background-color: gainsboro;
}
.dropcontent img {
object-fit: cover;
width: 100px;
}
<div class="drop">
<button class="dropbtn">下拉菜单</button>
<div class="dropcontent">
<span>内容1</span>
<a href="drop.html">链接1</a>
<a href="drop.html">链接2</a>
<a href="drop.html">链接3</a>
<img src="/images/haoyue.jpg">
</div>
以上代码有以下注意点
cursor属性
设置鼠标样式
cursor: pointer;
就是设置成下面这个小手
更多具体样式可以看这个博主的:
cursor鼠标样式大全
position
position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。
-
默认值是
static
,表示没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 -
absolute
:生成绝对定位的元素,相对于static
定位以外的第一个父元素进行定位。(元素将依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。比如本代码中drop
已经作了定位)
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 -
relative
:生成相对定位的元素,相对于其正常位置进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 -
fixed
:生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
根据以上代码,将.dropcontent
的position: absolute;
注释掉后,会导致下拉菜单内容不再以绝对定位的方式显示在按钮下方,而是按照普通流布局显示在按钮下面。这意味着下拉菜单内容将会占据文档流中的一定空间,可能会影响其他元素的布局。
在这段代码中,.drop
的position: relative;
用于创建一个相对定位的容器,而.dropcontent
的position: absolute;
用于创建一个绝对定位的菜单内容。当菜单内容的position
属性为absolute
时,它的位置相对于最近的具有定位属性(非static
)的父元素进行定位,这里的父元素就是.drop
。
display
很重要,在day2中介绍过一个案例。
day2 盒子模型和块内元素转换问题
box-shadow
也在以上链接。
由以上设计可以联想到将其制作成导航栏,比如实现这样的效果:
纯属记录个人学习,学艺不精,欢迎指正批评。