CSS高階技巧

1.滑鼠樣式cursor

設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。

cursor : default 小白 | pointer 小手 | move 移動 | text 文字

2.溢位的文字隱藏

word­break:自動換行

white­space設定或檢索物件內文字顯示方式。通常我們使用於強制一行顯示內容

normal : 預設處理方式

nowrap : 強制在同一行內顯示所有文字，直到文字結束或者遭遇br標籤物件才換行。

3.text­overflow 文字溢位

text­overflow : clip | ellipsis

設定或檢索是否使用乙個省略標記（…）標示物件內文字的溢位

clip : 不顯示省略標記（…），而是簡單的裁切

ellipsis : 當物件內文字溢位時顯示省略標記（…）

注意一定要首先強制一行內顯示，再次和overflow屬性 搭配使用

* 第一步，強制顯示在一行white-space: nowrap;第二步，超出盒子的內容隱藏overflow: hidden;第三步，物件內文字溢位時顯示省略標記text-overflow: ellipsis;

CSS高階技巧

所謂的介面樣式，就是更改一些使用者操作樣式，比如 更改使用者的滑鼠樣式，表單輪廓.防止表單域拖拽等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制。設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 ...

CSS高階技巧

在css中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。他們的主要目的是讓乙個元素在頁面中消失，但是不在文件原始碼中刪除。display 顯示 display 設定或檢索物件是否及如何顯示。display none 隱藏物件 與...

CSS高階技巧

css高階技巧 注釋快捷鍵ctrl 1.精靈圖 為了有效減少伺服器接收和傳送請求的次數，提高頁面 的載入速度。使用精靈圖核心 主要針對背景使用，把多個小背景整合到一張大中。這個大也叫sprites 精靈圖 或者 雪碧圖。移動背景位置，此時可以使用background position.移動的距離就是...