text.html

 
<p class="zw">当HTML写得足够健壮，我们的设计将更容易适应不同的浏览环境，包括那些可以横竖屏切换的设备。虽然我们刚刚完成的宽屏幕下的布局在纵向模式下显示得很好，但在横向模式下并不合适。</p> 
<p class="zw">我们将改变父级区块的高度来开始这种布局。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.hb-landscape { 
position : relative; 
width : 760px; 
height : 500px; } 
}</code></pre> 
<p class="zw">接下来，调整这些内联图片的大小和位置，使它们在面板的左侧形成一个新的网格。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__img { 
position : absolute; 
width : 100px; 
height : 150px; } 

#hb-landscape-01 .item__img { 
top : 0; 
left : 0; } 

#hb-landscape-02 .item__img { 
top : 0; 
left : 120px; } 

#hb-landscape-03 .item__img { 
top : 0; 
left : 240px; } 

#hb-landscape-04 .item__img { 
top : 170px; 
left : 0; } 

#hb-landscape-05 .item__img { 
top : 170px; 
left : 120px; } 

#hb-landscape-06 .item__img { 
top : 170px; 
left : 240px; } 
}</code></pre> 
<p class="图题"></p> 
<p class="图"><img alt="1915.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/255.jpg"></p> 
<p class="图题">将图片布局到网格中。</p> 
<p class="zw">现在我们需要让描述足够小，将它们隐藏在对应的封面图后面。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item .description { 
position : absolute; 
width : 100px; 
height : 10px; 
overflow : hidden; } 

#hb-landscape-01 .item__description { 
top : 0; 
left : 0; } 

#hb-landscape-02 .item__description { 
top : 0; 
left : 120px; } 

#hb-landscape-03 .item__description { 
top : 0; 
left : 240px; } 

#hb-landscape-04 .item__description { 
top : 170px; 
left : 0; } 

#hb-landscape-05 .item__description { 
top : 170px; 
left : 120px; } 

#hb-landscape-06 .item__description { 
top : 170px; 
left : 240px; } 
}</code></pre> 
<p class="zw">为每段内容简介设置一个比相应图片更低的<code>z-index</code>值，并将它们的<code>opacity</code>设置为<code>0</code>，作为过渡的初始状态。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__img { 
z-index : 2; } 

.item__description { 
z-index : 1; 
opacity : 0; } 
}</code></pre> 
<p class="zw">使用<code>:target</code>伪类选择器将<code>opacity</code>重置为<code>0</code>，将内容简介重新定位并调整大小，使它填满面板的右侧。增加内边距、背景色和粗边框来完善外观。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item:target .item__description { 
top : 0; 
left : 360px; 
width : 390px; 
height : 280px; 
padding : 20px; 
opacity : 1; 
background-color: #dfe1e2; 
border : 10px solid #ebf4f6; } 
}</code></pre> 
<p class="zw">对于这个版本，我们将只过渡两个属性——<code>height</code>和<code>opacity</code>。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__description { 
transition-property : height, opacity; } 
}</code></pre> 
<p class="zw">为每个属性设置过渡持续时间：<code>height</code>为0.5秒（<code>.5s</code>），<code>opacity</code>为0.75秒（<code>.75s</code>）。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__description { 
transition-duration : .5s, .75s; } 
}</code></pre> 
<p class="图"><img alt="1916.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/256.jpg"></p> 
<p class="图题">提供了一个横向的替代布局。</p>