2.  
  3. *{ margin:0px; padding:0px;}
  4. h1{ font:bold 20px verdana,sans-serif;}
  5. h1{ font:bold 14px verdana,sans-serif;}
  6. header,section,footer,aside,nav,article,figure,figcaption,hgroup{ display:block;}
  7. body{ text-align:center;}
  8. #wrapper{ width:960px; margin:15px auto; text-align:left; }
  9. #main_header{ background:#FFFBB9; border:1px solid #999999; padding:20px;}
  10. #main_menu{ background:#ccccc; padding:5px 15px;}
  11. #main_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14jpx verdana,sans-serif;}
  12. #main_section{ float:left; width:660px; margin:20px;}
  13. #main_aside{ float:left; width:220px; margin:20px 0px; padding:20px; background:#cccccc;}
  14. #main_footer{ clear:both; text-align:center; padding:20px; border-top:2px solid #999999;}

　　

  1. article{ background:#fffbcc; border:1px solid #999999; padding:20px; margin-bottom:15px;}
  2. article footer{ text-align:right;}
  3. time{color:#999999;}
  4. figcaption{ font:italic 14px verdana,sans-serif;}
  1. /*
  2. p:nth-child(odd)
  3. {
  4.     background:#999999;
  5.     }
  6.  
  7. p:nth-child(even)
  8. {
  9.     background:#CCCCCC;
  10.     }
  11.  
  12. p:nth-child(3)
  13. {
  14.     background:#999999;
  15.     }
  16.  
  17. :not(p)
  18. {
  19.     background:#990000;
  20.     }*/
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="description" content="This is an HTML5 example">
  6.     <meta name="keywords" content="HTML5, CSS3, JavaScript">
  7.     <title>This text is the title of the document</title>
  8.     <link href="../CSS/mysheet.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11.     <div id="wrapper">
  12.         <header id="main_header">
  13.             <h1>This is the main title of the website</h1>
  14. 　      </header>
  15.         <nav id="main_menu">
  16.              <ul>
  17. 　                <li>home</li>
  18. 　                <li>photos</li>
  19. 　                <li>videos</li>
  20. 　                <li>contact</li>
  21.             </ul>
  22. 　      </nav>
  23.         <section id="main_section">
  24.             <article>
  25. 　               <header>
  26.                      <hgroup>
  27. 　                       <h1>Title of post One</h1>
  28. 　                       <h2>subtitle of the post One</h2>
  29.                      </hgroup>
  30.                      <time datetime="2011-12-10" pubdate>posted 12-10-2011</time>
  31. 　                </header>
  32. 　                This is the text of my first post
  33. 　                <figure>
  34.                      <img src="../Images/QQ截图20141204125827.png" />
  35.                      <figcaption>
  36. 　                         this is the image of the first post
  37.                      </figcaption>
  38. 　                </figure>
  39. 　                <footer>
  40.                      <p>comments (0)</p>
  41. 　                </footer>
  42.             </article>
  43.             <article>
  44. 　              <header>
  45.                     <hgroup>
  46. 　                       <h1>Title of post Two</h1>
  47. 　                       <h2>subtitle of the post Two</h2>
  48.                     </hgroup>
  49.                     <time datetime="2011-12-15" pubdate>posted 12-15-2011</time>
  50. 　              </header>
  51. 　              This is the text of my second post
  52. 　              <footer>
  53.                       <p>comments (0)</p>
  54. 　              </footer>
  55.           </article>
  56. 　    </section>
  57.        <aside id="main_aside">
  58.             <blockquote>Article number one</blockquote>
  59.             <blockquote>Article number two</blockquote>
  60. 　      </aside>
  61.         <!-- 文档正文结尾-->
  62.         <footer id="main_footer"> Copyright &copy 2010-2011  </footer>
  63.     </div>
  64. </body>
  65. </html>
  1. /*弹性框模型*/
  2. *{ margin:0px; padding:0px;}
  3. h1{ font:bold 20px verdana,sans-serif;}
  4. h1{ font:bold 14px verdana,sans-serif;}
  5. header,section,footer,aside,nav,article,figure,figcaption,hgroup{ display:block;}
  6. body{ width:100%; display:-moz-box; display:-webkit-box; -moz-box-pack:center;-webkit-box-pack:center;}
  7. #wrapper{ width:960px; margin:15px auto; display:-moz-box; display:-webkit-box; -moz-box-orient:vertical;-webkit-box-orient:vertical; -moz-box-flex:; -moz-box-flex:;}
  8. #main_header{ background:#FFFBB9; border:1px solid #999999; padding:20px;}
  9. #main_menu{ background:#ccccc; padding:5px 15px;}
  10. #main_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14jpx verdana,sans-serif;}
  11.  
  12. #container{ display:-moz-box; display:-webkit-box;  -moz-box-orient:horizontal;-webkit-box-orient:horizontal;}
  13.  
  14. #main_section{  -moz-box-flex:; -moz-box-flex:; margin:20px;}
  15. #main_aside{ width:220px; margin:20px 0px; padding:20px; background:#cccccc;}
  16. #main_footer{ clear:both; text-align:center; padding:20px; border-top:2px solid #999999;}
  17. article{ background:#fffbcc; border:1px solid #999999; padding:20px; margin-bottom:15px;}
  18. article footer{ text-align:right;}
  19. time{color:#999999;}
  20. figcaption{ font:italic 14px verdana,sans-serif;}

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

简单的网页结构出来了

html5（二）的更多相关文章

  1. 基于html5二个div 连线

    因为要实现拖拽连线研究了一下基于extjs 和html5的不同实现方法 extjs底层的画图引擎是svg 不知道在html5大潮即将袭来的前夕一贯走在技术前沿的extjs开发团队没有自己封装基于htm ...

  2. HTML5常识总结（一）

    一.HTML5的发展历程 + html演变的几个版本: html2.0.html3.2.html4.0.html4.01.html5. + 其中在html4.01发布之后,还发布了xtml1.0,它是 ...

  3. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

  4. 用Html5制作的一款数学教学程序Function Graphics(绘制函数图的程序)

    最近我不仅对游戏开发感兴趣,还对函数图感兴趣,特此我开发了这个程序.以下是一些介绍和下载演示地址,喜欢的朋友可以看看: 一,产品名片 产品名:Function Graphics 版本: 0.1 开发者 ...

  5. Angularjs中的缓存以及缓存清理

    写在最前面:这篇博文是2篇文章组成,详细介绍了Angularjs中的缓存以及缓存清理,文章由上海尚学堂转载过来,欢迎大家阅读和评论.转载请注明出处,谢谢! 一个缓存就是一个组件,它可以透明地储存数据, ...

  6. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

  7. Thymeleaf的基本用法

    俗话说,不会前端的后端工程师不是一个合格的程序员.因为在项目中经常要和前端工程师打交道,并且偶尔也会涉及前端的简单开发,因此在闲暇之余学习了一点前端的知识,今天首先总结归纳一下 Thymeleaf 模 ...

  8. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  9. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  10. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

随机推荐

  1. 解决.NET iis初次加载超级慢

    禁止证书的验证过程:1.在下面aspnet.config文件中加入下面内容:     32位系统:C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspne ...

  2. 二、latex简单使用

    安装成功则可显示如图所示的信息. 用记事本便可完成整个过程. 命令如图所示: 首先用documentclass命令引入一个文档类,比如引入article文档类,主要用于撰写论文.{}中的内容表示命令的 ...

  3. CFRunLoop 源码学习笔记(CF-1151.16)

    1.CFRunLoopModeRef 什么时候创建的? 在调用__CFRunLoopFindMode(rl, modeName, create) 1.1)首先通过modeName 在RunLoop 中 ...

  4. Eclipse启动报错An internal error occurred during: "Initializing Java Tooling"

    Eclipse启动报错An internal error occurred during: "Initializing Java Tooling" 解决方案: 删除工作空间work ...

  5. JVM探秘2--详解内存溢出OutOfMemoryError异常

    JVM运行时内存被划分成多个区域,而除了程序计数器之外,其他几个区都会出现OutOfMemoryError异常,主要原因就是对应内存区域的内存不足以再分配内存,一般要么是内存泄漏了要么就是内存参数设置 ...

  6. SpringDataJpa开发环境的搭建以及使用

    一.所需工具 安装jdk.IntelliJ IDEA和mysql数据库. 二.SpringDataJpa快速起步 开发环境的搭建: ①.在IDEA软件上添加依赖包:在http://mvnreposit ...

  7. java中的ElasticSearch搜索引擎介绍。

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  8. js中获取当天的时间的年月日

    var d=new Date() var day=d.getDate() var month=d.getMonth() + 1 var year=d.getFullYear() document.wr ...

  9. 2.0JAVA基础复习——JAVA语言的基础组成关键字和标识符

    JAVA语言的基础组成有: 1.关键字:被赋予特殊含义的单词. 2.标识符:用来标识的符号. 3.注释:用来注释说明程序的文字. 4.常量和变量:内存存储区域的表示. 5.运算符:程序中用来运算的符号 ...

  10. Servlet+纯java+MySQL实现课程信息的增删改查

    Dbutil: package com.zh.util; import java.sql.Connection; import java.sql.DriverManager; import java. ...