在编写网页时,对话框是一种常见的UI元素。在CSS中,可以通过一些属性和样式来设置对话框,使其更符合我们的需求。接下来,我们就来了解一下如何设置对话框吧。首先,我们需要确定对话框的尺寸和位置。设置对话
div.dialog { width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f0f0f0; border: 1px solid #999; box-shadow: 2px 2px 5px #aaa; padding: 10px; }
/* 鼠标经过对话框时,改变背景颜色 */ div.dialog:hover { background-color: #ccc; } /* 点击对话框外部时,隐藏对话框 */ div.dialog:target { display: none; } /* 模拟对话框内出现的"确认"和"取消"按钮 */ div.dialog button { border: none; padding: 5px 10px; margin-right: 10px; background-color: #ddd; cursor: pointer; } div.dialog button:hover { background-color: #ccc; } div.dialog button.primary { background-color: #007bff; color: #fff; } div.dialog button.primary:hover { background-color: #0069d9; }
div.dialog { z-index: 999; } body { position: relative; }
粉丝
0
关注
0
收藏
0