端午假期，公司福利发了一盒粽子。包装还不粗，想发给老爸让他老人家尝尝，奈何老爸最近牙疼，硬是不要。说他们那边食堂也有。没必要浪费运费。如果实在吃不完，让我寄给奶奶尝尝。后来室友打算买锅。我想就算了。自己吃也能吃。
今天端午节，刷即刻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欧大阳。嘿嘿！
