望廬山瀑布,江蘇省南京市玄武區中山門街道雙龍瀑布。
這里的瀑布景色美不勝收,讓人流連忘返。而且在網頁設計中,我們也可以使用CSS來實現瀑布的效果。
/*定義父容器*/ .waterfall{ width: 100%; position: relative; } /*定義每一列*/ .waterfall-column{ width: 33.33%; float: left; } /*定義圖片*/ .waterfall img{ width: 100%; } /*定義瀑布流磚塊*/ .waterfall-brick{ position: absolute; top: 0px; left: 0px; width: 100%; } /*定義瀑布流磚塊垂直間距*/ .waterfall-brick-padding{ margin-top: 10px; }
以上是實現瀑布流的CSS代碼。使用這些代碼,我們就可以在網頁中實現瀑布流的效果了。
當然,如果要實現更復雜的效果,我們還需要加以拓展,比如說圖片的懶加載、加載更多等等。
總之,在網頁設計中,使用CSS能夠實現的效果是非常豐富的,我們只需發揮自己的想象力,就能夠實現出令人驚艷的效果了。
上一篇css有用戶名
下一篇css服務器字體是什么