[css] 手写一个满屏品字布局的方案
生活随笔
收集整理的這篇文章主要介紹了
[css] 手写一个满屏品字布局的方案
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[css] 手寫一個滿屏品字布局的方案
<!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><link rel="stylesheet" href="style.css"></head><body><article class="container"><div class="firstRow"><div class="item"></div></div><div class="secondRow"><div class="item"></div><div class="item"></div></div></article></body> </html>//style.css html, body{height: 100%;margin: 0;padding: 0; }.container {display: flex;flex-direction: column;flex-wrap: wrap;width: 100%;height: 100%; }.firstRow, .secondRow {width: 100%;height: 30%;display: flex;flex-direction: row;justify-content: center;margin: 10px 0; }.item {background-color: red;width: 40%;height: 100%;margin: 0 auto;border-radius: 10%; }個人簡介
我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
總結
以上是生活随笔為你收集整理的[css] 手写一个满屏品字布局的方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QT+Opencv视频文件TCP网络传输
- 下一篇： Eclipse ADT Bundle