当先锋百科网

首页 1 2 3 4 5 6 7

CSS仿iOS弹出框是一种常用的UI设计,它在网页中模拟iOS设备上的提示框,给用户带来良好的使用体验。下面是一段具体的CSS代码:

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
z-index: 999;
padding: 20px;
}
.popup .title {
font-size: 20px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.popup .content {
font-size: 16px;
line-height: 1.5;
text-align: center;
margin-bottom: 20px;
}
.popup .btn-box {
display: flex;
justify-content: center;
}
.popup .btn-box button {
background-color: #007aff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin: 0 10px;
cursor: pointer;
outline: none;
}
.popup .btn-box button:hover {
background-color: #0066cc;
}

这段代码定义了一个类名为popup的元素,它的样式包括位置、大小、背景色、边框效果等。其中,将该元素固定在页面中央,使用了经典的transfrom和top、left属性组合方式。该元素下有三个子元素,分别对应标题、内容和按钮区域。这些子元素的文字样式和布局也都通过相应的CSS样式属性来实现。