设置弹出层样式

最新推荐文章于 2023-07-19 16:36:34 发布

中情

最新推荐文章于 2023-07-19 16:36:34 发布

阅读量539

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>弹出层样式</title>

<style>
figure {
width:144px; /*图片盒子宽度*/
height:153px; /*图片盒子高度*/
margin:20px 20px; /*图片盒子间距*/
border:1px solid #666; /*图片边框*/
position:relative; /*为弹出层提供定位上下文*/
float:left; /*让图片并排显示*/
}
img {display:block;} /*去掉图片下方的基线空白*/
figcaption {
display:none; /*隐藏弹出层*/
position:absolute; /*相对于容器（图片）定位*/
left:74%; top:14px; /*把弹出层放到图片右侧*/
width:130px; /*弹出层宽度*/
padding:10px; /*弹出层内边距*/
background:#f2eaea;
border:3px solid red;
border-radius:6px;
}
figure:hover figcaption {display:block;z-index:2} /*鼠标悬停在图片上时显示弹出层*/
figcaption h3 { /*弹出层的内容*/
font-size:14px;
color:#666;
margin-bottom:6px;
}
figcaption a { /*弹出层的内容*/
display:block;
text-decoration:none;
font-size:12px;
color:#000;

}

figcaption::after { /*红色三角形的盒子*/
content:""; /*需要有内容，这里是一个空字符串*/
position:absolute; /*相对于弹出层定位*/
border:12px solid;
border-color:transparent red transparent transparent;
right:100%; top:17px; /*相对于盒子边框定位三角形*/
height:0px; width:0px; /*收缩边框创造三角形*/
}

</style>
</head>
<body>
<figure>
<img src="/images/0.jpg" alt="pink heels" />
<figcaption>
<h3>Pink Platforms</h3>
<a href="#">More info</a>
</figcaption>
</figure>
<figure class="click_me">
<img src="/images/1.jpg" alt="leopard heels" />
<figcaption>
<h3>Leopard Platforms</h3>
<a href="#">More info</a>
</figcaption>
</figure>
<figure class="click_me">
<img src="/images/2.jpg" alt="red heels" />
<figcaption>
<h3>Red Platforms</h3>
<a href="#">More info</a>
</figcaption>
</figure>
</body>
</html>

中情

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
设置弹出层样式

弹出层样式 figure { width:144px; /*图片盒子宽度*/ height:153px; /*图片盒子高度*/ margin:20px 20px; /*图片盒子间距*/ border:1px solid #666; /*图片边框*/ position:relative; /*为弹出层提供定位上下文*/
复制链接

扫一扫