css小窗口代码 |css 万年历

.drag {
position: fixed;
overflow: hidden;
user-select: none;
cursor: -webkit-grab;
max-height: 100vh;
max-width: 100vw;
z-index: 10;
}
.drag.-resizing:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .3);
z-index: -1;
}
.drag.-resizing {
cursor: -webkit-resize;
transition: opacity .2s ease-in-out;
opacity: .7;
}
.drag.-resizing:hover {
opacity: 1;
}
.drag .x-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.drag .x-window {
background-color: #fff;
position: relative;
height: 100%;
width: 100%;
min-height: 100px;
min-width: 100px;
}
.drag .x-window .x-titlebar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 23px;
background-color: #3c3e42;
}
.drag .x-window .x-close {
position: absolute;
top: 0;
right: 0;
height: 23px;
width: 23px;
line-height: 23px;
text-align: center;
cursor: pointer;
color: #fff;
}
.drag .x-window .x-content {
position: absolute;
top: 23px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

上面的代码中，“drag”类是指窗口可以被鼠标拖动，”-resizing”类是指窗口可以通过拖拽可调整大小，”x-container”类是指窗口的容器，”x-window”类是指窗口的内容。另外，需要设置标题栏（x-titlebar）和关闭按钮（x-close）的样式。

通过上面的代码，大家可以很容易的实现一个漂亮的CSS小窗口效果。