1. 程式人生 > >MUI 九宮格改造成六宮格

MUI 九宮格改造成六宮格

1、下載mui庫檔案,放到專案的src下的lib資料夾中

2、main.js 檔案中匯入 mui 樣式

//匯入mui
import './lib/mui/dist/css/mui.min.css'
import './lib/mui/dist/css/icons-extra.css'

3、在mui 樣例中找到九宮格案例後,右鍵檢視原始碼,複製九宮格的程式碼到對應的 vue 元件的對應位置

4、在網頁中右鍵審查元素中,找到上面的 ul 和 li 用到的類,修改類樣式,完成九宮格的佈局

 

5、這裡注意一下,修改最後面整體的背景顏色,是需要在 index.html 檔案中修改 body 的樣式