1-4、aside元素

示例一：包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名称解释等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aside元素示例</title>
</head>
<body>
    <header>
        <h1>F#入门</h1>
    </header>
    <article>
        <h1>第四节  词法闭包</h1>
        <p>lambda 表达式可以创建词法闭包</p>
        <aside>
            <!-- 因为这个aside元素被放置在一个article元素内部，
                 所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。  -->
            <h1>名词解释</h1>
            <dl>
                <dt>F#</dt>
                <dd>F#为.NET2010中引入的新型函数型编程语言</dd>
            </dl>
            <dl>
                <dt>词法闭包</dt>
                <dd>词法闭包是指，将创建lambda表达式时的环境保存起来</dd>
            </dl>
        </aside>
    </article>
</body>
</html>

 示例二：在article之外元素使用，作为页面或站点全局的附属信息部分。例如友情链接、博客中其他文章列表或广告单元等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aside元素示例</title>
<style>
    *{
        margin:0;
        padding:0;
    }
    ul,li{
        list-style:none;
    }
    a{
        text-decoration: none;
    }
    .aside{
        width: 400px;
        height: 400px;
        margin:100px auto;
        border: 2px solid black;
        padding:10px;
        background:rgba(113,112,112,.24);
    }
    .ul{
        margin-left: 20px;
    }
    .ul li{
        height: 35px;
        line-height: 35px;
        text-align: right;
        padding: 10px 0 15px;
        border-bottom: 1px dashed #666;
    }
    .ul li a{
        float: left;
    }
</style>
</head>
<body>
    <aside class="aside">
        <nav>
            <h2>评论</h2>
            <ul class="ul">
                <li>
                    <a href="#">erway</a>      07-02 21:57
                </li>
                <li>
                    <a href="#">NEgei</a>      06-30 23:03
                    <a href="#">赞赞赞，大牛舅服你</a>
                </li>
                <li>
                    <a href="#">系统消息</a>   06-05 10:14
                </li>
            </ul>
        </nav>
    </aside>
</body>
</html>

效果图如下所示：

　　　　　　　　　　

 

posted @ 2017-07-02 22:16  Tsingtree  阅读(245)  评论(0)  编辑  收藏  举报