前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我們來看一下什么是瀑布流布局效果,比如電商網站 蘑菇街
原理圖:
在一個大盒子里，放置多個小盒子，小盒子的大小可以不一致，長短不一樣，呈現一種瀑布流的效果。
使用CSS3S實現只需要如下4步:
1. 準備圖片素材
2. 書寫相應HTML結構
3. 了解CSS 多欄(Multi-column) 屬性
4. 使用CSS 多欄屬性完成瀑布流布局
一、第一步 —— 準備圖片素材
目標 : 準備圖片素材,每張圖片的寬度長度最好都不要同樣大小的,另外,圖片寬度高度也不宜太大
小結 : 準備多張圖片素材,寬度高度不宜超過1000像素
二、第二步 —— 書寫相應HTML結構
目標 : 在HTML頁面中插入多個圖片標簽img,并正確通過src屬性引入鼠標
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div class="box"><img src="images/P_001.jpg"/><img src="images/P_002.jpg"/><img src="images/P_003.jpg"/><img src="images/P_004.jpg"/><img src="images/P_005.jpg"/><img src="images/P_006.jpg"/><img src="images/P_007.jpg"/><img src="images/P_008.jpg"/><img src="images/P_009.jpg"/><img src="images/P_010.jpg"/><img src="images/P_011.jpg"/><img src="images/P_012.jpg"/><img src="images/P_013.jpg"/><img src="images/P_014.jpg"/><img src="images/P_015.jpg"/><img src="images/P_016.jpg"/><img src="images/P_017.jpg"/><img src="images/P_018.jpg"/><img src="images/P_019.jpg"/><img src="images/P_020.jpg"/></div> </body> </html>小結 : 通過img標簽的src屬性正確引入圖片,需要多個img標簽,因為我們需要多個圖片
三、第三步 —— 了解CSS 多欄(Multi-column) 屬性
小結 :
l column-count指定元素應該被分割的列數
l column-width指定列的寬度
l column-gap指定列與列之間的間隙
四、第四步 —— 使用CSS 多欄屬性完成瀑布流布局
目標 : 使用CSS多欄屬性實現我們的圖片瀑布流布局
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">/*清除所有標簽的內外邊距*/*{margin: 0;padding: 0;}/*選中.box標簽*/.box{/*把.box中的內容最多分為4列,會根據瀏覽器的大小變化,但是不會超過4列*/column-count: 4;/*規定每列列寬最小為200px*/column-width: 200px;/*規定每列的間隙為1em*/column-gap: 1em;/*盒子寬度為1000px*/width: 1000px;/*實現盒子水平居中*/margin:0 auto;}/*選中.box下的所有img標簽*/.box img{/*上下左右5px的內填充*/padding:5px;/*上下左右5px的外邊距*/margin:5px;/*圓角邊框*/border-radius:5px;/*盒子陰影*/box-shadow:0px 0px 5px gray;}</style> </head> <body><div class="box"><img src="images/P_001.jpg"/><img src="images/P_002.jpg"/><img src="images/P_003.jpg"/><img src="images/P_004.jpg"/><img src="images/P_005.jpg"/><img src="images/P_006.jpg"/><img src="images/P_007.jpg"/><img src="images/P_008.jpg"/><img src="images/P_009.jpg"/><img src="images/P_010.jpg"/><img src="images/P_011.jpg"/><img src="images/P_012.jpg"/><img src="images/P_013.jpg"/><img src="images/P_014.jpg"/><img src="images/P_015.jpg"/><img src="images/P_016.jpg"/><img src="images/P_017.jpg"/><img src="images/P_018.jpg"/><img src="images/P_019.jpg"/><img src="images/P_020.jpg"/></div> </body> </html>小結 : 注意屬性名與取值不要寫錯,每個css屬性值后面都有一個英文狀態的分號
總結
使用CSS3可以輕松實現瀑布流布局，但 Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。
我們再來回顧一下，我們剛剛實現的步驟:
1. 準備圖片素材
2. 書寫相應HTML結構 : 使用多張圖片,放在同一個大盒子中
3. 了解CSS 多欄(Multi-column) 屬性
– column-count 把指定盒子中的內容最多分為多少列,會根據瀏覽器的大小變化,但是不會超過我們指定的列數
– column-width 規定每列列寬最小為多少
– column-gap 規定每列的間隙
4. 使用CSS 多欄屬性完成瀑布流布局
原作者：黑馬程序員
原平臺：傳智播客官網
原鏈接：Web前端培訓：如何使用CSS3實現瀑布流效果?
總結
以上是生活随笔為你收集整理的前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 说一个人屯是什么意思
- 下一篇： python在银行的应用案例_银行风控案