zoukankan      html  css  js  c++  java
  • 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>

    效果图如下所示:

              

  • 相关阅读:
    hdu 5387 Clock (模拟)
    CodeForces 300B Coach (并查集)
    hdu 3342 Legal or Not(拓扑排序)
    hdu 3853 LOOPS(概率DP)
    hdu 3076 ssworld VS DDD(概率dp)
    csu 1120 病毒(LICS 最长公共上升子序列)
    csu 1110 RMQ with Shifts (线段树单点更新)
    poj 1458 Common Subsequence(最大公共子序列)
    poj 2456 Aggressive cows (二分)
    HDU 1869 六度分离(floyd)
  • 原文地址:https://www.cnblogs.com/webBlog-gqs/p/7107505.html
Copyright © 2011-2022 走看看