也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

布局是创建网站时不可或缺的过程，通过它可以改变网页中内容的排列方式，使页面看起来更加合理美观。在布局过程中，您还可以使用 CSS 更改 HTML 标记的样式，或使用 JavaScript 为页面添加特殊效果。

前面在 HTML 块级元素和内联元素的介绍中提到过标签html5布局案例，

是专门用于布局的标签，HTML4主要依靠

布局的标签。但

它是一个包罗万象的标签，没有明确的语义，没有表明当前蓝筹的作用，不利于搜索引擎理解页面的内容。

为了改进传统的布局模式，HTML5提出了一些专门用于布局的标签，用于定义网页的不同部分，语义也越来越清晰。HTML5 布局标记如下所示：

标签说明

用于定义网页的颈部，头部通常包含一些介绍性内容html5布局案例，例如网站名称、徽标或作者的信息。

用于定义网页中的导航栏。

用于在网页中定义一个单独的部分，该部分可以包含文本、图像、表格等。

表示 HTML 文档中的“节”或“段落”，“段”可以理解为

根据主题在文章中的片段，“节”可以理解为页面中的分组。它的主要作用是阻止页面的内容或细分文章的内容。

用于定义表示页面上自包含内容的文章或其他独立信息，例如峰会文章、博客文章、用户评论等。

用于定义网页内容之外的部分，例如网页的侧边栏。

用于定义页面顶部，例如作者、版权等。

用于定义一些详尽的信息，这些信息可以根据需要隐藏或显示。

用于定义标签的标题。

每个标签适用的蓝筹股如下所示

图 1：HTML 布局标记演示

以下示例演示如何使用前面描述的标记对网页进行布局

    body {
        font: 14px Arial,sans-serif;
        margin: 0px;
    }
    header {
        padding: 10px 20px;
        background: #acb3b9;
    }
    header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2;
    }
    nav, section {
        float: left;
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }
    nav {
        width: 20%;           
        background: #d4d7dc;
    }  
    nav ul {
        list-style: none;
        line-height: 24px;
        padding: 0px;
    }
    nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background: #acb3b9;          
        text-align: center;
        padding: 5px;
    }



    

        

            
C语言中文网
        
        

            
            

                
网站简介
                
C语言中文网创办于 2012 年初，是一个在线学习编程的网站。C语言中文网已经发布了众多优质编程教程，包括C语言、C++、Java、Python 等，它们都通俗易懂，深入浅出。
                
C语言中文网将会持续更新，并且不忘初心，坚持创作优质教程。
            
        
        
    

运行结果如下：

图 2：HTML 布局示例

关注公众号“站长颜长生”，阅读手机上的所有教程，随时随地学习。包括一个搜索工具，以及从网络上免费下载书籍和视频。

HTML5联通页面适配方法

以前做PC页面的时候html5移动端，考虑最多的就是兼容性，这是浏览器之间的差异造成的。 而联通这边，基本不存在“兼容”问题。 都是CSS3。 是不是很开心，而且太早了，因为适应问题，痛哭了~~~

什么是“适应”？ 简单来说，当我们开始制作联通终端页面时，设计师给出了一个长度为750px的设计图。 这样一来html5移动端，这张设计图在每部手机上实现的过程就是“适配”。

目前中国联通的适配方式有四种：

1.CSS3媒体查询

CSS3媒体查询可用于为不同媒体设置不同的CSS样式。 这里的“媒体”包括页面规范、设备屏幕规范等。比如我们要为长度小于375px的页面中class="content"的元素设置样式。 可以这样写，@mediascreenand(min-width=375px){.content{styles}};

中国联通设备显示规格百科CSS3媒体查询：

@mediascreenand(min-width:212px){/*213px显示样式LGOptimusOne*/}

@mediascreenand(min-width:319px){/*320px显示样式 Apple 4/4S/5C/5S Blackberry Z30*/}

@mediascreenand(min-width:359px){/*360px 显示示例