仿PHP中文網(wǎng)Flex布局實戰(zhàn) 做完效果: html代碼:
Flex項目屬性一、Flex父元素屬性1. display用來定義一個 flex 容器。如果設(shè)置為 flex 則容器呈現(xiàn)為塊狀元素,設(shè)置為inline- flex 則容器呈現(xiàn)為行內(nèi)元素。CSS 代碼: .container { ...
傳統(tǒng)布局與Flex布局一、傳統(tǒng)布局1.浮動布局 實例1:(基于浮動的二列布局) 基于浮動的二列布局 header, aside, main, footer { backgr...
css背景設(shè)置和阿里圖標(biāo)的引用一、css背景顏色 實例1: div{ width:400px; height:400px; border:1px solid #000; padding:20px; }
浮動與布局一、浮動1.浮動的原理: 浮動會使元素漂浮再沒有設(shè)置浮動的元素上面,它默認會把行元素轉(zhuǎn)換成塊元素 沒有浮動之前,塊元素都是垂直排列,浮動之后塊元素會水平排列 浮動的元素會從文檔流中脫離出來(意思是它會釋放它原來在文檔中占據(jù)的空間) 元素浮動...
盒模型與元素大小的計算一、盒模型 用實例演示一下:
表格與表單實戰(zhàn)練習(xí)一、表格(購物車) 代碼:
CSS選擇器一、簡單選擇器1. 元素選擇器:標(biāo)簽選擇器實例: body { background-color: red; }瀏覽器顯示結(jié)果: 2. 類選擇器:對應(yīng)著html中的class屬性實例: .box{ ...
導(dǎo)航下拉菜單一、 css樣式表1. 內(nèi)聯(lián)樣式CSS內(nèi)聯(lián)樣式 2. 元素標(biāo)簽 ...
HTML頁面的文檔結(jié)構(gòu)與HTML元素的三大通用屬性一、HTML5文檔結(jié)構(gòu)