<!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. [转]SQL Server为啥使用了这么多内存？

    原文地址:http://support.microsoft.com/gp/anxin_techtip6/zh-cn SQL Server为啥使用了这么多内存? SQL Server的用户,常常会发现S ...

  2. netty 入门（一）

    netty Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序.更确切的讲是一个组件,没有那么复杂. 例子 一  Discard服务器端 我们 ...

  3. Ajax跨域 CROS处理

    Ajax跨域方法有多种 这里介绍CROS跨域的实际案例 场景:A域名 请求 B域名: 暂且 A为客户端 B为服务端: 请求的服务端必须自己能控制 或者服务器端头部已经添加 Access-Control ...

  4. java对象拷贝和复制

    参考文章:http://blog.csdn.net/XIAXIA__/article/details/41652057 解决问题:深拷贝.浅拷贝 和普通的对象赋值有什么区别? 对象复制 例如:Pers ...

  5. TensorFlow简易学习[2]:实现线性回归

    上篇介绍了TensorFlow基本概念和基本操作,本文将利用TensorFlow举例实现线性回归模型过程. 线性回归算法 线性回归算法是机器学习中典型监督学习算法,不同于分类算法,线性回归的输出是整个 ...

  6. Grafana+Prometheus系统监控之webhook

    概述 Webhook是一个API概念,并且变得越来越流行.我们能用事件描述的事物越多,webhook的作用范围也就越大.Webhook作为一个轻量的事件处理应用,正变得越来越有用. 准确的说webho ...

  7. RecyclerView 加入一个滑动控件bug处理 GridView只显示第一行

    如果RecyclerView 多样式布局,比如要加入一个展示多个图看的需求.自然想到用gridview给嵌套一下. 想法当然是可以的,但是发现,嵌套出来的效果是,gridview只显示一行. 想想原因 ...

  8. 关于cocos2d-x面试的问题

    关于高效渲染的问题: 1.先说下渲染批次:这是游戏引擎中一个比较重要的优化指标,指的是一次渲染凋用.也就是说,渲染的次数越少,游戏的运行效率越高. 2.CCSpriteBatchNode就是cocos ...

  9. 推荐一款基于bootstrap的漂亮的前端模板—inspinia_admin

    首先给出Demo网址:http://cn.inspinia.cn inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计.使用Bootstrap 3+ Fra ...

  10. ajax的跨域请求

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...