<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
html,body{height:auto;}
#main{width:1024px;margin:0 auto;height:auto}
header{width:100%;height:120px;border:1px solid #ccc;margin:5px auto}
nav{width:100%;height:40px;margin:5px auto;border:1px solid #F0F;}
aside{width:180px;height:400px;float:left;border:1px solid #F00;}
#content{width:820px;height:400px;float:right;border:1px solid #0F0}
footer{width:100%;height:80px;margin:5px auto;border:1px solid #00F;}
.clear{ clear:both; width:0px; height:0px; visibility:hidden; overflow:hidden;}
</style>
</head>
<body>
<section id="main">
<header>
</header>
<nav></nav>
<aside></aside>
<section id="content"></section>
<div class="clear"></div>
<footer></footer>
</section>
</body>
</html>

简单的html5布局的更多相关文章

  1. Html5 布局方式

    在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关.在新的Html5中,布局却显得更加人性化,更易理解了.如增加了Header,Footer,Sectio ...

  2. Xamarin.Android之简单的抽屉布局

    0x01 前言 相信对于用过Android版QQ的,应该都不会陌生它那个向右滑动的菜单(虽说我用的是Lumia) 今天就用Xamarin.Android实现个比较简单的抽屉布局.下面直接进正题. 0x ...

  3. 简单的html5 File base64 图片上传

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. HTML5 布局标签

    HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站,相对HTML4,HTML5新增的带有语义化的标签可以代替div进行页面布局(与html5.js结合起来时可以放心使用 ) ...

  5. 最简单的html5语言

    什么是 HTML5? HTML5 是下一代 HTML 标准. 最小的HTML5文档 下面是一个简单的HTML5文档: <</span>!DOCTYPE html><< ...

  6. HTML5布局

    完整示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. 简单的RelativeLayout布局

    简单的RelativeLayout布局实例 <?xml version="1.0" encoding="utf-8"?> <RelativeL ...

  8. CSS里总算是有了一种简单的垂直居中布局的方法了

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 简单的网页布局效果html5+CSS3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. C和C++的学习过程总结

    总是被同学们问到,如何学习C和C++才不茫然,才不是乱学,想了一下,这里给出一个总的回复. 一家之言,欢迎拍砖哈. 1.可以考虑先学习C. 大多数时候,我们学习语言的目的,不是为了成为一个语言专家,而 ...

  2. unity3D射线检测敌人是否在前方

    //发射一条射线,去检测玩家是否在自己面前,用来随后的发射炮弹 bool isForward = false; var TranformShootPoint = ai.WorkingMemory.Ge ...

  3. 一种针对虚拟机的应用软件License认证方法

    由于虚拟机的硬件信息可以随意修改,使得虚拟机可能具有相同的硬件信息,在传统的应用软件License认证方式中会导致License认证漏洞.本专利提供了一种有效的解决方法. 文/王宏财 目 前,云计算的 ...

  4. Linux系统监控

    http://my.oschina.net/aiguozhe/blog/35730 http://my.oschina.net/aiguozhe/blog/35730

  5. 【转帖】.Net中C#的DllImport的用法

    在 C# 中通过 P/Invoke 调用Win32 DLL http://msdn.microsoft.com/zh-cn/library/aa686045.aspx   大家在实际工作学习C#的时候 ...

  6. cmake编译（编译目标）x86或x64

    if(CMAKE_CL_64)    #CMAKE的内建变量,如果是true,就说明编译器的64位的,自然可以编译64bit的程序 set(ADDRESS_MODEL 64) set(NODE_TAR ...

  7. mysql----用户root被删除或忘记root密码的解决方案

    修改文件my.cnf,可用VIM打开,如:sudo vim /etc/my.cnf 在[mysqld]下加上一行: skip-grant-tables 保存文件,然后重启mysqld程序:sudo s ...

  8. Factorials 阶乘

    Description N的阶乘写作N!表示小于等于N的所有正整数的乘积.阶乘会很快的变大,如13!就必须用32位整数类型来存储,70!即使用浮点数也存不下了.你的任务是找到阶乘最后面的非零位.举个例 ...

  9. UVA1218--树形DP

    没有看书和题解做的一道树形DP题,思路很清晰..只是debug上花了很久的时间才发现看错了条件..并不是每个点都只能和一台服务器相邻,而是非服务器的点只能和一台服务器相邻..看错了一个条件差距大了去了 ...

  10. Appstore 创建App步骤

    .进入AppInformation界面 defaultLanguage:选择默认语言 AppName:填写在Appstore上显示的名字 SKUNumber:填写一个唯一标示符,这个只要唯一即可,不能 ...