根據效果圖，規劃為flex的列布局，劃分比例大概如下圖：
1 做個div容器盒子main，它就是主要的盒子。
2 再放各個盒子，一共五個，五個盒子擠在了一起，因為他們沒有分配比例，也就沒有按比例布滿它們的父盒子main，還沒有彈性。
這些盒子都給它們加flex樣式，按原先我標的比例（比例是2：2：3：2：1）分配新增樣式。
3 ·再繼續填放內容
最終**：
> 某某管理中心
h3>
<
h5>資訊科技是生產力，要好好利用它哦
h5>
div>
<
div
class
="box3 flex3"
>
<
p>賬號：<
input
type
="text"
>
p>
<
br>
<
p>密碼：<
input
type
="password"
>
p>
<
span
>忘記密碼？
span
>
<
br><
br>
<
button
>登 錄
button
>
div>
<
div
class
="box4 flex2"
>
div>
<
div
class
="box5 flex1"
>還沒有賬號?先去註冊吧！
div>
div>
body
>
html
>
awk例項教程
1.awk語法規則 awk 2.顯示最近登入的5個帳號 last n 5 awk root root root dmtsai root awk工作流程是這樣的 讀入有 n 換行符分割的一條記錄，然後將記錄按指定的域分隔符劃分域，填充域，0則表示所有域,1表示第乙個域,n表示第n個域。預設域分隔符是 ...
CSS reflow例項教程
frame主要的動作有三個 構造frame,以建立物件樹 dom樹 reflow,以確定物件位置，或者www.cppcns.com是呼叫mozilla的layout 這裡是指原始碼的實現 繪製，以便物件能顯示在螢幕上 總的來說，reflow就是載入內容樹 在html中就是dom樹 和建立或更新fra...
flex 布局 flex教程
簡介 2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布...