<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>    </title>

<script>

document。createElement("header");

document.createElement("article");

document.createElement("aside");

document.createElement("section");

document.createElement("footer");

</script>

<style>

body{margin:0;}

header{height: 100px; background: #9F3; display: block;}

article{padding:10px; background: #CF6; overflow: hidden; zoom:1; position: relative; display: block;}

section{margin-left:210px; background:#F90; height:300px; width: 800px; position: absolute; left: 10px;top: 10px; display: block;}

aside{width:200px; height:300px; background: #F90; height:300px; display: block;}

footer{height:100px; background: #C6C; display: block;}

</style>

</head>

<body>

    <header>页面头部部分</header>

<article>

  <aside>侧边栏</aside>

  <section>内容区域</section>

</article>

<footer>内容部分</footer>

</body>

</html>

兼容ie 6 7 8

html5新增标签及兼容的更多相关文章

  1. 盒子模型，定位技术，负边距，html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  2. html5新增标签/删除标签

    闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...

  3. 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题

    https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...

  4. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  5. html5新增标签兼容性

    很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...

  6. CSS3主要知识点复习总结+HTML5新增标签

    文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...

  7. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  8. HTML5新增标签及具体用法

    html5自从推广普及以来,迅速被各大浏览器支持.采用html5设计的网页逐渐成为网页设计的时尚.下面就温习下html5的新增标签. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数 ...

  9. HTML5新增标签的汇总与详解

    趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...

随机推荐

  1. PAT 1032. 挖掘机技术哪家强(20)

    为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每行给出一位 ...

  2. Log4j的ConversionPattern参数的格式含义

    Log4j建议只使用四个级别,优先级从高到低分别是ERROR.WARN.INFO.DEBUG#这里定义能显示到的最低级别,若定义到INFO级别,则看不到DEBUG级别的信息了~!log4j.rootL ...

  3. Windows 8 下离线安装。net Framework 3.5

    Windows 8 下安装.net Framework 3.5 1)可以将直接双击ISO (或放入光盘/U盘)(安装文件在F盘) 2)使用管理员权限运行命令行程序 3)dism.exe /online ...

  4. hibernate与ibatis比较

    hibernate 是当前最流行的o/r mapping框架,它出身于sf.net,现在已经成为jboss的一部分了. ibatis 是另外一种优秀的o/r mapping框架,目前属于apache的 ...

  5. Java使用代理服务器

    HTTP协议是基于TCP协议的,TCP协议在Java中的体现就是套接字.在了解HTTP协议的基础上,完全可以通过TCP来实现一套HTTP库,这个库可以发起网络请求和接受网络请求.只要能用URLConn ...

  6. @Autowired的使用

    1.benas的xml文件中需要加入如下代码 <bean class="org.springframework.beans.factory.annotation.AutowiredAn ...

  7. UITableView的使用

    参考:IOS7.0 programming cookbook. http://www.cnblogs.com/kenshincui/p/3931948.html http://blog.csdn.ne ...

  8. get last dirname/filename in a file path argument

    $ dirname /home/train/00.incipient_data/data_for_gene_prediction_and_RNA-seq/240_rep2.fastq /home/tr ...

  9. Spring AOP动态切换数据源

    现在稍微复杂一点的项目,一个数据库也可能搞不定,可能还涉及分布式事务什么的,不过由于现在我只是做一个接口集成的项目,所以分布式就先不用了,用Spring AOP来达到切换数据源,查询不同的数据库就可以 ...

  10. AI贪吃蛇（二）

    前言 之前写过一篇关于贪吃蛇AI的博客,当时虽然取得了一些成果,但是也存在许多问题,所以最近又花了三天时间重新思考了一下.以下是之前博客存在的一些问题: 策略不对,只要存在找不到尾巴的情况就可能失败, ...