知识储备
1.:nth-child(even) 选择偶数项子元素
2.background-origin
规定 background-position 属性相对于什么位置来定位
3.background-size 规定背景图像的尺寸
4.background-image 为元素设置背景图像
(请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果)
小练习
需要的效果：
斑马纹文字
html
<div>
while(true){<br/>
var d = new Date();<br/>
if(d.getDate()==1 && d.getMonth()==3){<br/>
alert('TROLOLOL')<br/>
</div>
css
div{
background: beige;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
background-size: auto 3em;
line-height: 1.5em;
background-origin: content-box;
}
思考
我们为什么不用：nth-child(even)?
因为我们根本无法选中一行，这里如果选择：nth-child(even)解法的话，我们必须增加html结构，用table吧！
但是我们有更好的解法！
还记得之前第二节的如何绘制条纹背景一节么？我们这里用了liner-gradient
1.首先我们给一个背景色
background: beige;
2.我们来制造条纹，大小暂且设置为1.5em吧
（如果我们设置其字体为1em,那么剩下的0.5em做空隙会好看很多）
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
background-size: auto 3em;
俩个条纹高度 = 1.5em2 = 3em*
我们来看看效果吧！
未完成的斑马纹
好像很接近了！
3.我们再将内容行高为1.5em,此时文字会自动垂直居中
即将完成的斑马纹
4.我们希望给文字加点内距
padding:.5em
咦？！我们的效果又挂了。
这里我们设置
background-origin: content-box;
让其背景从内容盒子开始绘制，解决！
斑马纹效果
