JFW日常總結 -- html + css 篇

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);