关于className的使用，做一个节日卡切换新人初试。

首先布局是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循环。

下面是交互代码图：

到这里就大概完成这个节日卡的效果：下面是展示图：

以上就是本萌新的小作品，当然会有更简单的方法完成，但是这个是我的方法。

如果有哪里不对的请各位指点一二，谢谢大家！

各位新人哪里不懂可以问下我哦！