<div class="pics">
<h1>Album: </h1>
<section>
<h1>pic1</h1>
</section>
<section>
<h1>pic2</h1>
</section>
<section>
<h1>pic3</h1>
</section>
<section>
<h1>pic4</h1>
</section>
<section>
<h1>pic5</h1>
</section>
</div>
.pics{
font: 1.4rem helvetica, sans-serif;
margin: 3rem;
height: 100%;
/*background: dimgrey;*/
display: flex;
align-items: center;
justify-content: center;
}
section{
height: 280px;
margin: 0;
display: flex;
flex-flow: column;
justify-content: flex-end;
flex: 1;
color: silver;
background-color: hsla(0, 100%, 0%, .9);
background-size: auto 100%;
box-shadow: 0 0 1.5rem hsla(0, 100%, 0%, .4);
}
section h1 {
display: none;
font-size: 1.3rem;
font-weight: normal;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 1.2rem hsla(0, 100%, 0%, .8);
color: white;
background-color: hsla(0, 100%, 0%, .7);
margin: 0;
padding: .8rem;
}
section:nth-of-type(1) {
background: white url(image/pic1.jpg) no-repeat center ;
background-size: auto 100%;
}
section:nth-of-type(2) {
background: white url(image/pic2.jpg) no-repeat center;
background-size: auto 100%;
}
section:nth-of-type(3) {
background: white url(image/pic3.jpg) no-repeat center left;
background-size: auto 100%;
}
section:nth-of-type(4) {
background: white url(image/pic4.jpg) no-repeat center;
background-size: auto 100%;
}
section:nth-of-type(5) {
background: white url(image/pic5.jpg) no-repeat center;
background-size: auto 100%;
}
section:hover h1 {
display: block;
}
section:hover{
flex: 2;
cursor: pointer;
}
传送门:http://www.w3cplus.com/css3/designing-css-layout-with-flexbox.html
p:nth-of-type(……) 表示“选取父元素的为p子元素的第……个”
p:nth-child(……) 表示“选取父元素的第几个子元素,恰为p”
括号里参数:
1 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
p:nth-child(odd)
2 使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
p:nth-child(3n+0)