CSS高階技巧

2021-09-19 17:27:50 字數 1613 閱讀 9804

所謂的介面樣式, 就是更改一些使用者操作樣式, 比如 更改使用者的滑鼠樣式, 表單輪廓.防止表單域拖拽等。

但是比如滾動條的樣式改動受到了很多瀏覽器的抵制。

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

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

滑鼠放我身上檢視效果哦:

>

style

="cursor

:default

">

我是小白li

>

style

="cursor

:pointer

">

我是小手li

>

style

="cursor

:move

">

我是移動li

>

style

="cursor

:text

">

我是文字li

>

ul>

盡量不要用hand 因為 火狐不支援 pointer ie6以上都支援的盡量用

是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

但是我們都不關心可以設定多少,我們平時都是去掉的。

最直接的寫法是 : outline: 0; 或者 outline: none;

type

="text"

style

="outline

: 0;

"/>

resize:none這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文字域。

右下角不可以拖拽:

設定或檢索物件內容的垂直對其方式。

vertical-align 垂直對齊, 這個看上去很美好的乙個屬性, 實際有著不可捉摸的脾氣,

vertical-align 不影響塊級元素中的內容對齊,它只針對於 行內元素或者行內塊元素,特別是行內塊元素,通常用來控制/表單與文字的對齊

模式基線對齊

vertical-align: baseline;

垂直居中

vertical-align: middle;

頂部對齊

vertical-align: top;

我們可以通過vertical-align 控制和文字的垂直關係了。 預設的會和文字基線對齊。

解決的方法就是:

給img vertical-align:middle | top等等。 讓不要和基線對齊。

img

給img 新增 display:block; 轉換為塊級元素就不會存在問題了。

CSS高階技巧

1.滑鼠樣式cursor 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 2.溢位的文字隱藏 word break 自動換行 white space設定或檢索物件內文字顯示方式。通常我們使用於強制...

CSS高階技巧

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

CSS高階技巧

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