<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 <!-- H5新增的几个容器块元素：

 、header:用户表示页面或某个区域的头部

 、nav:用于表示导航栏

 、aside:用于表示跟周围主题相关的附加信息

 、article:用于表示一个整体的一部分主题

 、section:表示右边的侧边栏

 、footer:用于表示页面或某个区域的脚注

 现在这里来教大家怎么使用 -->

 <!-- 内联样式表 -->

 <style>

 * {

 margin: ;

 padding: ;

 }

 .box {

 width: %;

 text-align: center;

 font-size: 30px;

 margin: 10px auto;

 }

 header {

 width: %;

 height: 100px;

 outline: 1px solid red;

 line-height: 100px;

 }

 .box1 {

 width: %;

 position: relative;

 height: 550px;

 }

 nav {

 width: %;

 height: 50px;

 outline: 1px solid black;

 position: absolute;

 left: 0px;

 top: 0px;

 line-height: 50px;

 }

 aside {

 width: %;

 height: 50px;

 outline: 1px solid blue;

 position: absolute;

 right: 0px;

 top: 0px;

 line-height: 50px;

 }

 article {

 width: %;

 height: 500px;

 outline: 1px pink solid;

 position: absolute;

 left: 0px;

 top: 50px;

 line-height: 500px;

 }

 section {

 width: %;

 height: 500px;

 outline: 1px yellow solid;

 position: absolute;

 right: 0px;

 top: 50px;

 line-height: 500px;

 }

 footer {

 width: %;

 height: 100px;

 outline: 1px solid rebeccapurple;

 line-height: 100px;

 }

 </style>

 </head>

 <body>

 <div class="box">

 <header>我是网页的头部</header>

 <div class="box1">

 <nav> 我是左边的导航栏</nav>

 <aside>我是右边的导航栏</aside>

 <article>我是主体内容</article>

 <section>我是右边的侧边栏</section>

 </div>

 <footer>我是底部</footer>

 </div>

 </body>

 </html>





												


											
HTML5新增的几个容器模块的更多相关文章
	

    
								
  1. 【原】HTML5 新增的结构元素——能用并不代表对了
		
    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...
    
		
    2. 
						
  2. html5新增及删除标签
		
    一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...
    
		
    3. 
						
  3. HTML5新增的主体元素和新增的非主体结构元素
		
    HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的 ...
    
		
    4. 
						
  4. 盒子模型，定位技术，负边距，html5 新增标签
		
    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...
    
		
    5. 
						
  5. html5新增标签/删除标签
		
    闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...
    
		
    6. 
						
  6. web前端学习（二）html学习笔记部分（1） -- html5新增的元素及特性等等
		
    检查,在浏览器中可以调整设备类型 html5实现水池效果. lang:en为英文语言,中文语言zh <html lang="en"> <head> < ...
    
		
    7. 
						
  7. HTML5 学习总结（二）——HTML5新增属性与表单元素
		
    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
    
		
    8. 
						
  8. HTML5新增及移除的元素
		
    HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...
    
		
    9. 
						
  9. HTML5 学习笔记（二）——HTML5新增属性与表单元素
		
    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SQL注入 payload 记录
			
    使用 REGEXP盲注 payload select user() from users where user_id=1 and (select(user)from users where user_ ...
    
			
    2. 
						
  2. leetcode之二叉树的层序遍历
			
    1.题目描述 2.题目分析 二叉树的层序遍历主要算法思想是使用 队列这一数据结构实现,这个数据结构多应用在和 图相关的算法.例如图的广度优先遍历就可以使用队列的方法实现.本题的关键在于如何识别出一层已 ...
    
			
    3. 
						
  3. 5.Spring MVC 自动装配问题
			
    一.使用@controller注解,实际上也是在IOC容器中配置了,它的id是类的首字母小写 一.使用@controller注解,实际上也是在IOC容器中配置了,它的id是类的首字母小写 1.如果不使 ...
    
			
    4. 
						
  4. python函数修饰器(decorator)
			
    python语言本身具有丰富的功能和表达语法,其中修饰器是一个非常有用的功能.在设计模式中,decorator能够在无需直接使用子类的方式来动态地修正一个函数,类或者类的方法的功能.当你希望在不修改函 ...
    
			
    5. 
						
  5. Mac .DS_Store 隐藏文件和清理.DS_Store的方法
			
    1.清理.DS_Store的方法 输入命令: sudo find / -name ".DS_Store" -depth -exec rm {} \; 2.设置不产生.DS_Stor ...
    
			
    6. 
						
  6. 解析苹果的官方例子LazyTableImages实现图片懒加载原理
			
    解析苹果的官方例子LazyTableImages实现图片懒加载原理 首先在官网下载源码: https://developer.apple.com/library/ios/navigation/#sec ...
    
			
    7. 
						
  7. Python学习---装饰器/迭代器/生成器的学习【all】
			
    Python学习---装饰器的学习1210 Python学习---生成器的学习1210 Python学习---迭代器学习1210
    
			
    8. 
						
  8. Linux chown命令详解
			
    chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符. chown常见命令参数 Usage: cho ...
    
			
    9. 
						
  9. Java代理全攻略【有瑕疵：字节码生成部分没看到，最后两节没仔细看，累了】
			
    Java代理 1.代理模式 定义:给某个对象提供一个代理对象,并由代理对象控制对于原对象的访问,即客户不直接操控原对象,而是通过代理对象间接地操控原对象. 其实就是委托.聚合.中间人. 为了保持行为的 ...
    
			
    10. 
						
  10. 多线程操作C++ STL vector出现概率coredump问题及尽量避免锁的双缓冲队列
			
    多线程操作全局变量,必须考虑同步问题,否则可能出现数据不一致, 甚至触发coredump. 前段时间, 遇到一个多线程操作了全局的vector的问题,  程序崩了.场景是这样的:某全局配置参数保存在一 ...
    
			
    11.