<!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. 【玩转树莓派】使用 sinopia 搭建私有 npm 服务器

    简介 使用 sinopia 的好处是,node系的工程师,内部协作时,使用自有 npm 包,会非常方便:另外,sinopia,会缓存已经下载过的包,可以在相当程度上,加速 npm install 相关 ...

  2. linux expect自动登陆远程服务器 批量管理服务器

    #!/usr/bin/expect set ipaddress [lindex $argv 0] set passwd [lindex $argv 1] set timeout 3 spawn ssh ...

  3. springboot(十六)：使用Jenkins部署Spring Boot

    jenkins是devops神器,本篇文章介绍如何安装和使用jenkins部署Spring Boot项目 jenkins搭建 部署分为三个步骤: 第一步,jenkins安装 第二步,插件安装和配置 第 ...

  4. css实现左侧固定宽，右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  5. kafka 集群搭建

    环境:ubuntu14.04 版本:jdk1.8,zookeeper 3.4.10,kafka 2.11 搭建步骤: 1. 搭建zookeeper集群 参考链接:zookeeper集群搭建 2. 下载 ...

  6. Rigidbody组件及相关API

    Rigidbody:刚体组件,物理类.(与Rigidbody组件相关的代码尽量都写在FixedUpdate()方法中,如果写在Update()中有可能会卡顿) 属性:Mass:质量.         ...

  7. 《java.util.concurrent 包源码阅读》22 Fork/Join框架的初体验

    JDK7引入了Fork/Join框架,所谓Fork/Join框架,个人解释:Fork分解任务成独立的子任务,用多线程去执行这些子任务,Join合并子任务的结果.这样就能使用多线程的方式来执行一个任务. ...

  8. Python简单爬虫

    爬虫简介 自动抓取互联网信息的程序 从一个词条的URL访问到所有相关词条的URL,并提取出有价值的数据 价值:互联网的数据为我所用 简单爬虫架构 实现爬虫,需要从以下几个方面考虑 爬虫调度端:启动爬虫 ...

  9. Mysql--触发器的操作

    1.为什么使用触发器 2.创建触发器 2.1 创建有一条执行语句的触发器 例子:在数据库company中存在两个表对象:部门表(t_dept)和日记表(t_diary),创建触发器实现向部门表中插入记 ...

  10. Ztree改版 - 将图标字体化 - fontAwesome

    引言 ps:小白可以一看,大神勿打~ 用过 ztree 的盆友们都知道,ztree 功能强大,就功能上来说,追求着“无处不按钮”的体验,但好用不好看.可能有朋友说:“我这棵树只有我自己看,够用就行” ...