CSS筆記整理4 例子綜合

2021-09-11 18:50:58 字數 1576 閱讀 2986

圓角矩形的實現

ul無序列表在css中的應用

css sprites技術

在**中的屬性border、bordercolor 等表現,出於規範化將用css來書寫。

background-repeat設定為no-repeat時,設定背景圖不平鋪;設定為repeat-y時,設定背景圖沿y軸平鋪;

padding-left設定為110px時,將盒子內的左邊填充110畫素即空出110畫素。

font-size設定文字大小為14px固定文字大小為14畫素。

實現滑鼠移上時給**增加邊框。

方法

偽物件:hover:before搭配使用

content:'';設定預設為空

display屬性規定元素應該生成的框的型別為塊級元素block設定widthheight均為100%的同時,box-asizing取值為border-box保證產生的邊框是原盒子的大小

border設定邊框

顏色百分比rgba(紅色值,綠色值,藍色值,透明度百分比 其最大值為1即不透明)

solid實線

以及它的寬度;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

做乙個圓角的,切片(上中下),最後用table(三行一列)拼版,設定為background。

運用border-radius

**:

div:nth-of-type(1)
border-radius後的引數規則與margin類似。

相容性如下:

應用:設定圓形頭像border-radius:50%;

導航欄書寫一般用無序列表,即ul和li標籤的組合。

在專案中拼版用div+css+table的方式拼版,如果拼的是展示性頁面,用div+css;如果顯示的是資料,用table;後台一般用table。

css sprites技術利用背景的定位來實現,將很多小圖拼接成一張大圖,然後通過css定位來實現不通的盒子來使用不同的背景。

優點:利用css sprites技術能很好地減少網頁的http請求從而大大提高頁面的效能。

CSS 筆記整理(一)

布局這一塊可以學習flex 布局 1 id選擇器和class 類 選擇器 1 1 id 選擇器以 來定義 xx 1 2 類選擇器以乙個點 號顯示 center 2 background 背景 2 1 background color 背景顏色 bodybody2 3 background repea...

CSS學習筆記4

css 邊框,邊距,填充,高度,盒子模型。邊距填充 邊框邊框樣式 border style 樣式 屬性值 dotted 定義點虛線邊框 dashed 定義線虛線邊框 solid 定義實線邊框 double 定義乙個雙邊框 groove 定義3d凹槽邊框。效果取決於邊框顏色值 ridge 定義3d稜形...

CSS學習筆記4

偽類選擇器 偽元素選擇器 first letter 選擇文字的首字母 first line 選擇文字的首行 after 在元素前面新增內容 before 在元素後面新增內容 什麼是選擇器?選擇器 描述後面的樣式施加到哪些目標,或者說根據某個依據 來選擇應用的樣式 根據選擇依據的不同,就產生了不同的選...