html5(二)
*{ 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 © 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(二)的更多相关文章
- 基于html5二个div 连线
因为要实现拖拽连线研究了一下基于extjs 和html5的不同实现方法 extjs底层的画图引擎是svg 不知道在html5大潮即将袭来的前夕一贯走在技术前沿的extjs开发团队没有自己封装基于htm ...
- HTML5常识总结(一)
一.HTML5的发展历程 + html演变的几个版本: html2.0.html3.2.html4.0.html4.01.html5. + 其中在html4.01发布之后,还发布了xtml1.0,它是 ...
- 小强的HTML5移动开发之路(1)——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
- 用Html5制作的一款数学教学程序Function Graphics(绘制函数图的程序)
最近我不仅对游戏开发感兴趣,还对函数图感兴趣,特此我开发了这个程序.以下是一些介绍和下载演示地址,喜欢的朋友可以看看: 一,产品名片 产品名:Function Graphics 版本: 0.1 开发者 ...
- Angularjs中的缓存以及缓存清理
写在最前面:这篇博文是2篇文章组成,详细介绍了Angularjs中的缓存以及缓存清理,文章由上海尚学堂转载过来,欢迎大家阅读和评论.转载请注明出处,谢谢! 一个缓存就是一个组件,它可以透明地储存数据, ...
- springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
- Thymeleaf的基本用法
俗话说,不会前端的后端工程师不是一个合格的程序员.因为在项目中经常要和前端工程师打交道,并且偶尔也会涉及前端的简单开发,因此在闲暇之余学习了一点前端的知识,今天首先总结归纳一下 Thymeleaf 模 ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
随机推荐
- Mac快捷键大全及cheatsheet插件
常用快捷键 CheatSheet 在微信上看到一篇文章分享了一款小软件,觉得有必要推荐一下.名叫CheatSheet.如果你想知道某程序的所有快捷键,只需在Mac上安装CheatSheet,然后长按住 ...
- java框架之SpringMVC(2)-补充及拦截器
高级参数绑定 package com.zze.springmvc.web.controller; import org.springframework.stereotype.Controller; i ...
- linux affinity
现在的CPU几乎都是多核,所以,分配给予进程相同数量的线程是合理的需求 但是,这些线程不一定就均匀跑在这些内核上 所以,我们要指派,“一个线程就运行在一个固定的CPU内核上” //test.c #de ...
- Python基础(九) type元类
python元类:type() 元类是python高阶语法. 合理的使用可以减少大量重复性的代码. 元类实际上做了以下三方面的工作: 干涉创建类的过程 修改类 返回修改之后的类 为什么使用元类? ...
- IO流的总结(一)
IO流的介绍: 其实在我们现实生活中有很多流,例如:水流,电流,气流 等等都是是流,但在Java中IO流是指对数据的操作的流. 按照流的分类: 1:字节流和字符流 Reader和InputStrea ...
- python实现获取身份证号码的方法
记录瞬间 1.号码的结构 公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码.2.地址码 表示编码 ...
- nginx的启动、停止、重载配置、验证配置
[1]启动 启动nginx系统方式: (1)命令 nginx -c /usr/local/nginx/conf/nginx.conf 说明:-c 参数指定运行nginx系统的自定义配置文件. 若加:使 ...
- Porsche Piwis Tester II V12.100 Version Released
Piwis Tester II v12.100 Version released today! In this new version we can find the latest type Pors ...
- 1333:【例2-2】Blah数集
1333:[例2-2]Blah数集 注意是数组,答案数组中不能有重复数字 q数组是存储答案的 代码: #include<iostream> #include<cstdio> # ...
- 虚拟机下Linux安装jdk
1.利用共享文件夹复制本地硬盘下(H:/share)的压缩包到指定目录 cp jdk-8u161-linux-x64.tar.gz /soft/jdk 2.进入/soft/jdk目录下,解压jdk到当 ...