HTML5几个设计和修改的页面范例分享

2019-01-28 15:52:21于海丽
  •   <figcaption>Will you be the last person standing if one of these apocalyptic       scenarios plays out?</figcaption>  
  • </figure>  


    当然样式表中的选择符,相应修改一下即可。

    XML/HTML Code复制内容到剪贴板
    1. .FloatFigure{      float: left;   
    2.   margin: 0px 20px 0px 0px;    }   
    3. .FloatFigure figcaption{      max-width: 300px;   
    4.   font-size: small;      font-style: italic;   
    5.   margin-bottom: 5px;    }  


    最后还有就是 <img> 元素中的 alt 属性可以删除掉,因为图题中包含了图片的完整说明。

    用 <aside> 添加附注

    新的 <aside> 元素表示与它周围的文本没有密切关系的内容。可以通过它介绍另一个相关的话题,或者对主文档中提出的某个观点进行解释。还可以用来放置广告、相关内容链接。

    下面的示例中将用作醒目引文(pull quote),使用 <div> 元素可以创造这种效果,但是用 <aside> 元素让标记更有意义:

    部分代码如下:

    XML/HTML Code复制内容到剪贴板
    1.   <p>... (in a suitably robotic voice) "Who's your daddy now?"</p>     
    2. <aside class="PullQuote">     <img src="quotes_start.png" alt="Quote">  
    3.   We don't know how the universe started, so we can't be sure it won't just end, maybe today.      <img src="quotes_end.png" alt="End quote">  
    4. </aside>     
    5. <h2>Unexplained Singularity</h2>  


    对应的样式表内容如下:

    XML/HTML Code复制内容到剪贴板
    1. .PullQuote{      float: right;   
    2.   max-width: 300px;      border-top: thin black solid;