《HTML5开发手册》——1.11 高级“菜谱”:使用所有新标记建立新闻页面

    xiaoxiao2024-05-12  113

    本节书摘来自异步社区《HTML5开发手册》一书中的第1章,第1.11节,作者: 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

    1.11 高级“菜谱”:使用所有新标记建立新闻页面

    图1.13和代码1.13所示为如何使用所有的HTML5新元素来建立一个新闻页面的布局。示例中使用了一些基本的CSS来定义元素的位置。阅读完后面的章节,我们能使这个页面更漂亮。

    代码1.13 创建一个新闻主页

    https://yqfile.alicdn.com/ab47bea9d3547ee7e9695509c72dbbfa5cbd3e55.png" >

    在编辑好一个基本的布局和代码后,让我们检查一下文档大纲。前面的代码会产生如下的大纲:

    1.Loads of News

     a.Untitled NAV

    2.Headline article

     a.This is our most important article

    3.Sports news

     a.Sports headline 1

     b.Sports headline 2

     c.Sports headline 3

    4.Entertainment news

     a.Entertainment headline 1

     b.Entertainment headline 2

     c.Entertainment headline 3

    5.Nerdy news

     a.Nerdy headline 1

     b.Nerdy headline 2

     c.Nerdy headline 3

    6.Untitled ASIDE

    这看上去很优美。footer元素与section、article、nav和aside不同,不是分栏内容(sectioning content),所以不会显示在大纲中。nav和aside中没有标题,这也不要紧。当然也可以给aside一个标题,不过嵌入的广告可不会保证有标题。

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)