text.html

 
<p class="zw">现在我们要给Get Hardboiled网站的侦探办公桌上的名片应用转换。首先用<code>transform-origin</code>属性来设置原点，并用<code>rotate</code>转换来实现不规则的设计。</p> 
<p class="zw">我们将使用的HTML是很专业的，你找不到任何一个表象的元素或者属性。这里有九个微格式<code>h-card</code>，每个都有其自己的一组值来描述一个侦探的联系信息。所有卡片上都没有定义<code>id</code>。</p> 
<pre class="代码无行号"><code><div class="h-card"> 
<h3 class="p-org">The No. 1 Detective Agency</h3> 
</div> 

<div class="h-card"> 
<h3 class="p-name p-org"> 
Shades &amp; Staches Detective Agency</h3> 
</div> 

<div class="h-card"> 
<h3 class="p-name p-org">Command F Detective Services</h3> 
</div> 

<div class="h-card"> 
<h3 class="p-name">The Fat Man</h3> 
</div> 

<div class="h-card"> 
<h3 class="p-name p-org">Hartless Dick</h3> 
</div> 

<div class="h-card"> 
<h3 class="p-name p-org">Nick Jefferies</h3> 
</div> 

<div class="h-card"> 
<h3 class="p-name p-org">Elementary, My Dear Watson</h3> 
</div> 

<div class="h-card"> 
<h3 class="p-name p-org">Shoes Clues</h3> 
</div> 

<div class="h-card"> 
<h3 class="p-name p-org">Smoke</h3> 
</div></code></pre> 
<p class="zw">首先为<code>h-card</code>定义通用样式。我们会给所有卡片设定相同的尺寸，并应用<code>background-size</code>属性来确保不管卡片多大，背景图都能与之适应。</p> 
<pre class="代码无行号"><code>.h-card { 
width : 300px; 
height : 195px; 
background-position : 50% 50%; 
background-repeat : no-repeat; 
background-size : 100% 100%; }</code></pre> 
<p class="zw">我们需要为每个元素定义不同的背景图像，但是我们并没有在HTML里定义<code>id</code>或者<code>class</code>属性，这里就要用到<code>:nth-of-type</code>伪元素选择器了。</p> 
<blockquote class="提示 editing-block">