liang14658fox

Appearance

悬停指针 ​

css
/* 小手 */
.buttonStyle {
    cursor: pointer; 
}
/* 禁用 */
div:hover{
	cursor:not-allowed;
}
/* 小手 */
.buttonStyle {
    cursor: pointer; 
}
/* 禁用 */
div:hover{
	cursor:not-allowed;
}
Details
  • 其他样式
  1. default 默认光标(通常是一个箭头)
  2. auto默认。浏览器设置的光标。
  3. crosshair 光标呈现为十字线。
  4. pointer 光标呈现为指示链接的指针(-只手)
  5. move 此光标指示某对象可被移动。
  6. e-resize 此光标指示矩形框的边缘可被向右(东)移动。
  7. ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。
  8. nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
  9. n-resize 此光标指示矩形框的边缘可被向上(北)移动。
  10. se-resize此光标指示矩形框的边缘可被向 下及向右移动(南东)。
  11. sw-resize此光标指示矩形框的边缘可被向 下及向左移动(南西)。
  12. s-resize 此光标指示矩形框的边缘可被向下移动(北西)。
  13. w-resize 此光标指示矩形框的边缘可被向左移动(西)。
  14. text 此光标指示文本。
  15. wait 此光标指示程序正忙(通常是一只表或沙漏)。
  16. help 此光标指示可用的帮助(通常是一个问号或-个气球)。
  • 禁用样式：
  1. not-allowed此光标指示禁止(通常是一个红色的圈加一个斜杠)。
  2. no-drop此光标指示禁止(通常是一个红色的圈加一个斜杠,同17条)。

阻止click点击事件 ​

css禁用鼠标点击事件

css
.abandon {
	pointer-events:none;
}
.abandon {
	pointer-events:none;
}

禁止选中文字 ​

css
.buttonStyle {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.buttonStyle {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

水平/垂直滚动条 ​

css
{
	width:100px;
	overflow-x:auto;
}

{
	height:300px;
	overflow-y:auto;
}
{
	width:100px;
	overflow-x:auto;
}

{
	height:300px;
	overflow-y:auto;
}

抽屉效果 ​

弹出收回特效

css
.show {
    width: 500px;
    overflow: hidden;
    transition: width 0.5s;
}

.hidden {
    width: 0px;
    overflow: hidden;
    transition: width 0.5s;
}
.show {
    width: 500px;
    overflow: hidden;
    transition: width 0.5s;
}

.hidden {
    width: 0px;
    overflow: hidden;
    transition: width 0.5s;
}

DANGER

为了防止盒子内部元素由于容器的坍缩而变形，请给内部盒子设置固定宽度。

保留换行符 ​

css
* {
	white-space: pre-line !important;
}
* {
	white-space: pre-line !important;
}

表格跨行跨列 ​

  • colspan="x" 横跨多少列
  • rowspan="x" 竖跨多少行