1. 鼠标箭头变成小手样式; <div style="cursor:pointer;"></div>
2. DIV的高度固定,当超出固定高度时,出现自动滚动条;
style { width:980px; height:100px; line-height:100px; overflow:auto; overflow-x:hidden; }
3. html点击子元素事件而不触发父元素的点击事件; e.stopPropagation();
4. 设置table中的宽度不随文字改变让其固定; width:100px;height:25px;
word-wrap: break-word;自动换行;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;超出内容设为隐藏,并且用省略号代替;
overflow-x:hidden; overflow-y:hidden; 超过宽度和高度文字会自动隐藏 ;
5. css网格背景; 参考:https://www.jianshu.com/p/88c24110e88e
height: 300px; width: 300px; background:#58a; background-image: linear-gradient(white 2px,transparent 0), linear-gradient(90deg, white 2px,transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0), linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0); background-size:75px 75px,75px 75px,15px 15px,15px 15px;
6. css3 box-shadow阴影; 参考: https://www.cnblogs.com/wuchuanlong/p/5980766.html
box-shadow:-10px 0px 10px red, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue;" /*下边阴影*/
外阴影: box-shadow: 0 0 10px #f00;
内阴影: box-shadow: 0px 0px 10px red inset;
7. 网页整体缩放; transform: scale(0.8);
8. 删除div里的内容(将div的innerHTML置为空):
假设有如下的html片段:
<div id="test">这是要删除的内容,还要保留test本身</div>
1. 原生js方式:
document.getElementById('test').innerHTML = '';
2. jQuery方式:
$('#test').empty(); //jQuery方法一
$('#test').html(''); //jQuery方法二