暑假菜鳥學記---html/css

標籤：html、css 、菜鳥求學

今天學習的是如何使用div盒子模型做一個具有多邊形旋轉放大的一個基礎特效頁面。

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/9C/9D/wKiom1lzPtniK8PSAAmaEzYHoXo141.png-wh_500x0-wm_3-wmp_4-s_2635602965.png" title="完成後的旋轉和放大特效不能截屏得到" alt="wKiom1lzPtniK8PSAAmaEzYHoXo141.png-wh_50" />

需求分析：1、多邊形如何產生；使用css3中的transform屬性對元素進行旋轉

     2、使用background：rgba設定半透明屬性

所遇到的問題：1、樣式圖片不能位於中間？解決方案採用調適型配置將top left right buttom都設定為零外邊距margin設為auto。

       2、如何解決中間排列四個上下排列五個的問題。解決方案：div盒子的相片順序是一排排橫向排滿然後換行，這樣的話排列應該是5 5 4 。解決方式在第六個盒子前面加上一定的像素寬度。這樣中間一列就只能擺下四個盒子。

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M02/9C/9E/wKioL1lzQYiyF8PtAAjDKICnWiE326.png-wh_500x0-wm_3-wmp_4-s_211256599.png" title="排列問題" alt="wKioL1lzQYiyF8PtAAjDKICnWiE326.png-wh_50" />

       

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M00/9C/9E/wKiom1lzQnHhkdfJAAUT4xR1QqA195.png-wh_500x0-wm_3-wmp_4-s_3901344399.png" title="未能合適進行旋轉" alt="wKiom1lzQnHhkdfJAAUT4xR1QqA195.png-wh_50" />

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M00/9C/9E/wKioL1lzQnOQn-piAAJnfjjyvGA566.png-wh_500x0-wm_3-wmp_4-s_3890112352.png" title="圖片不能置中的效果" alt="wKioL1lzQnOQn-piAAJnfjjyvGA566.png-wh_50" />

暑假菜鳥學記---html/css