Web前端開發(fā)必知必會 課件-中文版 lesson 15-2 彈性布局與圖像

地址：杭州市濱江區(qū)濱文路528號郵政編碼：3100532024/4/10LESSON15-2彈性布局與彈性圖像CONTENTS01彈性布局02網(wǎng)頁中的圖像03圖像拼合

響應(yīng)式彈性布局二個關(guān)鍵要素:fluidlayout流動布局flexibleimage彈性圖像#fullpage{

max-width:1200px;

margin-left:auto;

margin-right:auto;}#downbar{clear:both;}img{width:100%;/*initializedimage*/

max-width:100%;}#leftbar{

width:35%;

float:left;}#rightbar{

width:60%;

float:right;}

/*totalwidth<=100%*/012欄響應(yīng)式框架頁面1-col(width:100%)(Breakpoint0)2-col(width:40%,width:60%)(Breakpoint1)3-col(width:30%,

……)三段響應(yīng)式框架實例常見響應(yīng)式網(wǎng)站框架Ivory、Foundation、Bootstrap、AmazeUI等Bootstrap框架斷點：768px、920px、1200px網(wǎng)頁中的圖像及其它內(nèi)容圖像背景圖像其它

漸變圖像（CSS替代方案）CSS3gradient,shadow圖標字體(Fontasicon)一種包含符號和字形的字體文件2024/4/10border-radius:10px;background:linear-gradient(0deg,#1913690%,#5d55c0100%);

box-shadow:5px5px10pxhsla(0,0%,40%,1);02彈性圖像彈性圖像用于布局Layout內(nèi)容Content策略需要Strategy彈性布局：也稱為流動布局、自適應(yīng)布局、彈性設(shè)計2024/4/10彈性背景圖像設(shè)置以下屬性Background-image:url('../images/01.jpg')no-repeatcentercenterfixed;background-size:cover;VSbackground-size:100%100%;圖像格式JPEG（pronounce:“jey-peg”）

最常見圖像格式，照片等（2563真色彩）不支持透明GIF（pronounce:“gif”or“jif”）減少顏色，壓縮比高，文件?。?56種）支持透明PNG（

pronounce:“ping”）8位，256色24位，

1600萬種顏色都支持透明其它：SVG（ScalableVectorGraphics）矢量圖形格式以XML格式保存信息利用JavaScript命令畫圖放大不失真也叫圖像精靈多個簡單圖像拼合在一起的集合只有一個文件圖像拼合（imagesprites）2024/4/1003圖像拼合舉例camera_new_x2_fb6c085.pngQ&A如何將固定寬度布局改為彈性寬度？在彈性網(wǎng)頁中，如何保證圖片正常顯示，不溢出？為什么一般