您的位置：首页 > Web前端 > CSS

设置弹出层样式

2016-07-11 16:39 330 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航