css3实例讲解.pptVIP

设计部学习交流 2012-04-25 交流内容 Css HTML5的基础知识及应用 Css 1 代码缩写 li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px; } li{ font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px; } float使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。 HTML 5 HTML 5中新增元素 新增的主体结构元素包括article元素、section元素、nav元素及aside元素。 1、section元素——内容区块语义 section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。 文章语义——article、header、footer元素 2、article元素 article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章。 3、header元素：表示页面中一个内容区块或整个页面的标题。 4、footer元素 footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。 5、nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。 6、aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。 article元素 article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。 除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。 关于article元素的代码示例 这个示例是一篇讲述苹果的博客文章，在header元素中嵌入了文章的标题部分，在这部分中，文章的标题“苹果”被镶嵌在h1元素中，文章的发表日期镶嵌在p元素中。在标题下部的p元素中，嵌入了一大段该博客文章的正文，在结尾处的footer元素中，嵌入了文章的著作权，作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用了article元素。 article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。 关于article元素嵌套的代码示例 添加了文章读者的评论内容，示例的整体内容还是比较独立、完整的，因此对其使用article元素。具体来说，示例内容又分为几部分，文章标题放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与评论部分进行了区分（section是一个分块元素，用来把页面中的内容进行分块），在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。 article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。 Section元素 section元素用于对网站或内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的应用程序中页面上的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。 理解：section元素中的内容可以单独存储到数据库中或输出到Word文档中。（注意：标题部分位于它的内部，而不是它的前面）。 section元素示例 通常不推荐为那些没有标题的内容使用section元素，可以使用HTML 5轮廓工具来检查页面中是否有没标题的section，HTML 5轮廓工具的网址为“http://gsnedders.html 5.org/outline