text.html

 
<p class="zw">接下来的界面具有完全不同的外观和用户体验。点击一本书，将会显示一个包含内容简介的面板。我们用CSS定位、透明度和过渡来创建这个面板。我们可以重用上个例子中的HTML，但是这一次我们需要为每一个列表项创建一个<code>id</code>，以便我们可以直接定位它们的片段。</p> 
<p class="图"><img alt="1910.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/250.jpg"></p> 
<p class="图题">这是我们创建的Get Hardboiled网站界面的早期效果。</p> 
<pre class="代码无行号"><code><div class="hb-transitions"> 
   <div id="hb-transitions-01" class="item"> 
      <div class="item__img"> […] </div> 
      <div class="item__description"> […] </div> 
   </div> 
</div></code></pre> 
<p class="zw">我们还需要一个指向它父元素的锚点。</p> 
<pre class="代码无行号"><code><div id="hb-transitions-01" class="item"> 
<a href="#hb-transitions-01"><img src="transitions-01.jpg" 
alt="The Big Sleep"></a> 
</div></code></pre> 
<p class="zw">正如我们一开始为使用小屏幕的用户做设计时，把列表项设计成简单的垂直列表。这一次我们也同样使用弹性盒模型来布局。由于我们需要把图书封面展示在右侧而不是按照默认的顺序排列，我们同样将<code>flex-direction</code>设置为<code>row-reverse</code>。</p> 
<pre class="代码无行号"><code>.item { 
display : flex; 
flex-direction : row-reverse; 
margin-bottom: 1.35rem; 
padding: 10px; 
border: 10px solid #ebf4f6; }</code></pre> 
<p class="zw">在每个列表项内部，我们为每个图片设置一定的左外边距来把它和内容简介分隔开，并为它设置一个宽度。</p> 
<pre class="代码无行号"><code>.item__img { 
margin-left : 20px; 
width : 133px; }</code></pre> 
<p class="zw">为了使内容简介充分利用图书封面左侧空余的空间，使用<code>flex-grow</code>属性，并将值设为<code>1</code>。</p> 
<pre class="代码无行号"><code>item__description { 
flex-grow : 1; }</code></pre> 
<p class="zw">现在我们的设计已经满足了小屏幕手机用户，现在我们把关注点放在使用大屏幕手机上。我们所添加的任何样式都将嵌入在媒体查询中，只有在设备需要的时候才应用它们。</p> 
<p class="zw">首先我们为<code>hb_transitions</code>区域增加尺寸，然后将它设置为没有任何偏移量的相对定位，以便它成为任何有定位的子元素的定位上下文。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.hb-transitions { 
position : relative; 
height : 500px; 
width : 710px; } 
}</code></pre> 
<p class="图题"></p> 
<p class="图"><img alt="1911.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/251.jpg"></p> 
<p class="图题">列表在小屏幕下的展示很完美。</p> 
<p class="zw">接下来，为内联图片设置尺寸和位置，使它们整齐地排列在面板的底部。稍后，我们将使用同样的图片作为背景，因此它们的实际尺寸需要比看起来要大一些。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__img { 
position : absolute; 
top : 330px; 
width : 110px; 
height : 160px; } 

#hb-transitions-01 .item__img { left : 0; } 
#hb-transitions-02 .item__img { left : 120px; } 
#hb-transitions-03 .item__img { left : 240px; } 
#hb-transitions-04 .item__img { left : 360px; } 
#hb-transitions-05 .item__img { left : 480px; } 
#hb-transitions-06 .item__img { left : 600px; }</code></pre> 
<p class="图"><img alt="1912.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/252.jpg"></p> 
<p class="图题">即便在最苛刻的情况下，绝对定位也能给我们提供更好的控制。</p> 
<p class="zw">我们希望仅仅在用户点击图书封面时才出现内容简介，所以我们让内容简介足够小，以便于定位在图书封面的后面。将<code>overflow</code>设置为<code>hidden</code>，将确保过长的内容不会溢出而毁掉设计。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__description { 
z-index : 1; 
position : absolute; 
top : 335px; 
left : 5px; 
width : 100px; 
height : 150px; 
overflow : hidden; } 

#hb-transitions-01 .item__description { left : 0; } 
#hb-transitions-02 .item__description { left : 120px; } 
#hb-transitions-03 .item__description { left : 240px; } 
#hb-transitions-04 .item__description { left : 360px; } 
#hb-transitions-05 .item__description { left : 480px; } 
#hb-transitions-06 .item__description { left : 600px; } 
}</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>伪类选择器确保了可以触发内容简介的变换。重置内容简介的透明度和位置，然后调整它们的大小，使它填满列表面板的顶部。添加左侧较大的内边距，很快左边就会被背景图片填充。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item:target .item__description { 
opacity : 1; 
top : 0; 
left : 0; 
width : 100%; 
height : 320px; 
padding : 20px 20px 0 190px; } 
}</code></pre> 
<p class="zw">现在，为每一段内容简介设置相同的背景和边框属性。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item:target .item__description { 
background-color: #dfe1e2; 
background-origin: padding-box; 
background-position: 20px 20px; 
background-repeat: no-repeat; 
background-size: auto 220px; 
border: 10px solid #eceeef; 
box-sizing: border-box; } 
}</code></pre> 
<p class="zw">接下来，为每一段内容简介添加唯一的图书封面背景图。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
#hb-transitions-01:target .item__description { 
background-image : url(transitions-01.jpg); } 

#hb-transitions-02:target .item__description { 
background-image : url(transitions-02.jpg); } 

#hb-transitions-03:target .item__description { 
background-image : url(transitions-03.jpg); } 

#hb-transitions-04:target .item__description { 
background-image : url(transitions-04.jpg); } 

#hb-transitions-05:target .item__description { 
background-image : url(transitions-05.jpg); } 

#hb-transitions-06:target .item__description { 
background-image : url(transitions-06.jpg); } 
}</code></pre> 
<p class="图"><img alt="1913.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/253.jpg"></p> 
<p class="图题">面板部分已经大致完成，当用户点击一本书的封面，包含内容简介的面板就会浮现在上面。</p> 
<p class="zw">现在，我们将利用过渡使交互显得更顺畅，使界面更生动。对于每段内容简介，我们将过渡四个属性——<code>top</code>、<code>width</code>、<code>height</code>和<code>opacity</code>，用逗号将它们分隔。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__description { 
transition-property : top, width, height, opacity; } 
}</code></pre> 
<p class="zw">最后，为每个属性添加一个持续时间。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item__description { 
transition-duration : .5s, .5s, .75s, .5s; } 
}</code></pre> 
<p class="图题"></p> 
<p class="图"><img alt="1914.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/254.jpg"></p> 
<p class="图题"><code>top</code>、<code>width</code>和<code>height</code>的变化将持续0.5秒（<code>.5s</code>），<code>opacity</code>的变化将持续0.75秒（<code>.75s</code>）。</p>