持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第13天,点击查看活动详情
Css我们来实现第一个实例,鼠标hover显示下拉菜单,我们最后要实现的效果如下图所示:
首先放一下所有这次试用的所有html代码:
<div class="div-top">
<div class="box_show">
<img src="./111.png" alt="" style="margin-left:10px;margin-left: 10px;">
</div>
<div class="nav_stacked" >
<ul class="ul_back">
<li class="xiaojian"></li>
<li class="li_style li_style_border">Important</li>
<li class="li_style li_style_border">Promotions</li>
<li class="li_style" >Social</li>
</ul>
</div>
</div>
复制代码
然后,我们从最外层开始解释其中的css样式(class类)
1 :最外层div div-top
/*最外层div*/
.div-top{
margin-left: 100px;
/*相对定位,这个作用是让菜单显示位置相对于最外层的div的位置显示*/
position: relative;
}
复制代码
2 :图片div box_show
/*图片div*/
.box_show{
width:100px;
height:100px;
}
复制代码
这个div的作用其实不在于设置宽高,设置宽高,我可以直接给img标签变成块级元素,给其设置宽高可能来的更实在一点,起码我是这么认为的。
他的作用更多的是用来控制同级兄弟div的样式。

3 :菜单div nav_stacked
/*菜单div*/
.nav_stacked{
/*默认是不显示的*/
display:none;
/*绝对定位显示,相对于最外层的绝对定位显示*/
position: absolute;
/*显示位置*/
top:20px;
left:-20px;
}
/*鼠标滑过,显示(当然这是指他显示出来之后的事情)*/
.nav_stacked:hover
{
display:block;
}
复制代码
4 :图片div的鼠标滑过(hover)事件 box_show:hover
/*增加同级div的class的样式*/
.box_show:hover+.nav_stacked{
display:block;
}
复制代码
这个写法 比较有意思,着重了解一下。
到这一步为止,我们就实现了鼠标hover图片div,显示菜单的功能。如下图所示:
但是现在这个菜单的样式不太好看,我们再继续美化一下菜单的样式
5 :菜单ul ul_back
/*菜单ul的基本样式*/
.ul_back{
/*清除默认样式*/
list-style: none;
/*设置宽度*/
width:100px;
/*背景色*/
background-color: #FFF;
/*边框*/
border:1px solid #E4E4E4;
/*去掉默认左边的空白*/
padding-inline-start:0px;
}
复制代码
设置ul最基础的样式
6 :li部分的样式 li_style li_style_border
/*li标签边框样式,不是没有li都有边框,所以,将其单独拿出*/
.li_style_border{
border-bottom:1px solid #E4E4E4;
}
/*li标签基本样式*/
.li_style{
text-align: center;
padding: 5px;
color:#333333;
}
/*鼠标滑过li的样式*/
.li_style:hover{
background-color: #EBF3FE;
color:#0066FF;
cursor: pointer;
}
复制代码
这里大概说明一下,没个li的样式都不是完全一样的,所以,我将公共样式部分统一写到li_style中,将边框的样式拿出来单写,那个li需要边框,追加上就可以了。
7 :小尖尖角样式:xiaojian
如下图所示:
红框标注位置,有一个小尖尖角,这个使用样式是这样实现的。
/*小尖尖角样式*/
.xiaojian{
background-color:#FFF;
width:10px;
height:10px;
border:1px solid #E4E4E4;
/* 设置相对定位 */
position:relative;
/*显示位置*/
left:43px;
top:-7px;
/*旋转小方块45度*/
transform:rotate(45deg);
/* 去除右、下边框 */
border-right:0px;
border-bottom:0px;
}
复制代码
最终,上边的代码写在一起,就形成了我们最开始想要完成的效果图。
测试使用全部源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background-color: beige;
}
/*去除A标签默认样式*/
a{
text-decoration: none;
}
/*最外层div*/
.div-top{
margin-left: 100px;
/*对定位,这个作用是让菜单显示位置相对于最外层的div的位置显示*/
position: relative;
}
/*图片div*/
.box_show{
width:100px;
height:100px;
}
/*增加同级div的class的样式*/
.box_show:hover+.nav_stacked{
display:block;
}
/*菜单div*/
.nav_stacked{
/*默认是不显示的*/
display:none;
/*绝对定位显示,相对于最外层的绝对定位显示*/
position: absolute;
/*显示位置*/
top:20px;
left:-20px;
}
/*菜单ul的基本样式*/
.ul_back{
/*清除默认样式*/
list-style: none;
/*设置宽度*/
width:100px;
/*背景色*/
background-color: #FFF;
/*边框*/
border:1px solid #E4E4E4;
/*去掉默认左边的空白*/
padding-inline-start:0px;
}
/*鼠标滑过,显示*/
.nav_stacked:hover
{
display:block;
}
/*li标签边框样式,不是没有li都有边框,所以,将其单独拿出*/
.li_style_border{
border-bottom:1px solid #E4E4E4;
}
/*li标签基本样式*/
.li_style{
text-align: center;
padding: 5px;
color:#333333;
}
/*鼠标滑过li的样式*/
.li_style:hover{
background-color: #EBF3FE;
color:#0066FF;
cursor: pointer;
}
/*小尖尖角样式*/
.xiaojian{
background-color:#FFF;
width:10px;
height:10px;
border:1px solid #E4E4E4;
/* 设置相对定位 */
position:relative;
/*显示位置*/
left:43px;
top:-7px;
/*旋转小方块45度*/
transform:rotate(45deg);
/* 去除右、下边框 */
border-right:0px;
border-bottom:0px;
}
</style>
<body>
<div class="div-top">
<div class="box_show">
<img src="./111.png" alt="" style="margin-left:10px;margin-left: 10px;">
</div>
<div class="nav_stacked" >
<ul class="ul_back">
<li class="xiaojian"></li>
<li class="li_style li_style_border">Important</li>
<li class="li_style li_style_border">Promotions</li>
<li class="li_style" >Social</li>
</ul>
</div>
</div>
</body>
</html>
复制代码
文末有实例,可下载。
有好的建议,请在下方输入你的评论。
原文链接:点击这里,走你
欢迎访问个人博客:guanchao.site
欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”