项目的整体目标是H5、C3、CSS预处理器SASS,Grid网格,以及弹性布局的实践以及熟练地使用。
计划达到的目标是使用以上技术还原音悦Tai的页面及效果,结果还是比较不错的,所要求的效果都已完成,登录页面是根据自己的想法做的,想到了纯色的背景比较单调,于是加上了背景图片。此次项目中也是遇到了一些问题,通过询问组长以及组员得到了解决,认知了自己的技术水平的高度,让我也知道了团队协作的重要性,虽然这次项目是个人项目,但没有组长组员的帮助下,可能完成任务的进度会缓慢,通过这次项目我更加熟练掌握了css预处理器sass,grid网格和变量属性的使用
变量属性:设置属性
width: $width;
在需要使用该属性的地方添加变量名就能使用
继承属性:设置属性
.title {
width: 150px;
height: 50px;
}
Grid网格布局:
display: grid;
grid-template-columns: 1fr 1fr 1fr; // 设置列
grid-template-rows: 180px 180px 180px; //设置行
column-gap: 10px; //列边距
row-gap: 10px; //行边距
子元素
grid-column-star