<!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. Javaweb学习(一)：tomcat服务器配置与启动

    目前所使用的集成开发环境为myeclipse10.7,tomcat版本为apache-tomcat-7.0.82,部分编写地方可能有所不同,但是工具不是最主要的,重要的是掌握的知识. tomcat在m ...

  2. 关于web程序中使用KindEditor向数据库插入带有格式的数据时出现的问题

    最近做一个项目,需要对输入的文字在存入数据库之前进行文本格式编辑,于是我用到了KindEditor,当然怎么用在asp.net页面中,这里就不过多叙述了. 主要是遇到在将赋予格式的文本插入数据库时遇到 ...

  3. JavaScript学习心得

    javaScript十分的强大,所以自然而然学起来也是不易的,想要掌握它的核心,把它理解透更是不易的,但只要你能够静下心来,耐心的去钻研,学习,还是可以把它给学好的,加油吧! 下面是一些JavaScr ...

  4. C语言之++--

    #include<stdio.h>int main(){int num,count=0,i=0;scanf("%d",&num);printf("nu ...

  5. HDU5410--01背包+完全背包

    CRB and His Birthday Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  6. VMware12提示 已将该虚拟机配置为使用 64 位客户机操作系统。但是，无法执行 64 位操作。

    VMware12提示 已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态 解决办法: 下载LeoM ...

  7. 计算rem

    (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...

  8. Java调用C# DLL

    由于项目需要,利用了短信猫,但是一个短信猫会加载多个串口,而只需要其AT口,通过java代码,获取其AT口对应的串口号比较困难,于是通过C#获取,这里直接调用C#生成的DLL,但java不能直接调用C ...

  9. NOI导刊2010提高装备运输

    www.luogu.org/problem/show?pid=1794 挺裸的一题背包,算很基础. 可以运用的技巧是三维->二维(节省空间还能少敲一点代码 #include<iostrea ...

  10. float和double的区别

    1.float是单精度类型,精度有效数字为6位,超出则会四舍五入,取值范围为10的-38次方到10的38次方,float占用存储空间为4个字节. 2.double是双精度类型,精度有效数字为15位,超 ...