1. 程式人生 > 其它 >CSS樣式寫前端頁面

CSS樣式寫前端頁面

1.> : >

2.text-decoration-:屬性規定文字修飾要使用的線條型別。

(1) none 預設值,規定文字修飾沒有線條

(2)underline 規定文字的下方將顯示一條線

(3)overline規定文字的上方方將顯示一條線

(4)line-through規定文字的中間將顯示一條線

(5)initial 設定該屬性為它的預設值

(6) inherit 從父元素繼承該屬性

3. nth-child(n)選擇器:用於匹配父元素索引為n的子元素,即選取屬於其父元素的第N個子元素,不論元素的型別。(n可以是數字、關鍵詞(Odd 和 even)或公式。)

4. 文字過長不換行顯示省略號的全部程式碼:

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

5.swiper輪播圖

border-color: 設定邊框顏色

position: absolute 絕對定位

position:relative 相對定位

border-bottom: 1px dotted #CCCCCC:下劃線 dotted 虛線

font-weight: bolder:定義字型粗細的屬性

bold 定義粗體字元。bolder定義更粗的字元 normal字型的粗細: 中等

text-align:center; 設定居中

:first-child: 偽類向元素的第一個子元素新增樣式。

marign: 設定top bottom

font-size:設定字型大小

font-weight:屬性設定文字的粗細

text-indent: 2em:/*text-indent 屬性規定文字塊中首行文字的縮排*/

line-height: 2em:/* line-height 屬性設定行間的距離(行高)*/

display: inline-block: /*相當於浮動 塊級元素能夠在同一行顯示*/

background-image:url() :設定背景圖片 記得新增高度(不然不顯示圖片)

background-repeat:no-repeat;屬性設定是否重複背景影象 不重複

background-position:定位背景影象

hover: 選擇器用於選擇滑鼠指標浮動在上面的元素

display:block:讓物件成為塊級元素(塊級元素可以顯示,行元素不能顯示)

text-decoration:none:消除文字下劃線

border-radius:10px; 邊框弧度

padding:設定寬高