本文介绍了一种使用CSS实现固定在屏幕中央的500px*400px悬浮广告 banner，其具有可点击关闭的按钮。.b-banner 类定义了广告框的样式，包括位置、大小、背景色以及居中方式；.b-bannerimg 类用于设置图片填充整个广告框；.btn-close 类则为关闭按钮提供了样式，包括位置、尺寸、边框、颜色和鼠标悬停效果；而.btn 类则定义了按钮的基本样式。
.b-banner{
position: fixed;
width: 500px;
height: 400px;
background-color: #fff;
left: 50%;
top: 50%;
z-index: 3;
margin-left: -250px;
margin-top: -200px;
}
.b-banner img{
width: 100%;
height: 100%;
}
.btn-close{
position: absolute;
top: -16px;
right: -16px;
height: 25px;
width:25px;
line-height: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
text-align: center;
font-size: 16px;
z-index: 5;
color: #fff;
background-color: #cfcfcf;
cursor: pointer;
}
.btn{
text-align: center;
cursor: pointer;
display:block;
background-color: #fff;
}
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
