text.html

 
<p class="zw">让我们重新回到Get Hardboiled网站中的办公室外，门上的便签依然还在，但是有人在上面增加了一行。还记得我们之前的HTML吗？一个<code>article</code>元素？我们将用相同的方式，使用<code>aside</code>元素在里面新增一条。</p> 
<pre class="代码无行号"><code><article> 
   <h1>Back soon!</h1> 
      <ul> 
         <li><del>Gone for smokes</del></li> 
         <li><del>Getting booze</del></li> 
         <li>On a job (yeah, really)</li> 
      </ul> 
</article> 
<aside> 
   <p>Something on your mind or just want to say hello,
tweet @gethardboiled</p> 
</aside></code></pre> 
<p class="zw">我们把第一张便签（<code>article</code>）重新贴到门上，现在用<code>transform</code>来扭曲它。</p> 
<pre class="代码无行号"><code>article { 
transform : skew(-5deg, -2deg); }</code></pre> 
<p class="图"><img alt="1815.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/233.jpg"></p> 
<p class="图题">试着修改扭曲值，角度的微小变化会带来一些有趣的效果。</p> 
<p class="zw">现在我们把使用<code>aside</code>便签放到第一张的上方并扭曲它，以使其显得更加突出。</p> 
<pre class="代码无行号"><code>aside { 
position : absolute; 
top : 100px; 
left : 70%; 
z-index : 10; 
transform : skew(5deg, -5deg); }</code></pre> 
<p class="图"><img alt="1816.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/234.jpg"></p> 
<p class="图题">通过几行简单的CSS，将这两个语义元素转换到设计中，就特别符合Get Hardboiled网站主题了。</p>