前言

使用核心css 技术 Grid

布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。

grid-template-columns 设置每一行的宽度，可以是具体值，也可以是百分比

背景样式

首先设置背景颜色#d4ce46，并且要让蜘蛛侠的位置在屏幕的中间

body {
    box-sizing: inherit;
    background: #d4ce46;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100vh;
    filter: grayscale(40%);
}

.main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100vh;
    filter: grayscale(40%);
}

蜘蛛侠样式

测量一下蜘蛛侠的横向最宽的部分一共是 19个像素块

设置一下整体的像素块布局width 19vh

  width: 19vw;
  display: grid;
  grid-template-columns: repeat(19, 1fr);

前9行样式的分析，图片上中间部分有白色的蜘蛛丝，

以蜘蛛丝的为基准线数一下前面的像素块有多少个

在蜘蛛丝前一共是有9个像素块，后面也有个。这里只需要给中间的像素块设置白色背景即可

前10-18式的分析，

同样是也是已中间蜘蛛丝为基准线

第10行是白色左右两边分别添加一个黑色像素块

第11行是白色左右两边添加一组顺序为红色、黑色像素块

第12行是白色左右两边添加一组顺序为红色、红色、黑色像素块

第13行是白色左右两边添加一组顺序为红色、红色、红色、黑色像素块

第14行是白色左右两边添加一组顺序为红色、红色、红色、红色、黑色、黑色像素块

第15行是白色左右两边添加一组顺序为黑色、黑色、红色、红色、红色、蓝色、黑色像素块

第16行是白色左右两边添加一组顺序为（左边白色、右边蓝色）、蓝色、黑色、红色、蓝色、蓝色、蓝色、黑色像素块

第17行是白色左右两边添加一组顺序为白色、黑色3、蓝色4、黑色

第18行是白色左右两边添加一组顺序为黑、红色3、黑色、蓝色3、黑色

剩下的部分颜色都是左右对称的结构

“我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！”

用css做像素蜘蛛侠

前言

背景样式

蜘蛛侠样式