在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. 在HyperlinkButton的URL地址里附加多个参数（以http get的方式）

    1.使用 Uri(string uriString,UriType type)创建Uri对象:new Uri("/navigatingPage?key1=value1&key2=va ...

  2. Logback配置连接

    logback 简介 logback 常用配置详解(一)<configuration> and <logger> logback 常用配置详解(二)<appender&g ...

  3. Java Web 项目目录规范

    一.项目结构 这里和其他项目区别不大,我将模板抽离出来,更容易分析和理解: 解释一下:js主要包括extends(引入第三方的js).module(项目模块自己的js).lib(引用包,这里也可以继续 ...

  4. 在HTML中使用JavaScript元素

    script属性<script async = async charset="utf-8" defer="defer" src="index.h ...

  5. 【转】request.getServletPath()和request.getPathInfo()用法

    转自:https://my.oschina.net/sub/blog/182408 在 Web 中,我们通常需要获取 URL 相对于 Webapp 的路径,主要是下面的几个方法: request.ge ...

  6. Oracle OEM

    一.OEM是什么 Oracle Enterprise Manager(Oracle企业治理器,简称OEM)是通过一组Oracle程序,为治理分布式环境提供了治理服务. 二.配置OEM 三.启动OEM ...

  7. network issue troubleshooting

    Today we troubleshooting a lot of network issue by using commands like: ping <ip>/<computer ...

  8. rpm 看 rpm 包内容

    1.命令 rpm #rpm -qpl packetname

  9. errno

    关于errno有以下需要注意: 1  A common mistake is to do if (somecall() == -1) {                printf("som ...

  10. linux 进程通信 管道

    1. 管道概述及相关API应用 1.1 管道相关的关键概念 管道是Linux支持的最初Unix IPC形式之一,具有以下特点: 管道是半双工的,数据只能向一个方向流动:需要双方通信时,需要建立起两个管 ...