CSS之使用者介面樣式

2021-09-01 06:32:27 字數 1928 閱讀 1862

所謂的介面樣式, 就是更改一些使用者操作樣式, 比如 更改使用者的滑鼠樣式, 表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制,因此我們就放棄了。 防止表單域拖拽

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

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 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文字域。

右下角可以拖拽:

右下角不可以拖拽:

以前我們講過讓帶有寬度的塊級元素居中對齊,是margin: 0 auto;

以前我們還講過讓文字居中對齊,是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性, 我們的媽媽一直很擔心我們的垂直居中怎麼做。

vertical-align 垂直對齊, 這個看上去很美好的乙個屬性, 實際有著不可捉摸的脾氣,否則我們也不會這麼晚來講解。

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

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

解決的方法就是:

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

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

css使用者介面樣式

css 滑鼠樣式cursor 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 輪廓 outline 是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。outline outlin...

CSS基礎知識總結之使用者介面詳解

前言 day6主要講述了元素的顯示與隱藏及使用者介面 1 元素的顯示與隱藏 目的 讓乙個元素在頁面中顯示或隱藏 1.1 display 顯示 display none 隱藏物件 display block 除了轉換為塊級元素之外,同時還有顯示元素的意思。1.2 visibility 可見性 visi...

css權威指南(13) 使用者介面樣式

系統字型 css2定義了6個系統字型關鍵字,如下 1.caption 由標題控制項使用的字型樣式,如按鈕和下拉控制項 2.icon 作業系統圖表標籤使用的字型樣式,如硬碟驅動器,資料夾和檔案圖示 3.menu 下拉列表和選單列表中文字使用的字型樣式 4.message box 對話方塊中文字使用的字...