![HTML5+CSS3+JavaScript 从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/418/31794418/b_31794418.jpg)
上QQ阅读APP看书,第一时间看更新
6.5 实践案例——独特的瀑布流效果
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P115_23352.jpg?sign=1739189172-yG3nPQ6IcRonoZcdfaKOEiIWflDppIje-0-27e07098997b9838338775143ece46cb)
本章介绍了图像的知识,下面利用相关知识来完成一个瀑布流的案例。
本案例使用表格来设计一个瀑布流布局,实现的原理很简单,只是根据图片合并对应的表格,表格设计完成后,给表格插入背景图片,使用CSS 3新属性“background-size: cover;”使图片布满表格即可。
【例6-15】(实例文件:ch06\Chap6.15.html)瀑布流效果。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P115_119889.jpg?sign=1739189172-szq1c0v2Dw7cOLjsMCSj0GLtCvPJrzmL-0-b7b730fa67aa00738ffe203e6a0e287a)
相关的代码实例请参考Chap6.15.html文件,在Firefox浏览器中运行的结果如图6-16所示。
![](https://epubservercos.yuewen.com/A0FA69/17214367505511306/epubprivate/OEBPS/Images/Figure-P116_23449.jpg?sign=1739189172-dpaSc5wVirGyx3sXZKHLQUosPGYCl3du-0-6b2a5f544ecf8ab24a5b9da9d23eeea1)
图6-16 独特的瀑布流效果