<!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. Unity3D高性能战争迷雾实现

    效果图 先上效果图吧,这是为了吸引到你们的ヽ(｡◕‿◕｡)ﾉﾟ 战争迷雾效果演示图 战争调试界面演示图 由于是gif录制,为了压缩图片,帧率有点低,实际运行时,参数调整好是不会像这样一卡一顿的. 战争 ...

  2. Mybatis3 快速入门

    Mybatis3 快速入门 目前常见的持久层java框架有Hibernate,Mybatis,SpringData.笔者比较喜欢用SpringData.Hibernate 和 Mybatis 也经常用 ...

  3. AIO5程序中审批跳转条件：超过某一个值必须总经理审批

    以实际需求为例看下系统中如何设置: 客户需求:采购订单中对总金额进行限制,超过20000的话必须要经过总经理审批含税金额<20000:采购部门某个员工发起→直接主管批→财务主管知会含税金额≥20 ...

  4. app打包常用操作

    1.修改appId android:打开build.gradle文件 找到defaultConfig{applicationId 'ceshi'} 修改测试.android studio会提示. Gr ...

  5. spring bean的创建过程

    spring的核心容器包括:core.beans.context.express language四个模块.所以对于一个简单的spring工程,最基本的就是依赖以下三个jar包即可: <depe ...

  6. Servlet之初始化参数和传递数据（ServletConfig，ServletContext ）

    ServletConfig 容器初始化一个Servlet的时候,会为这个Servlet建一个唯一的Servletconfig的对象(Servlet的配置对象) 容器会从部署的描述文件(web.xml) ...

  7. ctags-vim代码间快速跳转

    ctags-vim代码间快速跳转 1.说明 在Linux环境下使用vim进行驱动程序编写和维护的时候,会经常需要调用Linux内核的函数或宏定义,在驱动程序和kernel代码之间频繁跳转是件很繁琐的事 ...

  8. 在Linux中使用线程

    我并不假定你会使用Linux的线程,所以在这里就简单的介绍一下.如果你之前有过多线程方面的编程经验,完全可以忽略本文的内容,因为它非常的初级. 首先说明一下,在Linux编写多线程程序需要包含头文件p ...

  9. Linux上安装 MongoDB ZK MEMCACHE PHP扩展

    安装mongo扩展: 下载地址:https://github.com/mongodb/mongo-php-driver,下载该源码包 /usr/local/php/bin/pecl install m ...

  10. 零基础学习Hadoop

    零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...