端午假期，公司福利發了一盒糉子。包裝還不粗，想發給老爸讓他老人家嚐嚐，奈何老爸最近牙疼，硬是不要。說他們那邊食堂也有。沒必要浪費運費。如果實在喫不完，讓我寄給奶奶嚐嚐。後來室友打算買鍋。我想就算了。自己喫也能喫。
今天端午節，刷即刻APP看了一個搞笑的表情包：【祝大家端午節NB，hhh】
還有幾個【憨憨日記】供大家消遣，嘿嘿：
》》=》》》==》=》====正題結束
下午看了一個CSS佈局樣式。身爲試用期的小白，大佬早看出來我的實力，於是讓我趁着假期多學點前端的佈局【算是安排了一個簡單的任務吧】。可能覺得我佈局很low，更不用想讓我去編程了。【我猜的】
廢話不多說，上案例【案例很簡單。本人小白，所以說大家儘量別噴呀！】：
領導已經實現的效果：
我暫時實現的效果：
可以看的出來，兩者其實差不太多的吧？
主要涉及到的幾個知識點：
- 網格佈局、
- angular中的for循環構建div時for循環該在哪個位置上（在其父親div上還是在其自己div上）、
- 水平居中的應用、
- 僞標籤、
- 垂直居中。
網格佈局
本次應用到的網格佈局是這樣的：
一共包含8個區域(這8個區域包含在一個class="content"的div中)。具體實現的流程：
先看html的代碼（一共包含3個class：smallcard，midcard，bigcard）：
<!-- body部分 -->
<div class="content">
<!--左上-->
<app-left-up></app-left-up>
<!--上-->
<div class="bigcard">1</div>
<!--右上-->
<div class="smallcard">2</div>
<!--左-->
<div class="smallcard">3</div>
<!--右-->
<div class="smallcard">5</div>
<!--左下-->
<div class="smallcard">6</div>
<!--中下-->
<div class="midcard">7</div>
<!--右下-->
<div class="smallcard">8</div>
</div>
//電腦分辨率的大小(1960*1024)
*{
width:100%;
height: 100%;
}
body{
padding: 0px;
margin: 0px;
}
.content{
padding: 28px 30px;//設置外包padding
width: 1900px; //需要在原來的基礎上減少60.
background-color: #C4E8EB;
display: grid; //網格佈局
//定義三行三列網格（row代表高，columns代表寬）
grid-template-rows: 312px 312px 312px;
grid-template-columns: 450px 900px 450px;
//定義行和行和列和列的間距
grid-row-gap: 10px;
grid-column-gap: 10px;
}
//接下來實現中間部分佔據兩塊的那片區域
.bigcard{
grid-row: 1 / 3;
grid-column: 2 / 3;
}
更詳細的部分需要自己摸索一下：具體的可以看下前輩的這個教程：網格佈局
angular中的for循環構建div
主要用到的指令是：*ngFor="循環條件"
先看下TS文件代碼：
selector: 'app-left-up',//（tip這兩句代碼並不是放在一塊的，只是標明，app-left-up是一個代替了div的標籤。用Ctrl+F搜索。）
person=[1,2,3,4]//測試數據，無實際意義。
再看下HTML代碼：
<div class="content1" *ngFor="let item of person">
<span>{{item}}</span>
<br>//換行
<hr style="height:1px">//橫線
<span>{{item}}</span>
<br>//換行
<span>{{item}}</span>
</div>
結果證明：誰想要循環，就把代碼放到誰身上。
效果：
還剩三個，大致說下：
僞標籤：大致理解就是不新建標籤而產生新的元素把。估計理解的不是很對。看下代碼：
HTML：
<div class="title">
<!-- 左標題 -->
<div class="title-left">
<span id="titletxt">我是左標題</span>
</div>
<!-- 右標題 -->
<div class="title-right">
<span>我是右標題</span>
</div>
</div>
CSS：
#titletxt::before{ //<----<----<---<--不同之處在這(::)
content:'\260E';
font-size: 15px;
margin-right: 3px;
}
效果就是上圖左標題的效果。其次還有::after僞標籤
垂直居中：
假設設置：height：50px;加上inline-height= 50px; margin: 0 auto；即刻
其次還看到了align-item：center;（流式佈局裏的）應該還有一部分可以進行改進把。
水平居中
text-align：center；應該還有更好的。但是目前我用的這種比較多吧。（不只是針對文本進行設置，我如果期望子div均居中的話，也會再父div中加入這句話。是可以實現效果的，具體的我也不太瞭解。）
今天是2020/6/29.我們來應該在端午節6.24發的。奈何一拖再拖。。。對自己很不負責。期望大家不要學我！
還算可以的是這幾天又加入了新的內容。如果你感興趣，可以踢我一腳，我應該會回覆。最近在做前端。
附最近加的一些內容效果圖（萌新一個，右上參見前輩代碼。右中和右下是用的G2插件。對於每個div的title部分，後期打算採用ant Design插件去修改（對了，上次加入ant_design插件導致自己寫的佈局樣式有變化。）。暫時就這樣。ant_design再說把）：這是源碼
》》=》》》==》=》====進入新的正題：
再更一則【即刻一姐】：
知道這個表情包嘛？【即刻】一姐！---->Amy歐大陽。嘿嘿！
