*{ margin:0px; padding:0px;}

h1{ font:bold 20px verdana,sans-serif;}

h1{ font:bold 14px verdana,sans-serif;}

header,section,footer,aside,nav,article,figure,figcaption,hgroup{ display:block;}

body{ text-align:center;}

#wrapper{ width:960px; margin:15px auto; text-align:left; }

#main_header{ background:#FFFBB9; border:1px solid #999999; padding:20px;}

#main_menu{ background:#ccccc; padding:5px 15px;}

#main_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14jpx verdana,sans-serif;}

#main_section{ float:left; width:660px; margin:20px;}

#main_aside{ float:left; width:220px; margin:20px 0px; padding:20px; background:#cccccc;}

#main_footer{ clear:both; text-align:center; padding:20px; border-top:2px solid #999999;}

　　

article{ background:#fffbcc; border:1px solid #999999; padding:20px; margin-bottom:15px;}

article footer{ text-align:right;}

time{color:#999999;}

figcaption{ font:italic 14px verdana,sans-serif;}
/*

p:nth-child(odd)

{

    background:#999999;

    }

p:nth-child(even)

{

    background:#CCCCCC;

    }

p:nth-child(3)

{

    background:#999999;

    }

:not(p)

{

    background:#990000;

    }*/
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="description" content="This is an HTML5 example">

    <meta name="keywords" content="HTML5, CSS3, JavaScript">

    <title>This text is the title of the document</title>

    <link href="../CSS/mysheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="wrapper">

        <header id="main_header">

            <h1>This is the main title of the website</h1>

　      </header>

        <nav id="main_menu">

             <ul>

　                <li>home</li>

　                <li>photos</li>

　                <li>videos</li>

　                <li>contact</li>

            </ul>

　      </nav>

        <section id="main_section">

            <article>

　               <header>

                     <hgroup>

　                       <h1>Title of post One</h1>

　                       <h2>subtitle of the post One</h2>

                     </hgroup>

                     <time datetime="2011-12-10" pubdate>posted 12-10-2011</time>

　                </header>

　                This is the text of my first post

　                <figure>

                     <img src="../Images/QQ截图20141204125827.png" />

                     <figcaption>

　                         this is the image of the first post

                     </figcaption>

　                </figure>

　                <footer>

                     <p>comments (0)</p>

　                </footer>

            </article>

            <article>

　              <header>

                    <hgroup>

　                       <h1>Title of post Two</h1>

　                       <h2>subtitle of the post Two</h2>

                    </hgroup>

                    <time datetime="2011-12-15" pubdate>posted 12-15-2011</time>

　              </header>

　              This is the text of my second post

　              <footer>

                      <p>comments (0)</p>

　              </footer>

          </article>

　    </section>

       <aside id="main_aside">

            <blockquote>Article number one</blockquote>

            <blockquote>Article number two</blockquote>

　      </aside>

        <!-- 文档正文结尾-->

        <footer id="main_footer"> Copyright &copy 2010-2011  </footer>

    </div>

</body>

</html>
/*弹性框模型*/

*{ margin:0px; padding:0px;}

h1{ font:bold 20px verdana,sans-serif;}

h1{ font:bold 14px verdana,sans-serif;}

header,section,footer,aside,nav,article,figure,figcaption,hgroup{ display:block;}

body{ width:100%; display:-moz-box; display:-webkit-box; -moz-box-pack:center;-webkit-box-pack:center;}

#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:;}

#main_header{ background:#FFFBB9; border:1px solid #999999; padding:20px;}

#main_menu{ background:#ccccc; padding:5px 15px;}

#main_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14jpx verdana,sans-serif;}

#container{ display:-moz-box; display:-webkit-box;  -moz-box-orient:horizontal;-webkit-box-orient:horizontal;}

#main_section{  -moz-box-flex:; -moz-box-flex:; margin:20px;}

#main_aside{ width:220px; margin:20px 0px; padding:20px; background:#cccccc;}

#main_footer{ clear:both; text-align:center; padding:20px; border-top:2px solid #999999;}

article{ background:#fffbcc; border:1px solid #999999; padding:20px; margin-bottom:15px;}

article footer{ text-align:right;}

time{color:#999999;}

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. java框架之SpringCloud(7)-Config分布式配置中心

    前言 分布式系统面临的配置问题 微服务意味着要将单体应用中的业务拆分成一个个子服务,每个服务的粒度相对较小,因此系统中标会出现大量的服务.由于每个服务都需要必要的配置信息才能运行,所以一套集中式的.动 ...

  2. [js]js设计模式-修改原型

    参考 操作原型 - 给原型添加属性 - 方法1: Fn.prototype.sum=function{} - 方法2: Fn.prototype={} //constructor指向了Object的原 ...

  3. 2019.04.13 python基础

    第一节    主要讲python背景  没什么要注意的  了解记住概念就好 python官网  python.org  自带shell  可以运行python代码 在IDLE中怎么运行代码 新建文本  ...

  4. cocos2d-x 贡献一个oss上传脚本

    平常写前端项目和H5游戏时特别频繁的一个操作就是上传到oss上,特别浪费时间.所以用ali-oss写了一个脚本.配置属性后直接npm run oss就能上传到oss上了.再也不需要手动操作.现在是脚本 ...

  5. Java 中的E，K，V，T，U，S

    Java泛型中的标记符含义:  E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Number ...

  6. ssh防止暴力破解之fail2ban

    1.利用sshd服务本身防止暴力破解 2.sshd服务防止暴力破解和fail2ban使用方法 先说说一般的防范措施: 方法1: 1.密码足够复杂: 密码的长度要大于8位最好大于14位.密码的复杂度是密 ...

  7. 学习使用scrapy itemspipeline过程

    开始非常不理解from https://www.jianshu.com/p/18ec820fe706 找到了一个比较完整的借鉴,然后编写自己的煎蛋pipeline 首先在items里创建 image_ ...

  8. JVM探秘1--JVM内存运行时区域划分

    Java程序员一般不需要太关注内存,因为操作内存的权力都交给了Java虚拟机,但是Java程序员必须需要了解JVM是如何使用内存的,否则一旦内存出现泄漏或事溢出的话,就会一筹莫展不知道从哪去入手排查问 ...

  9. 微信小程序之mpvue+iview踩坑之旅

    因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...

  10. 怎样从外网访问内网Resin

    外网访问内网Resin 本地安装了Resin,只能在局域网内访问,怎样从外网也能访问本地Resin? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Resin 默认安装的Resin端口 ...