htmldiv兼容完美布局示例代碼的簡(jiǎn)單介紹
lt!居中層ltdiv id=quotmainquot lt!頂層ltdiv id=quottopquotltdiv lt!導(dǎo)航層ltdiv id=quotmenuquotltdiv lt!內(nèi)容外層ltdiv id=quotcontentquot lt!左ltdiv id=quotleftbarquotltdiv。
ul,li,div,span,td padding0 margin0 #top width1200px height auto margin0 auto color#FFF #logo width100%。
documentreadyfunction #btn#newDivnewhtml 點(diǎn)擊“新建頁面”進(jìn)行添加2基于純js代碼的嵌套Html代碼buttontype=buttonid=btnonClick=javascriptload_home 確認(rèn) functionload_home documen。
lt!DOCTYPE html lthtml lthead ltmeta charset=quotUTF8quot lttitlelttitle ltstyle type=quottextcssquot margin 0padding 0 bodywidth1012px div width 300pxheight 300pxborder 2px solid #。
先給你寫一套代碼,之后再來解釋哈css部分aa display flex 使用flex布局,可以輕易獲得水平布局 alignitems center 垂直方向居中 justifycontent center 水平方向居中 height 200px。
ltdiv ltdiv class=quotimagequot ltimg src=quotimage3jpgquot alt=quotImage 3quot ltdiv class=quotcaptionquot圖片3ltdiv ltdiv ltdiv ltp這里是文字說明ltp ltbody lthtml 在上面的示例代碼中,使用了Flex布局。
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。