text.html

 
<p class="zw">针对小屏设备的专业HTML已经做好了，接下来我们为大屏设备设计高保真和交互式的体验。首先我们重建垂直列表，把八张小说封面放进一个网格里面，当用户点压它们的时候会显示小说的内容简介。只要使用相对定位就可以，不需要水平或者垂直位移。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.hb-target { 
display : flex; 
flex-wrap : wrap; 
position : relative; 
max-width : 700px; } 
}</code></pre> 
<p class="zw">将<code>flex-items</code>的基础宽度设置为<code>130px</code>，然后通过设置内边距，让它们看起来更均匀、水平和垂直。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item { 
display : block; 
flex : 1 0 130px; 
margin : 0 20px 20px 0; } 
}</code></pre> 
<p class="zw">第四和第五个元素不需要右侧的外边距，所以通过<code>:nth-of-type</code> 伪选择器来设置。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item:nth-of-type(4) { 
margin-right : 0; } 
.item:nth-of-type(8) { 
margin-right : 0; } 
}</code></pre> 
<p class="zw">为了使这个界面加载的更快，我们可以使用每个图像两次：一次作为主网格，一次作为背景图<code>background-image</code>。</p> 
<p class="zw">现在，我们把注意力放到小说的内容简介上。我们把它绝对定位到每个元素左上方（<code>top</code>和<code>left</code>）。并且设置全透明，即不透明度为<code>0</code>。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__description { 
opacity : 0; 
position : absolute; 
top : 0; 
left : 0; } 
}</code></pre> 
<p class="图"><img alt="1312.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/122.jpg"></p> 
<p class="图题">大功告成，每个内容简介都通过<code>opacity</code>隐藏起来，变成不可见的。</p>