python前端HTML和CSS高級(jí)

發(fā)布時(shí)間：2020-06-24 03:53:07 來(lái)源：網(wǎng)絡(luò) 閱讀：439 作者：我是小谷粒欄目：編程語(yǔ)言

知識(shí)點(diǎn)預(yù)習(xí)
1.表格基本使用2.選擇器權(quán)重計(jì)算
3.背景圖片屬性
4.精靈圖
5.天天生鮮案例

01-表格(table)基本使用
python前端HTML和CSS高級(jí)

table:
        tr row 行數(shù)
        td description  內(nèi)容
        th head ;居中 加粗
         /* 3.合并邊框 */
        border-collapse: collapse;

        跨列合并: colspan  找到第幾行的哪個(gè)內(nèi)容, colspan="幾列";多余的刪除
        跨行合并: rowspan  找到第幾行的那個(gè)內(nèi)容, rowspan = "幾行";多余的刪除

表格案例03-選擇器權(quán)重計(jì)算
層級(jí)選擇器累加權(quán)重值
權(quán)重較高會(huì)覆蓋較低的
權(quán)重相同時(shí)后寫的會(huì)覆蓋前面的

連寫 background: url("images/bg.jpg") no-repeat 0px 0px green;

05-背景圖案例06-雪碧圖(精靈圖)案例
使用精靈圖的原因？
圖像精靈（Image Sprites）
圖像精靈是放入一張單獨(dú)的圖片中多個(gè)小圖像。包含大量圖像的網(wǎng)頁(yè)需要更長(zhǎng)時(shí)間來(lái)下載，同時(shí)會(huì)生成多個(gè)服務(wù)器請(qǐng)求。使用圖像精靈將減少服務(wù)器請(qǐng)求數(shù)量并節(jié)約帶寬。

07-天天生鮮案例
1、創(chuàng)建項(xiàng)目目錄
一般先創(chuàng)建一個(gè)總目錄，然后在此目錄中創(chuàng)建images、css、js三個(gè)目錄，三個(gè)目錄中分別放圖片、css文件以及js文件。
2、切圖通過(guò)photoshop對(duì)網(wǎng)頁(yè)效果圖進(jìn)行切圖，所使用圖片需要是帶圖層的psd格式。
3、制作雪碧圖將裝飾類圖片合并成一張圖，然后刪除分散的裝飾類圖片。
4、新建html文件，新建和編寫reset.css
5、參照效果圖，編寫html和css代碼

向AI問(wèn)一下細(xì)節(jié)

python前端HTML和CSS高級(jí)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽