|
作者:xiaochun365,來自原文地址 一:UI樣式基礎(chǔ)尺寸 /*width: 寬*/ /*height: 高*/ /*min-width: 最小寬度*/ /*max-width: 最大寬度*/ /*min-height: 最小高度*/ /*max-height: 最大高度*/
背景 /*background-image: 背景圖片*/ /*background-repeat: 背景圖片的重疊方式*/
邊框 /*border-radius:20% 方形圓角*/ /*border-width: 10px;*/ /*border-color: red;*/ /*border-style:inset;*/
邊距 margin:距離上一個標簽的距離 padding:標簽距離內(nèi)部包裹的內(nèi)容的距離
文本 /*color: red;*/ /*font-size: 20px; */ /*font-weight:700; 加粗*/
其他(列表,內(nèi)容,表格)
---------------------------------------------------------------------------------------------------- 樣式選擇器 類選擇器,ID選擇器,元素選擇器,通配符選擇器(現(xiàn)有的編譯器并不支持), 包含選擇器 p c{} //p下面的所有 子元素選擇器 p > c{} //p下面的一級 鄰近兄弟選擇器 c + c{}
通用兄弟選擇器 c~c{}
動態(tài)偽類選擇器 (:active :focus) (:link :visited :hover)--小程序不支持 .item:active{background-color:yellow} 狀態(tài)偽類選擇器(:enable :disable :checked) 選擇偽類選擇器:(:first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type) 空內(nèi)容偽類選擇器::empty 否定偽類選擇器::not 偽元素:::first-line ::first-letter ::before ::after ::selection 二:相對定位和絕對定位相對定位:元素是相對自身進行定位,參照物是自己。 絕對定位:元素是相對離它最近的一個已定位的父級元素進行定位 ----------------------------------------------------------------------------------------------- 相對定位: position:relative; /*啟用相對定位*/ left:150rpx; /*相對于自己往右偏離150*/ top:50rpx; /*相對于自己往下偏離150*/
絕對定位:
position: absolute; (父級元素一定要是已定位)
|