HTML5+CSS3網(wǎng)頁制作實(shí)例:chinaz圖片瀑布布局

2024-09-05 07:18:42

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS3瀑布布局</title><style> .container{ -webkit-column-width:160px; -moz-column-width:160px; -o-colum-width:160px; -webkit-column-gap:1px; -moz-column-gap:1px; -o-column-gap:1px; } div:not(.container){ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#D9D9D9; border::#CCC 1px solid; display:inline-block; width:157px; position:relative; margin:2px; } .title{ line-height:80px; font-size:18px; color:#900; text-align:center; font-family:"Microsoft YaHei"; }</style></head><body><section> <div class="container"> <div style="height:80px" class="title">純CSS3瀑布布局</div> <div style="height:260px"></div> <div style="height:65px"></div> <div style="height:120px"></div> <div style="height:145px"></div> <div style="height:90px"></div> <div style="height:145px"></div> <div style="height:160px"></div> <div style="height:65px"></div> <div style="height:230px"></div> <div style="height:140px"></div> <div style="height:85px"></div> <div style="height:20px"></div> <div style="height:145px"></div> <div style="height:50px"></div> <div style="height:65px"></div> <div style="height:230px"></div> <div style="height:140px"></div> <div style="height:85px"></div> <div style="height:20px"></div> <div style="height:145px"></div> <div style="height:50px"></div> <div style="height:145px"></div> <div style="height:160px"></div> <div style="height:240px"></div> </div></section></body></html>運(yùn)行效果(FireFox，Google Chrome下測試通過，其他瀏覽器未做測試~~)：