<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>header、footer</title>

     <style type="text/css">

         body{height: 600px}

         header{width: 100%;height: 10%;background: red}

         #div0{width: 30%;height: 80%;background: green;float: left;    }

         #div1{width: 70%;height: 80%;background: gray;float: left;    }

         footer{width: 100%;height: 10%;background: blue;clear: left;}

     </style>

 </head>

 <body>

     <header>头部</header>

     <div id="div0">左</div><div id="div1">右</div>

     <footer>底部</footer>

 </body>

 </html>
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>article</title>

 </head>

 <body>

     <article>

         <article>

             <header><h1>文章一标题</h1></header>

             <p>文章正文<br>文章正文<br>文章正文<br></p>

             <footer><h3>文章底部文章底部文章底部</h3></footer>

         </article>

         <article>

             <header><h1>文章二标题</h1></header>

             <p>文章正文<br>文章正文<br>文章正文<br></p>

             <footer><h3>文章底部文章底部文章底部</h3></footer>

         </article>

     </article>

 </body>

 </html>
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>nav</title>

     <style type="text/css">

         nav{width: 100%;height: 40px;background: green;text-align: center;padding: 6px}

         li{display: inline;}

         a{text-decoration: none;}

     </style><!--display:inline作用是使无序列表显示于一行。text-decoration: none的作用是去掉超链接的下划线。-->

 </head>

 <body>

     <nav>

         <ul>

             <li><a href="">链接1</a></li>

             <li><a href="">链接1</a></li>

         </ul>

     </nav>

 </body>

 </html>

【HTML5】HTML5新布局元素的更多相关文章

  1. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  2. HTML5语义化元素

    语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...

  3. HTML5 canvas 内部元素事件响应

    HTML5 canvas 内部元素事件响应 isPointInPath 只能拿当前上下文的路径 重画每个部分 都isPointInPath判断

  4. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  5. HTML5 - 新增的元素，删除的元素

    1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<foote ...

  6. HTML5 <template>标签元素简介

    一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...

  7. html5如何实现元素拖放

    html5如何实现元素拖放 一.总结 一句话总结:参考文档里面有各种想象不到的好东西.一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 1.html ...

  8. html5-5 HTML5表单元素和内嵌框架

    html5-5   HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...

  9. 1+x 证书 web 前端开发 HTML5 - 新增的元素，删除的元素

    官方QQ群 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素 http://blog.zh66.club/index.php/archives/197/

  10. html5的 embed元素 和 object元素

    html5的 embed元素 和 object元素 一.总结 一句话总结: embed定义嵌入的内容,比如插件,比如flash object定义定义一个嵌入的对象,用于包含对象,比如图像.音频.视频. ...

随机推荐

  1. h5 canvas 图片上传操作

    最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化 html: <pre name="c ...

  2. 了解Python列表的一些方法

    首先定义一个名字列表,然后使用print() BIF在屏幕上显示这个列表. 接下来,使用len() BIF得出列表中有多少个数据项,然后再访问并显示第2个数据项的值: 创建了列表之后,可以使用列表方法 ...

  3. IBM的websphere MQ的c#使用

    1.关于websphere MQ的常用名词(针对Websphere MQ7.5版本) 队列管理器:为应用程序提供消息传递服务的程序.使用消息队列接口(MQI)的应用程序可以将消息放置到队列并可从队列中 ...

  4. c语言的预处理指令分3种 　　1> 宏定义 　　2> 条件编译 　　3> 文件包含

    宏简介 1.C语言在对源程序进行编译之前,会先对一些特殊的预处理指令作解释(比如之前使用的#include文件包含指令),产生一个新的源程序(这个过程称为编译预处理),之后再进行通常的编译 所有的预处 ...

  5. (四):C++分布式框架——状态中心模块

    (四):C++分布式框架--状态中心模块 上篇:(三):C++分布式实时应用框架--系统管理模块 技术交流合作QQ群:436466587 欢迎讨论交流 版权声明:本文版权及所用技术归属smartguy ...

  6. BootStra相关脚本引用说明

    先看一个简单的模板(DOCTYPE是html5的文档类型) <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  7. 【java系列】java开发环境搭建

    描述 本篇文章主要讲解基于windows 10系统搭建java开发环境,主要内容包括如下: (1)安装资料准备 (2)安装过程讲解 (3)测试是否安装成功 (4)Hello Word测试 1   安装 ...

  8. 【NOIP2015提高组】子串

    https://daniu.luogu.org/problem/show?pid=2679 看到方案数问题直觉就能想到DP,考虑用f(i,j,k)表示A[1...i]取k个子串组成B[1...j]的方 ...

  9. Python的字典

    1.  Python的字典 1.1.  字典的定义 在Python中,字典是一种key-value的数据类型,也是唯一的映射类型:字典还是另一种可变容器类型,且可存储任意类型对象,其中也可包括其他容器 ...

  10. Java 面试宝典

    1. 类的实例化顺序,比如父类静态数据,构造函数,字段,子类静态数据,构造函数,字段,他们的执行顺序 答:先静态.先父后子. 先静态:父静态 > 子静态 优先级:父类 > 子类 静态代码块 ...