布局

实例：规范的命名和编排

<body>

<div class="page"><!--page开始-->

    <header class="masthead" role="banner"><!--masthead开始-->

        <p class="logo"><a href="#"><img src="logo.png"/>Logo图片</a></p>

        <ul class="socical-sites">

            <li><a herf="#"><img src="pics-01.png"/>图片01</a></li>

            <li><a herf="#"><img src="pics-02.png"/>图片02</a></li>

            <li><a herf="#"><img src="pics-03.png"/>图片03</a></li>

        </ul>

        <nav role="navigation">

            <ul>

                <li><a herf="#">主导航栏01</a></li>

                <li><a herf="#">主导航栏02</a></li>

                <li><a herf="#">主导航栏03</a></li>

            </ul>

        </nav>

    </header><!--masthead结束-->

    <div class="container"><!--container开始-->

        <main role="main"><!--main开始-->

            <h1>主题内容</h1>

            <article>

                <hgroup>

                    <h1>文章主标题</h1>

                    <h2>文章副标题</h2>

                </hgroup>

                <section class="post">

                    <h1>章节内容01</h1>

                    <img src="post01.png" class="post-photo-full"/>

                    <div class="post-blurb">

                        <p>推荐广告</p>

                    </div>

                    <footer class="footer">

                        <ul>

                            <li><a herf="#">章节条目页脚04</a></li>

                            <li><a herf="#">章节条目页脚05</a></li>

                            <li><a herf="#">章节条目页脚06</a></li>

                        </ul>

                    </footer>

                </section>

                <section class="post">

                    <h1>章节内容02</h1>

                    <img src="post02.png" class="post-photo"/>

                    <div class="post-blurb">

                        <p>推荐广告</>

                    </div>

                    <footer class="footer">

                        <ul>

                            <li><a herf="#">章节条目页脚04</a></li>

                            <li><a herf="#">章节条目页脚05</a></li>

                            <li><a herf="#">章节条目页脚06</a></li>

                        </ul>

                    </footer>

                    <nav role="navigation">

                        <ol>

                            <li><a herf="#">章节有序列表07</a></li>

                            <li><a herf="#">章节有序列表08</a></li>

                            <li><a herf="#">章节有序列表09</a></li>

                        </ol>

                    </nav>

                </section>

            </article>

        </main><!--main结束-->

        <div class="sidebar"><!--sidebar开始-->

            <article class="about">

                <h2>About me工具栏</h2>

            </article>

            <aside>

                <h2>侧栏1</h2>

                <ul class="links">

                    <li>侧栏列表01</li>

                    <li>侧栏列表02</li>

                    <li>侧栏列表03</li>

                </ul>

            </aside>

            <aside>

                <h2>侧栏2</h2>

                <ul class="links">

                    <li>侧栏列表04</li>

                    <li>侧栏列表05</li>

                    <li>侧栏列表06</li>

                </ul>

            </aside>

        </div><!--sidebar结束-->

    </div><!--container结束-->

    <footer role="contentinfo" class="footer"><!--footer开始-->

        <p class="legal"><small>&copy;2017 Adeline zhang</small></p>

    </footer><!--footer结束-->

</div><!--page结束-->

</body>

对旧版浏览器为Html5添加样式

HTML5 shiv

Modernizr

对默认样式进行重置或标准化

normalize

盒模型



背景（蓝色区域）：会延伸到边框的后面，通常情况下仅在内边距所延伸到的区域可见，除非边框是透明或者半透明

1.内边距padding：内容区域与边框的距离，背景颜色会填充内容区域和内边距

2.外边距：元素与其他元素之间的空间

css的width：内容区域的宽度

浏览器显示的宽度：内容宽度+左右内边距+左右边框

默认盒模型、box-sizing:border-box盒模型

Html5与Css3知识点拾遗（七）的更多相关文章

  1. Html5与Css3知识点拾遗（二）

    页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...

  2. Html5与Css3知识点拾遗（八）

    css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...

  3. Html5与Css3知识点拾遗（六）

    web字号 px() 百分比(较常用) em(最常用):一般1em=16px,相对单位.以父元素作参照系,父元素大小是不确定的 body{ font-size:100%; /*父元素默认为16px*/ ...

  4. Html5与Css3知识点拾遗（五）

    css3更新的颜色 RGBA:红.绿.蓝.不透明度 rgba(89,0,127,0.4); HSL和HSLA:色相.饱和度.亮度.不透明度 hsl(282,100%,25%); hsl(282,100 ...

  5. Html5与Css3知识点拾遗（九）

    css布局 控制元素的显示类型和可见性 块级元素 dispaly:block: 行内元素(不能设置宽度) display:inline: 不接受padding设置,但padding-top和paddi ...

  6. Html5与Css3知识点拾遗（四）

    web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...

  7. Html5与Css3知识点拾遗（三）

    文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...

  8. Html5与Css3知识点拾遗（一）

    1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...

  9. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

随机推荐

  1. linux下自定义dubbo的shell脚本

  2. scrapy-items

    items定义字段名字 import scrapy class HrItem(scrapy.Item): # define the fields for your item here like: ti ...

  3. scp: command not found

    scp 不能用? [root@doc]# scp jdk-8u144-linux-x64.tar.gz root@10.10.10.17:/root/ root@10.10.10.17's passw ...

  4. leetcode19

    class Solution { public: ; ; ListNode* removeNthFromEnd(ListNode* head, int n) { ; ListNode* node = ...

  5. Eclipse 如何查看源代码

    Eclipse 关联源代码:

  6. Linux命令行报错 bash: cannot create temp file for here-document: No space left on device

    今天Linux服务器出问题了,使用"tab"补全命令时,提示 bash: cannot create temp file for here-document: No space l ...

  7. BlockTrain网络

    [BlockTrain网络] 1.每个节点都参与全⽹络的路由功能,同时也可能包含其他功能.每个节点都参与验证并传播交易及区块信息,发现并维持与对等节点的连接.在图6-1所⽰的全节点⽤例中,名为“⽹络路 ...

  8. day40 mysql数据类型

    复习 1.环境的搭建 2.启动服务 3.库,表,字段的基本操作 create show drop alter desc insert into select from update set delet ...

  9. m_sequencer、p_sequencer

    https://blog.csdn.net/zhajio/article/details/79608323 p - parent sequencer - 要处理的实际sequencer类型的句柄,这个 ...

  10. Linux基础知识回顾及BASH学习

    2019-2020-030189224 <网络攻防技术与实践>第一周学习总结 Linux基础知识错题回顾 1.Linux中使用(B)命令新建空白文件. A .mkdir B .touch ...