好雨知时节, 当春乃发生。
随风潜入夜, 润物细无声。
好雨知时节, 当春乃发生。
随风潜入夜, 润物细无声。
<div class="pb">
<div class="pb-hd">
<a class="pb-x">✕</a><span>标题</span>
</div>
<div class="pb-bd">
<div class="pb-ct">
<div>好雨知时节, 当春乃发生。</div>
</div>
<div class="pb-ft">
<a class="pb-btn pb-cl">取消</a><a class="pb-btn pb-ok">确定</a>
</div>
</div>
</div>
类名 |
描述 |
.pb{} |
弹出层DIV外框架,可以定义边框、背景、字体等,配合CSS3可以设置圆角边框、阴影等 |
.pb .pb-hd {} |
标题栏样式 |
.pb .pb-x {} |
关闭按钮样式,本例中没有使用任何图片 ,如果你想改变关闭按钮风格,可以自定义。 |
.pb .pb-x:hover {} |
关闭按钮样式鼠标经过样式。 |
.pb .pb-bd {} |
内容区+按钮栏样式,基本保持不变即可。 |
.pb .pb-ct {} |
内容区样式。 |
.pb .pb-ft {} |
按钮栏样式。 |
.pb a.pb-btn {} |
按钮样式。 |
.pb a.pb-ok {} |
确定按钮样式。 |
.pb a.pb-ok:hover {} |
确定按钮鼠标经过样式。 |
.pb a.pb-cl {} |
取消按钮样式。 |
.pb a.pb-cl:hover {} |
取消按钮鼠标经过样式。 |