layui 學習02 全域性樣式

2022-03-24 22:26:32 字數 3125 閱讀 1559

css內建公共基礎類

類名(class)

說明布局

layui-main

用於設定乙個寬度為 1140px 的水平居中塊(無響應式)

layui-inline

用於將標籤設為內聯塊狀元素

layui-box

用於排除一些ui框架(如bootstrap)強制將全部元素設為box-sizing: border-box所引發的尺寸偏差

layui-clear

用於消除浮動(一般不怎麼常用,因為layui幾乎沒用到浮動)

輔助layui-icon

用於圖示

layui-elip

用於單行文字溢位省略

layui-unselect

用於遮蔽選中

layui-disabled

用於設定元素不可點選狀態

layui-circle

用於設定元素為圓形

layui-show

用於顯示塊狀元素

layui-hide

用於隱藏元素

文字layui-text

定義一段文字區域(如文章),該區域內的特殊標籤(如a、li、em等)將會進行相應處理

layui-word-aux

灰色標註性文字,左右會有間隔

背景色layui-bg-red

用於設定元素赤色背景

layui-bg-orange

用於設定元素橙色背景

layui-bg-green

用於設定元素墨綠色背景(主色調)

layui-bg-cyan

用於設定元素藏青色背景

layui-bg-blue

用於設定元素藍色背景

layui-bg-black

用於設定元素經典黑色背景

layui-bg-gray

用於設定元素經典灰色背景

css命名規範

class命名字首:layui,連線符:-,如:class="layui-form"

命名格式一般分為兩種:

一:layui-模組名-狀態或型別,

二:layui-狀態或型別。

因為有些類並非是某個模組所特有,他們通常會是一些公共類。如:一(定義按鈕的原始風格):class="layui-btn layui-btn-primary"、二(定義內聯塊狀元素):class="layui-inline"

常用公共屬性:

元素的基本互動行為,都是由模組自動開啟。但不同的區域可能需要觸發不同的動作,這就需要你設定我們所支援的自定義屬性來作為區分。如下面的 lay-submit、lay-filter即為公共屬性(即以 lay- 作為字首的自定義屬性):登入

目前我們的公共屬性如下所示(即普遍運用於所有元素上的屬性)

屬性描述

lay-skin=" "

定義相同元素的不同風格,如checkbox的開關風格

lay-filter=" "

事件過濾器。你可能會在很多地方看到他,他一般是用於監聽特定的自定義事件。你可以把它看作是乙個id選擇器

lay-submit

定義乙個觸發表單提交的button,不用填寫值

css內建公共基礎類

類名(class)

說明布局

layui-main

用於設定乙個寬度為 1140px 的水平居中塊(無響應式)

layui-inline

用於將標籤設為內聯塊狀元素

layui-box

用於排除一些ui框架(如bootstrap)強制將全部元素設為box-sizing: border-box所引發的尺寸偏差

layui-clear

用於消除浮動(一般不怎麼常用,因為layui幾乎沒用到浮動)

輔助layui-icon

用於圖示

layui-elip

用於單行文字溢位省略

layui-unselect

用於遮蔽選中

layui-disabled

用於設定元素不可點選狀態

layui-circle

用於設定元素為圓形

layui-show

用於顯示塊狀元素

layui-hide

用於隱藏元素

文字layui-text

定義一段文字區域(如文章),該區域內的特殊標籤(如a、li、em等)將會進行相應處理

layui-word-aux

灰色標註性文字,左右會有間隔

背景色layui-bg-red

用於設定元素赤色背景

layui-bg-orange

用於設定元素橙色背景

layui-bg-green

用於設定元素墨綠色背景(主色調)

layui-bg-cyan

用於設定元素藏青色背景

layui-bg-blue

用於設定元素藍色背景

layui-bg-black

用於設定元素經典黑色背景

layui-bg-gray

用於設定元素經典灰色背景

css命名規範

class命名字首:layui,連線符:-,如:class="layui-form"

命名格式一般分為兩種:

一:layui-模組名-狀態或型別,

二:layui-狀態或型別。

因為有些類並非是某個模組所特有,他們通常會是一些公共類。如:一(定義按鈕的原始風格):class="layui-btn layui-btn-primary"、二(定義內聯塊狀元素):class="layui-inline"

常用公共屬性:

元素的基本互動行為,都是由模組自動開啟。但不同的區域可能需要觸發不同的動作,這就需要你設定我們所支援的自定義屬性來作為區分。如下面的 lay-submit、lay-filter即為公共屬性(即以 lay- 作為字首的自定義屬性):登入

目前我們的公共屬性如下所示(即普遍運用於所有元素上的屬性)

屬性描述

lay-skin=" "

定義相同元素的不同風格,如checkbox的開關風格

lay-filter=" "

事件過濾器。你可能會在很多地方看到他,他一般是用於監聽特定的自定義事件。你可以把它看作是乙個id選擇器

lay-submit

定義乙個觸發表單提交的button,不用填寫值

LayUI分頁樣式修改

layui的分頁樣式大多是這樣的 可能跟我們的專案不是很搭,比如這樣風格的頁面 那麼我們就需要修改一下分頁的樣式去搭配整體風格,你可以另外寫乙個css檔案去重新寫樣式以覆蓋layui的css,分頁的樣式在這塊 layui laypage a,layui laypage span layui layp...

全域性樣式 bootstrap

在製作web頁面時,前端人員都習慣為 設定乙個全域性樣式 reset.css 那麼在bootstrap框架中也不例外。bootstrap框架的核心是輕量的css基礎 庫,他並沒有一味的重置樣式,而是注重各瀏覽器基礎表現,降低開發難度。大部分前端人員都具有歸零的思想,但實際你會發現,歸零之後的樣式在開...

css全域性公共樣式

css檔案命名為global.css,一般此css檔案是用於裝全站主要框架css樣式 和初始化的css樣式。global 翻譯為全域性 全部。從翻譯中大家也能理解global.css用於做什麼。大站常常用於裝全站公共的css樣式選擇器。全站能重複呼叫的css樣式都放入此css檔案內,可以節約樣式 規...