Html5 通用布局方式

最新推荐文章于 2024-07-25 10:59:09 发布

老码识途呀

最新推荐文章于 2024-07-25 10:59:09 发布

阅读量5.2k

点赞数 12

分类专栏：前端开发基础文章标签： html5 css html

本文版权归作者和CSDN共有，写文不易，支持原创，欢迎转载【点赞】，转载请保留此段声明，且在文章页面明显位置给出原文连接，谢谢。

本文链接：https://blog.csdn.net/fengershishe/article/details/120190074

版权

前端开发基础专栏收录该内容

17 篇文章 3 订阅

订阅专栏

概述

在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。本文以一个简单的小例子，简述Html5的布局相关知识，仅供学习分享使用，如有不足之处，还请指正。

HTML5 语义元素

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

示例效果图

布局效果如下：

布局源码

布局对应的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>

CSS小知识

元素内间距，边框，外间距之间的关系

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

样式的层叠远近顺序

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

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

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

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

CSS样式设置顺序

关于CSS样式，当样式要作用于四个方向或四条边时，可单独设置，也可以统一设置，如下所示：

设置一个值，统一作用于四条边，如下所示：

设置两个值，第1个值代表上，下，第2个值代表右，左，如下所示：

设置三个值，代表顺序，上，右，下，第四个值为空，和右保持一致，如下所示：

设置四个值，代表顺序，上，右，下，左，依次分别设置，如下所示：

在一个声明中，设置所有属性的值，顺序依次为：border-width,border-style,border-color，如：border，如下所示：

备注

谒金门·风乍起

【作者】冯延巳【朝代】五代

风乍起，吹皱一池春水。
闲引鸳鸯香径里，手挼红杏蕊。
斗鸭阑干独倚，碧玉搔头斜坠。
终日望君君不至，举头闻鹊喜。

老码识途呀

关注

12
点赞
踩
44

收藏

觉得还不错? 一键收藏
打赏
1
评论
Html5 通用布局方式

概述在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。本文以一个简单的小例子，简述Html5的布局相关知识，仅供学习分享使用，如有不足之处，还请指正。HTML5 语义元素涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分：示例效果图布局效果如下：布局源码
复制链接

扫一扫