布局

实例:规范的命名和编排

<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. JOSN转列格式(csv文件)

    推荐网站 https://json-csv.com/ 限制1M大小

  2. java实现pdf按页切分成图片

    package com.ces.component.pictrueCut.entity; import java.awt.Image; import java.awt.Rectangle; impor ...

  3. ios7自定义返回按钮后,右滑返回功能失效解决方法

    -(void)viewWillAppear:(BOOL)animated{     [super viewWillAppear:animated];     //开启ios右滑返回     if ([ ...

  4. mac 安装软件

    一.安装spark 1.官网下载最新tar文件 2.解压 3.安装java开发环境 3.1.安装下载java 8  https://www.oracle.com/technetwork/java/ja ...

  5. Connection reset by peer原理解析

    “Connection reset by peer”代表什么?“Connection reset by peer”表示当前服务器接受到了通信对端发送的TCP RST信号,即通信对端已经关闭了连接,通过 ...

  6. ReactiveX 学习笔记(21)使用 Rx.NET + ReactiveUI 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...

  7. 云笔记项目-笔记列表弹出"分享移动删除"子菜单

    业务需求: 笔记列表里还有一个按钮可以弹出子菜单,要求做到以下几点: (1)点击选中的笔记行的弹出按钮后,弹出子菜单,再次点击,子菜单收回. (2)选中其他笔记后,子菜单消失.效果如下图所示: 业务分 ...

  8. DB2在dbvisualizer 客户端执行begi/end 语句块

    注意,begin end 代码块在dbvisualizer 执行前要加 --/   后面要加   / 注意,begin end 代码块在dbvisualizer 执行前要加 --/   后面要加    ...

  9. FortiGate 路由

    1.静态路由 防火墙外网口wan1 ip地址为202.1.1.2,对端ISP路由器G1/0口地址为202.1.1.1. 菜单: 路由--静态--静态路由,点击 "创建新的",按如下 ...

  10. node.js中stream流中可读流和可写流的使用

    node.js中的流 stream 是处理流式数据的抽象接口.node.js 提供了很多流对象,像http中的request和response,和 process.stdout 都是流的实例. 流可以 ...