当前位置: 首页 > 编程日记 > 正文

《HTML5与CSS3实战指南》——2.5 构建The HTML5 Herald

本节书摘来自异步社区《HTML5与CSS3实战指南》一书中的第2章,第2.5节,作者: 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.5 构建The HTML5 Herald

我们已经介绍了页面结构的基础以及在此方面非常有帮助的HTML5元素。现在我们将开始创建有内容的网页部分。

使用header元素,从顶部开始。首先在此包含徽标、名称以及标语。我们还可以在网站导航中添加nav元素。

在添加header元素后,网站的内容被分为3列。在您使用section元素时,可以停下来思考其内容。如果每一部分包含一个独立的“部分”信息(比如体育部分和娱乐部分),那将非常有意义。因为,分成独立的栏目仅是一个可视化的安排—所以在每一列,我们将使用普通的老元素div。

在div里面,我们可以包含报纸文章。当然,这些也是article元素的候选者。

而在最右列,除了一篇文章,还有3个广告。我们将使用一个aside元素来包含广告,每一个广告放在article``元素中。这似乎很奇怪,但回头看看文章描述:“一个自我包含的组成部分[...]也就是说,从原则上讲,是独立分布或可重复使用的。”一个广告与该海报完美匹配,因为它通常没有修改以在许多网站上转载。

下一步,我们将为出现在广告下面的最后一篇文章添加article元素。这最后一篇文章将不被包括在保存了3个广告的aside元素中。如果要使其归属于aside元素中,article元素中的内容将需要与网页内容无关。但是事实不是这样的:article元素内容是页面中主要内容的一部分,所以将它放在aside元素中是错误的。

现在,第三列由两个元素组成:aside和article元素,其中一个放在另一个上面。为了将它们放在一起并容易设置其风格,我们将它们放在div元素中。我们在这里不使用section元素或其他语义标记,那样就意味着article和aside有某种局部的关系,但它们不是—在这里只是我们设计的一个功能,而它们恰巧在同一列中而已。

在页眉下方,出于样式目的,还有一个完整的上半部分包含在通用的div元素中。

最后,我们在其传统的位置—页面底部添加footer元素。由于包含了一些不同的内容块,而每一个内容块都形成了自我包含和主题相关的单位,我们将这些分到section元素中。作者信息将形成一个部分,而每一个作者都在自己嵌套的section元素中。这样,另一个section`元素放版权和其他信息。

让我们在页面添加新元素,文档如下:


f4aa9ed2ac1333171130f6f3b156410c07c243b7

我们现在已有了一个结构,可以作为内容的坚实基础。


da742aed6e47564e66d32caaff006b4cede30359

相关文章:

用.NET创建Windows服务

用.NET创建Windows服务 译者说明:我是通过翻译来学习C#的,文中涉及到的有Visual Studio.NET有关操作,我都根据中文版的VS.NET显示信息来处理的,可以让大家不致有误解。作者:Mark Strawmyer 我们将研究如何…

BGP local-preference MED属性实验

实验拓扑 实验配置 建立两个AS 65001、65000 AS65000内跑OSPF&#xff0c;并在R1上发布三个网段100.1.1.1 100.1.2.1 100.1.3.1 在R3 R5上聚合后发布给R4。 每台路由器都有一个对应的loopback地址。 实验过程 <R1>dis bgp ro Total Number of Routes: 10 BGP Local route…

加速产业生态算力升级,华为鲲鹏展翅福州

11月20日&#xff0c;为了让更多开发者了解鲲鹏计算生态体系&#xff0c;并且助力行业人才培养&#xff0c;由福建鲲鹏生态创新中心、福州市大数据基地开发有限责任公司联合举办的鲲鹏开发者训练营圆满完成。此次活动现场吸引到了大量的开发者参与&#xff0c;产、学、研各界人…

《CCNP TSHOOT 300-135认证考试指南》——2.2节故障检测与排除及网络维护工具箱

本节书摘来自异步社区《CCNP TSHOOT 300-135认证考试指南》一书中的第2章&#xff0c;第2.2节故障检测与排除及网络维护工具箱&#xff0c;作者 【加】Raymond Lacoste , 【美】Kevin Wallace&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 2.2 故障检测与排…

在linux系统下实现音视频即时通讯的部分代码

由于使用习惯,Linux在中国受欢迎程度远不如windows&#xff0c;相应的软件也比较少&#xff0c;尤其是音视频类的软件&#xff0c;但是&#xff0c;这并不代表就完全没有。下面介绍一款强大的音视频即时通讯平台给大家&#xff0c;它就是——Anychat for Linux SDK。AnyChat是一…

文本分类六十年

作者 | Lucy出品 | AI科技大本营文本分类是自然语言处理中最基本而且非常有必要的任务&#xff0c;大部分自然语言处理任务都可以看作是个分类任务。近年来&#xff0c;深度学习所取得的前所未有的成功&#xff0c;使得该领域的研究在过去十年中保持激增。这些文献中已经提出了…

web service 和 remoting 有什么区别

其实现的原理并没有本质的区别&#xff0c;在应用开发层面上有以下区别&#xff1a;1、Remoting可以灵活的定义其所基于的协议&#xff0c;如果定义为HTTP&#xff0c;则与Web Service就没有什么区别了&#xff0c;一般都喜欢定义为TCP&#xff0c;这样比Web Service稍为高效一…

《实施Cisco统一通信管理器(CIPT1)》一2.4 使用分布式呼叫处理的多站点WAN部署模型...

本节书摘来异步社区《实施Cisco统一通信管理器&#xff08;CIPT1&#xff09;》一书中的第2章&#xff0c;第2.4节&#xff0c;作者&#xff1a; 【美】Dennis Hartmann译者&#xff1a; 刘丹宁 , 陈国辉 , 卢铭 责编&#xff1a; 傅道坤, 更多章节内容可以访问云栖社区“异步社…

【转】 LDA必读的资料

时间总是不够用&#xff0c;这里就不自己写了&#xff0c;摘自一篇转发的博客&#xff0c;感觉挺有用&#xff01; 一个大牛写的介绍&#xff0c;貌似需FQ http://tedunderwood.wordpress.com/2012/04/07/topic-modeling-made-just-simple-enough/David M.Blei主页&#xff1a;…

sizeof 操作符详解

1. 定义&#xff1a; sizeof是何方神圣&#xff1f; sizeof 乃 C/C 中的一个操作符&#xff08;operator&#xff09;是也。简单说其作用就是返回一个对象或者类型所占的内存字节数。 MSDN上的解释为&#xff1a; The sizeof keyword gives the amount of storage, in bytes, a…

石锤!谷歌排名第一的编程语言,死磕这点,程序员都收益

日本最大的证券公司之一野村证券首席数字官马修汉普森&#xff0c;在Quant Conference上发表讲话&#xff1a;“用Excel的人越来越少&#xff0c;大家都在码Python代码。”甚至直接说&#xff1a;“Python已经取代了Excel。”事实上&#xff0c;为了追求更高的效率和质量&#…

《关系营销2.0——社交网络时代的营销之道》一T表示Technology(技术)

本节书摘来异步社区《关系营销2.0——社交网络时代的营销之道》一书中的第1章&#xff0c;作者&#xff1a; 【美】Mari Smith 译者&#xff1a; 张猛 , 于宏 , 赵俐 责编&#xff1a; 陈冀康, 更多章节内容可以访问云栖社区“异步社区”公众号查看。 T表示Technology&#xff…

jquery拖拽实现UI设计组件

想做一个UI设计的组件&#xff0c;左侧是控件列表&#xff0c;右边是编辑区域&#xff0c;左侧的控件可以重复拖拽到右侧然后进行编辑。 效果草图&#xff1a; 部分js代码&#xff1a; function domop(){//set drag and drop $( "#compls .component" ).each(functi…

六年磨一剑,全时发布音视频会议平台TANG,多款新品亮相

作者 | 高卫华出品 | AI科技大本营时隔六年&#xff0c;全时于11月26日在北京举办了“时间的力量2020新产品发布会“。发布会现场&#xff0c;全时创始人&CEO陈学军回顾了全时近年来的发展历程&#xff0c;并正式推出了全时云会议2020版&#xff0c;全时小智和全时云直播三…

考察新人的两道c语言题目

1> 如何判断一个板子的cpu 是big-endian 还是 Little&#xff0d;endian的&#xff1f;用c实现非常简单&#xff0c;10行左右&#xff0c;就可以判断了&#xff0c; 关键考察新人是否了解了什么是endian &#xff0c;big-endian与little-endian的区别在哪里&#xff0c; 如果…

《Adobe After Effects CC经典教程》——导读

前 言 After Effects CC提供了一套完整的2D和3D工具&#xff0c;动态影像专业人员、视频特效艺术家、网页设计人员以及电影和视频专业人员都可以用这些工具创建合成图像、动画和特效。After Effects被广泛应用于电影、视频、DVD以及Web的后期数字制作之中。After Effects可以以…

scanf()函数的用法和实践

scanf()函数的用法和实践摘要&#xff1a; 本文阐述了基于ANSI&#xff0c;Win 95&#xff0c;Win NT上的 C/C语言中scanf()函数的用法&#xff0c;以及在实际使用中常见错误及对策。 关键词&#xff1a; scanf()一、 序言 在CSDN论坛的C/C版块&#xff0c;我时常见…

邢波出任全球第一所AI大学校长,履历横跨三门学科

整理 | 高卫华出品 | AI科技大本营近日&#xff0c;世界上第一家研究型人工智能大学——Mohamed bin Zayed University of Artificial Intelligence&#xff0c;简称MBZUAI大学&#xff08;MBZUAI&#xff09;&#xff0c;任命著名华人AI学术教授邢波为校长。据悉&#xff0c;首…

Ubuntu 10.10 安装 libx11-dev

今天&#xff08;2013-04-11&#xff09;尝试安装 ImageMagick&#xff0c;结果发现 config.log 文件中包含了如下错误信息&#xff1a; fatal error: X11/Xlib.h: No such file or directory 也就是说缺少了 libx11-dev 包&#xff0c;心想这有什么难的&#xff0c;直接通过 a…

《计算机组成原理》----2.6 浮点数

本节书摘来自华章出版社《计算机组成原理》一书中的第2章&#xff0c;第2.6节&#xff0c; 作 者 Computer Organization and Architecture: Themes and Variations&#xff3b;英&#xff3d;艾伦克莱门茨&#xff08;Alan Clements&#xff09; 著&#xff0c;沈 立 王苏峰…

javascript/dom:原生的JS写选项卡方法

来源:http://www.jb51.net/article/30108.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"><head><meta http-…

CSDN 星城大巡礼,长沙“科技之星”年度企业评选正式开启

2020年&#xff0c;长沙市委主要领导发出“软件产业再出发”的号召&#xff0c;颁布了软件三年行动计划。今年5月&#xff0c;CSDN 作为专业的 IT 社区&#xff0c;与长沙高新区签约&#xff0c;将全国总部落户长沙&#xff0c;这一战略决策&#xff0c;让CSDN与长沙的联结进一…

Linux下用C获取当前系统时间

#include <time.h> time_t time(time_t calptr); 返回的是日历时间&#xff0c;即国际标准时间公元1970年1月1日00 : 00 : 00以来经过的秒数。然后再调用 char *ctime(const time_t calptr) ; 转化为字符串表示 #include <stdio.h> #inc…

Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

计划按例如以下顺序完毕这篇笔记&#xff1a;Java程序猿的JavaScript学习笔记&#xff08;1——理念&#xff09; Java程序猿的JavaScript学习笔记&#xff08;2——属性复制和继承&#xff09; Java程序猿的JavaScript学习笔记&#xff08;3——this/call/apply&#xff09; J…

关于动态规划,你想知道的都在这里了!

作者 | Your DevOps Guy翻译| 火火酱~&#xff0c;责编 | 晋兆雨出品 | AI科技大本营头图 | 付费下载于视觉中国什么是动态规划&#xff1f;它又有什么重要的呢&#xff1f;在本文中&#xff0c;我将介绍由Richard Bellman在20世纪50年代提出的动态规划&#xff08;dynamic pro…

Tcpdump命令的使用与示例——linux下的网络分析

顾名思义&#xff0c;TcpDump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤&#xff0c;并提供and、or、not等逻辑语句来帮助你去掉无用的信息。tcpdump就是一种免费的网络分析工具&#xff0c;尤其其提供了源代码&a…

document.getElementById与getElementByName的区别

document.getElementById( "id_Number ") 得到的是单个元素 document.getElementsByName( "name ") 得到的是数组 转载于:https://www.cnblogs.com/qiuh/archive/2013/04/16/3023596.html

HDU 3507:Print Article

HDU 3507&#xff1a;Print Article 题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid3507 题目大意&#xff1a;给定$n$&#xff0c;$m$&#xff0c;输出序列$n$个数&#xff0c;每连续输出代价为连续输出的数字和的平方加上$m$. 斜率优化DP 定义$sum_{pq}\su…

Linux wait函数解析

进程一旦调用了 wait&#xff0c;就 立即阻塞自己&#xff0c;由wait自动分析是否当前进程的某个子进程已经退出&#xff0c;如果让它找到了这样一个已经变成僵尸的子进程&#xff0c;wait 就会收集这个子进程的信息&#xff0c; 并把它彻底销毁后返回&#xff1b;如果没有找到…

Python多阶段框架实现虚拟试衣间,超逼真!

作者 | 李秋键 责编 | 晋兆雨 头图 | CSDN下载自视觉中国 任意姿态下的虚拟试衣因其巨大的应用潜力而引起了人们的广泛关注。然而&#xff0c;现有的方法在将新颖的服装和姿势贴合到一个人身上的同时&#xff0c;很难保留服装纹理和面部特征(面孔、毛发)中的细节。故在论文《Do…