柚子快報激活碼778899分享：html 第七章網(wǎng)頁

http://yzkb.51969.com/

day07 知識回顧 1、浮動與定位的區(qū)別 脫離正常文檔流 o float:left | right o position:absolute | fixed 浮動脫離文檔流，不脫離文本流 定位既脫離文檔流，又脫離文本流 2、顯示與隱藏可以通過哪些方式顯示? display屬性 o display:block顯示 o display:none 隱藏（元素隱藏，占位也不存在了） visibility屬性 o visibility: visible 顯示 o visibility:hidden 隱藏（占位還在，“隱身”） opacity屬性 o opacity:1顯示 o opacity:0 隱藏(元素透明) 3、圣杯布局的實現(xiàn)思路 4、左側(cè)寬度固定，右側(cè)寬度自適應(yīng)的兩欄布局，手寫代碼 一、等高布局 1、利用內(nèi)容撐開父元素的特點實現(xiàn)等高布局 實現(xiàn)思路： ? 需要幾列就需要嵌套幾層 ? col盒子設(shè)置背景(width:100%) ? left、center和right盒子需要浮動(同時需要給父元素清除浮動) ? 給col這幾個盒子設(shè)置相對定位，將左側(cè)和中間盒子的背景露出來 ?將文字歸位(margin-left)

”的片轉(zhuǎn)義字圍水印~ 合并拆分× 搜索 優(yōu)缺點： 結(jié)構(gòu)復(fù)雜，需要多層嵌套，不太好理解 拓展性強，兼容性強 二、cSS精靈技術(shù) css sprites(雪碧圖)，圖像拼合、貼圖定位 其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat",“background-position”的組合進行背景定位 適用于一般小圖標，不適合大背景大布局背景 優(yōu)息； ? 減少網(wǎng)頁的http請求，從而大大的提高頁面的性能 ? 圖片命名上的困擾 更換風(fēng)格方便 缺點： 必須要限定容器大小符合背景圖元素位置，需要計算 維護的時候比較麻煩，如果頁面背景有少改動，一般就要改這張合并的圖片 三、cSS制作空心三角形 基本思路是，用css繪制兩個三角形，通過絕對定位讓兩三角形不完全重疊 四、css滑動門技術(shù) 為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少，出現(xiàn)了CSS滑動門技術(shù)。 它從新的魚度構(gòu)建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應(yīng)元素內(nèi)部的文本內(nèi)容，可用性更強。最常見于各種導(dǎo)航欄的滑動門。如微信官網(wǎng)導(dǎo)航。 滑動門核心技術(shù)就是利用CSS精靈(主要是背景位置)和盒子padding撐開寬度，以便能適應(yīng)不同字數(shù)的導(dǎo)航欄。 實現(xiàn)思路： a標簽控制左門，因為導(dǎo)航是可以點擊的，需要給a標簽設(shè)置padding-left span標簽控制右門，設(shè)置background-position，添加padding-right smnlate ?

柚子快報激活碼778899分享：html 第七章網(wǎng)頁

http://yzkb.51969.com/

好文鏈接