在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。布局效果如下：

涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分：

HTML5 语义元素

header

定义文档或节的页眉

nav

定义导航链接的容器

section

定义文档中的节

article

定义独立的自包含文章

aside

定义内容之外的内容（比如侧栏）

footer

定义文档或节的页脚

details

定义额外的细节

summary

定义 details 元素的标题

具体不多说，布局对应的Html代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <title>关于Web页的Html5布局</title>

     <style type="text/css">

     header

     {

         background-color:orange;

         color:White;

         text-align:center;

         height:120px;

         padding:5px;

      }

      nav

      {

          line-height:30px;

          background-color:Lime;

          height:400px;

          width:15%;

          float:left;

          padding:0px;

        }

        aside

        {

            background-color:Gray;

            width:15%;

            height:400px;

            float:right;

            padding:0px;

        }

        section

        {

            width:70%;

            height:400px;

            background-color:Purple;

            float:left;

            padding:0px;

        }

        footer

        {

            background-color:Fuchsia;

            height:120px;

            color:White;

            clear:both;

            text-align:center;

            padding:5px;

         }

         ul

         {

             list-style-type:none;

         }

         .sp

         {

             width:15px;

             padding:5px;

         }

         a

         {

             text-decoration:blink;

         }

     </style>

 </head>

 <body>

     <header>

         <h1>这里是Header,一号标题</h1>

         <div>

             <a href="#">菜单1</a><span class="sp">|</span>

             <a href="#">菜单2</a><span class="sp">|</span>

             <a href="#">菜单3</a><span class="sp">|</span>

             <a href="#">菜单4</a><span class="sp">|</span>

             <a href="#">菜单4</a><span class="sp">|</span>

             <a href="#">菜单5</a><span class="sp">|</span>

             <a href="#">菜单6</a><span class="sp">|</span>

             <a href="#">菜单7</a><span class="sp">

         </div>

     </header>

     <nav>

         <ul>

             <li><a href="#">链接1</a></li>

             <li><a href="#">链接2</a></li>

             <li><a href="#">链接3</a></li>

             <li><a href="#">链接4</a></li>

         </ul>

     </nav>

     <section>

         <h1>

             这里是正文</h1>

         <p>

             这里是段落1</p>

         <p>

             这里是段落2</p>

     </section>

     <aside>

         <h1>

             这里是侧边框</h1>

         <p>

             这里是段落1</p>

         <p>

             这里是段落2</p>

     </aside>

     <footer>

         这里是页脚

     </footer>

 </body>

 </html>

关于Padding , Border,Margin之间的关系，如下图所示：

关于样式的层叠顺序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

Html5 布局方式的更多相关文章

  1. HTML5+CSS3常见布局方式

    1.等高布局 1.1 代码 等高布局是指子元素在父元素中高度相等的布局方式 <div class="father"> <div class="f1&qu ...

  2. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

  3. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  4. Android入门（十）：界面的布局方式及其实际应用

    关于Android界面布局,网上已经有了很多非常不错的学习资料,在这里我也不班门弄斧了,推荐两篇我认为写的不错的教程,然后再重点讲一下几种布局方式的实际应用. 教程链接:①http://www.cnb ...

  5. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

  6. 对比MFC资源文件谈谈WPF布局方式

    对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基 ...

  7. Android 开发之旅：view的几种布局方式及实践

    本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...

  8. 细谈CSS布局方式

    一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...

  9. Android 开发：view的几种布局方式及实践

    View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Tab ...

随机推荐

  1. ASP.NET 给作为隐藏域的TextBox赋值之后提交表单，无响应?

    操作步骤: 给页面隐藏TextBox赋值,然后触发ASP.NET change事件,调用ASP.NET后台方法,调用后执行客户端脚本this.RegisterClientScriptBlock(Dat ...

  2. Beta工作比例（Transcend）

    Beta工作比例 成员 工作 黄志明 10% 洪志兴 10% 李佳恺 17 % 巫振格 17 % 肖承志 10 % 李严 16 % 牛妍辉 stripes 20%

  3. 谈谈PHP代码规范

    [转] http://www.syyong.com/php/Talk-about-PHP-code-specification.html 我向往这样一个php世界,里面没有代码规范之争.你我都一样,都 ...

  4. 【转】TCP协议

    TCP是什么? TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的.可靠的. 基于IP的传输层协议.TCP在IP报文的协议号是6.TCP是一 ...

  5. iOS 与 惯性滚动

    注:以下所有例子均 只 在 iOS 的微信中测试过,但对于饿了么APP的内置浏览器同样适用(两者使用相同内核) 引题 工作中常常有需要显示大量信息的情况,列表超出一屏就涉及到滚动的问题.例如 - va ...

  6. 0421 & SX2016

    山西省选...这个省...不算强吧...然而就是这么腊鸡题目还是wa得一无是处...怎么办啊怎么办啊...无处拯救青春和未来啊... T1: POI2004原题 BZOJ1524 n<=16.这 ...

  7. [NOIP2014]寻找道路 题解

    题目大意: 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足 ...

  8. 自动ftp上传文件脚本

    方法一: echo "open 21.244.88.129 user glxtftp glbzuser bin prompt off cd /glxt/DBINFO lcd /tmp put ...

  9. Linux下uniq命令的详解

           -c 在输出行前面加上每行在输入文件中出现的次数.  -d 仅显示重复行.       -u 仅显示不重复的行. 示例 1.去重,有多行一样的只显示一行cat 4.txt |sort - ...

  10. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...