首先布局是12个p标签里面套住i标签，给个万能通配符
*{
margin：0； //清除内外多余的边距
padding：0；
}，
然后因为日期跟它所对应的内容是分开的 所以可以作为上下布局，不多说 。上图：
简单的布局完成之后接下来是样式，小弟这里用了内部样式引用。
接下来样式是每个 p 标签给了 宽100px 高100px 给了folat：left 然后给background：#000；为黑色背景颜色，这个时候大家发现，所有的 p 标签都排成一排了 。
这样的情况的时候是因为父级标签没给宽高，父级标签也就是id=“box”，。这样以后就算布局完成了。
之后里面的文字布局样式因为时间关系就不一一讲解直接上图了！
p 标签样式里面的 box-sizing：border-box 是固定死每个p 的宽度和高；大家可以注释了看下没有了的效果
完成以上步骤之后效果如下：
好了 布局完成 完成之后就是交互了！
我想让每个p标签事件 鼠标移入的时候背景颜色和文字颜色还有外边框都发生改变，其次是让foot父级标签里面的h2 span标签显示对应的月份和相对应的活动。
那么p是12个 多个就是数组！ 数组就给for循环。
下面是交互代码图：
到这里就大概完成这个节日卡的效果：下面是展示图：
以上就是本萌新的小作品，当然会有更简单的方法完成，但是这个是我的方法。
如果有哪里不对的请各位指点一二，谢谢大家！
各位新人哪里不懂可以问下我哦！