文章标题

最新推荐文章于 2024-09-14 17:54:00 发布

沈成才

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量257

点赞数

分类专栏： HTML5/CSS3 文章标签：广告 aside 附注 html5

HTML5/CSS3 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1，附注介绍和使用场景
新的元素<aside>表示它与周围的文本没有密切关系的内容。
（1）可以通过附注介绍另一个相关的话题。
（2）或对主文档中提出的某个观点进行解释。
（3）也可用来盛放广告、相关内容链接、醒目引文（pull quote）等。
当然，如果使用<div>元素也可以实现同样的功能，但使用<aside>可以让标记更富有意义。

2，使用样例（实现一个醒目引文）

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>附注</title>
    <style>
        body {
          font-family: "Helvetica","Hiragino Sans GB","Microsoft Yahei", sans-serif;
          max-width: 650px;
        }
         
        .PullQuote {
          float: right;
          max-width: 300px;
          border-top: thin black solid;
          border-bottom: thick black solid;
          font-size: 30px;
          line-height: 130%;
          font-style: italic;
          padding-top: 5px;
          padding-bottom: 5px; 
          margin-left: 15px;
          margin-bottom: 10px;
        }
 
        .PullQuote img {
          vertical-align: bottom;
        }
    </style>
</head>
<body>
   
<div class="Content">
    <p>一，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>  
    <aside class="PullQuote">
        <img src="quotes_start.png" alt="Quote">
        Welcome to hangge.com
        <img src="quotes_end.png" alt="End quote">
    </aside>
    <p>二，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>
    <p>三，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>
</div>
  
</body>
</html>