text.html

 
<p class="zw">通过使用<code>id</code>，就可以在复杂零散的网页中来标识一个唯一元素。<code>:target</code>伪类选择器改变了我们定位元素的风格。这是一种更专业的接口，我们可以不用JavaScript，而是通过<code>:target</code>伪类选择器来定位。</p> 
<p class="zw">接下来，我们通过<code>:target</code>伪类选择器改变了声明的样式属性。我们设定好内边距、背景和边框等，更重要的是，我们重置不透明度<code>opacity</code>为<code>1</code>。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item:target .item__description { 
opacity : 1; 
width : 100%; 
height : 480px; 
padding: 40px 40px 40px 280px; 
background-color: rgb(223,225,226); 
background-repeat : no-repeat; 
background-position : 40px 40px; 
border: 10px solid rgb(236,238,239); 
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25), 0 2px 2px 0 rgba(0, 
0, 0, 0.5); } 
}</code></pre> 
<p class="zw">为什么左边有一部分内边距？我们打算在这个地方放置背景图片<code>background-image</code>来填充。使用<code>:target id</code>来表示图像。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
#hb-target-01:target .description { 
background-image : url(target-01.jpg); } 
#hb-target-02:target .description { 
background-image : url(target-02.jpg); } 
#hb-target-03:target .description { 
background-image : url(target-03.jpg); } 
#hb-target-04:target .description { 
background-image : url(target-04.jpg); } 
[…]
}</code></pre> 
<p class="zw">要完成这个设计，我们还需要隐藏内容简介的文字信息，并显示图像网格。因此，可以提供指向一个外部元素的链接来回到初始状态。</p> 
<pre class="代码无行号"><code><a href="#hb-target"><img src="a-close.png" alt="Close"></a></code></pre> 
<p class="zw">使用属性选择器来定位顶部右侧的链接。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
a[href="#hb-target"] { 
position : absolute; 
top : -20px; 
right : -20px; 
display : block; 
width : 26px; 
height : 26px; }</code></pre> 
<p class="图"><img alt="1316.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/126.jpg"></p> 
<p class="图题">没有使用JavaScript，仅仅用<code>opacity</code>和<code>:target</code> 就完成了这个设计。</p>