1.重点了解的是display属性中的 inline-block 值,而在w3cschool文档中没有写这个值
display : inline, 此元素会被你现实为内联元素
display : inline-block ,讲对象呈递为内联对象,旁边的内联对象会被呈递为同一行内,并允许空格;同时它也可以实现浮动布局
以下为提示文本的一个demo源码,来来至 https://www.runoob.com/try/try.php?filename=trycss_tooltip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* 定位 */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
