HTML&CSS

HTML

W3School离线手册，进入界面 ctrl+F 搜索功能

记事本可以写文本文件

扩展名：.html

根标签：

一个页面有且仅有一个根标签：所有内容都应写到里面

子标签： head的内容不会在网页里直接显示，head是帮助浏览器解析网页的

是head的子标签：内容显示在网页的标题栏 <body> </body> ：表示网页的主题，网页中让用户看的东西都写到body里 ###### <h5 class="md-end-block md-heading">< body > 中一共有六级标签 //但表现一般用css，使用html标签时，关心的是标签的语义</h5> <pre class="md-fences md-end-block ty-contain-cm modeLoaded"><h1>一级标题 </h1> //六级标题中h1最重要（只写一个），重要性依次降低，一般使用到h3 . //h3以后不怎么用 . ? <h6>六级标题 </h6></pre> <pre class="md-fences md-end-block ty-contain-cm modeLoaded"><hr /> //分割线</pre> <h5 class="md-end-block md-heading">段落标签 表示一个自然段</h5> html中字符之间再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析 <pre class="md-fences md-end-block ty-contain-cm modeLoaded">表示一个段落</pre> <h5 class="md-end-block md-heading"> 表示换行</h5> <pre class="md-fences md-end-block ty-contain-cm modeLoaded"> 呵呵， // 也可以 </pre> <h5 class="md-end-block md-heading">实体 / 转义字符</h5> <pre class="md-fences md-end-block ty-contain-cm modeLoaded"> &实体的名字; < < > > 空格 </pre> <h5 class="md-end-block md-heading">图片标签 < img /></h5> <! --使用img标签来向网页中引入一个外部图片，img标签也是一个自结束标签 属性： src：设置一个外部图片的路径，目前我们所要使用的路径全部都是相对路径。 <pre class="md-fences md-end-block ty-contain-cm modeLoaded">src="文件名/子文件名/图片.gif" <img src="../1.gif" /> // ../ 表示返回上一层目录</pre> alt：可以用来设置在图片不能显示时，对图片的描述 搜索引擎通过alt属性来识别不同的图片 width：可以用来修改图片的宽度，一般用px作为单位(像素) height：可以用来修改图片的高度，一般用px作为单位 （宽度和高度两个属性如果设置一个，另一个也会同时等比例调整大小除非同时指定） 一般开发中除了自适应的页面，不建议设置width 和high <pre class="md-fences md-end-block ty-contain-cm modeLoaded"><img src="1.gif" />  <img src="1.gif" alt="这是一个大松鼠" width="200px" high="500px"/> </pre> <h5 class="md-end-block md-heading">图片格式</h5> IPEG(JPG) ：支持的颜色比较多可以压缩，但不支持透明 -- 一般用来保存照片等颜色丰富的图片 GIF ： 支持的颜色少，只支持简单的透明（直线的），支持动态图 -- 一般图片颜色单一或者动态图时可以使用gif PNG： 支持的颜色多，支持复杂的透明 -- 可用来显示颜色复杂的透明的图片 图片使用原则： 效果不一致，使用效果好的 效果一致，使用小的 <h6 class="md-end-block md-heading">注：文件资源管理选项，查看中的高级设置，将文件扩展名显示出来</h6> <h5 class="md-end-block md-heading"> 注释</h5> <h6 class="md-end-block md-heading">font 属性标签：（在开始标签里添加 color ="颜色" ()相当于一个名值对）</h6> <pre class="md-fences md-end-block ty-contain-cm modeLoaded"> 属性名=”属性值“ size color face 都可以同时设置，size属性范围：1-7 //不赞成使用该标签</pre> <pre class="md-fences mock-cm md-end-block"><h1>这是我的第二个<fond>网页</h1> //把“第二个”这三个字单独设置成红色</pre> <h4 class="md-end-block md-heading">文档声明</h4> <pre class="md-fences mock-cm md-end-block"><!doctype html> //文档前一定要写 </pre> <h4 class="md-end-block md-heading">乱码问题</h4> 中文系统的浏览器中，默认都是使用GB2312进行解码的 notepad++ 要选utf-8 无bom格式 !- 需要告诉网页编码的字符集： <pre class="md-fences mock-cm md-end-block"><!-meta 标签设置网页的元数据，比如：字符集，关键字，简介 meta是自结束标签 --> <meta charset ="utf-8"/> </pre> <h5 class="md-end-block md-heading">meta标签 </h5> 搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响搜索引擎中的排名 <pre class="md-fences mock-cm md-end-block"> meta标签还可以用来设置网页的关键字 <meta name="keywords" content="HTML5,前端，haha" /> 还可以用来指定网页的描述 <meta name="description" content="发布h5,js等前端信息" /></pre> <h6 class="md-end-block md-heading">使用meta可以用来做请求的重定向 </h6> <pre class="md-fences mock-cm md-end-block"><meta http-equiv="refresh" content="秒数;url=目标路径" /> <meta http-equiv="refresh" content="5;url=http://www.baidu.com" /> //5秒后页面跳转，重定向到百度</pre> <h4 class="md-end-block md-heading">html的语法规范（xhtml）</h4> 1.html中不区分大小写，但一般都是用小写 2.注释不能嵌套 3.标签结构必须完整，要么成对出现，要么自结束标签 4.html标签可以嵌套，不可以交叉嵌套 5.标签必须有值，且值必须加引号（双引号单引号都可以） <h4 class="md-end-block md-heading">内联框架(不推荐使用，因为内联框架中的内容不会被搜索引擎所检测)</h4> 使用内联框架可以引入一个外部页面；使用iframe创建一个内联框架 属性： src:指向一个外部页面的路径，可以使用相对路径 width： height： name：可以为内联框架指定一个name属性 <pre class="md-fences mock-cm md-end-block"><iframe src="demo02.html"></iframe></pre> <h4 class="md-end-block md-heading">超链接</h4> 可以从一个页面跳转到另一个页面；使用 <a>标签创建超链接 属性： href:指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址 target:用来指定打开标签的位置 _self,表示在当前窗口打开（默认值） _blank,在新的窗口打开 可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开 <pre class="md-fences mock-cm md-end-block"><a href="http://www.baidu.com">我是一个超链接</a> <a href="demo03.html">我是一个超链接</a> <a href="#">我是一个超链接</a> //当超链接地址不确定时可以用#作为占位符</pre> <h6 class="md-end-block md-heading">center 标签中的内容会默认居中显示（表现不推荐使用） </h6> <h5 class="md-end-block md-heading">回到顶部（# 功能）</h5> 若将地址设置成#，则点击超链接以后，会自动跳转到当前页面的顶部 <h5 class="md-end-block md-heading">去底部</h5> html中有一个属性，每一个元素都可以设置，该属性可以作为标签唯一的标识，这个属性就是id 注： 1.id不可以以数字开头 2.页面同样id只有一个 所以，想跳转到id为某某的元素所在元素的位置，直接在href中写 #id属性值 <h4 class="md-end-block md-heading">发送电子邮件的超链接</h4> 点击链接以后可以自动打开计算机中默认的邮件客户端 < a href="mailto:邮件地址">联系我们</a> <h1 class="md-end-block md-heading">CSS</h1> 方式一：内联样式（不推荐） 可以将css样式编写到元素的style属性当中，每个样式写完了要分号结尾 -- 将样式编写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用 不方便重复使用，结构与表现耦合，不方便后期的维护 <pre class="md-fences mock-cm md-end-block">呵呵 </pre> 方式二：内部样式表 将CSS样式编写到head中的style标签里,将样式表编写到style标签中，然后通过css选择器选中指定元素；然后可以同时为这些元素一起设置样式，这样可以使样式进一步复用 该方式使表现和结构进一步分离它是我们推荐的使用方式 <pre class="md-fences mock-cm md-end-block"><head> <style type="text/css"> p{ color:red; font-size:40px; } </style> </head></pre> type="text/css" 可写可不写，为了兼容一些老的浏览器 方式三：外部的css文件（最推荐） 编写到css外部文件中；（文件后缀 .css）;然后通过link标签来讲外部的css文件引入当前文件中 将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用 最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器缓存加快用户访问的速度，提高了用户体验； <pre class="md-fences mock-cm md-end-block"><head> <link rel="styleheet" type="text/css" href="style.css"/> </head></pre> <h6 class="md-end-block md-heading">style 里面不能用html的语句</h6> <h5 class="md-end-block md-heading">css的注释</h5> 快捷注释：选中 ctrl+shift+/ <pre class="md-fences mock-cm md-end-block">/* */</pre> <h5 class="md-end-block md-heading">css的语法</h5> <pre class="md-fences mock-cm md-end-block"> 选择器： -通过选择器可有选中页面中的指定元素，并将声明块的样式应用到选择器对应的元素上声明块： - 声明块紧跟在选择器的后面，使用{}括起来，声明块中实际上就是一组一组的名值对结构这一组一组的名值对我们称为声明，一个声明块可使用多个声明，用；隔开，声明的样式名和样式值之间使用：来连接</pre> #### <h3 class="md-end-block md-heading">Hbuilder </h3> 新建一个web项目，编写html文件，若没有框架 ->输入！并按tab键->自动生成 <h6 class="md-end-block md-heading">ctrl +D 删除一行</h6> <h6 class="md-end-block md-heading">标签名+tab键建立完整标签</h6> <h6 class="md-end-block md-heading">查看页面：可以直接往浏览器里拖拽</h6> <h6 class="md-end-block md-heading">ctrl +shift+R 复制一行</h6> <h6 class="md-end-block md-heading">ctrl+回车换行</h6> <h4 class="md-end-block md-heading">块元素和内联元素</h4> div就是一个块元素，所谓的块元素就是会独占一行的元素，无论他的内容有多少，他都会独占一行， p h1 h2 h3 ...都独占一行 - div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里面的元素设置任何的默认样式 作用： div元素主要对网页进行布局 <pre class="md-fences mock-cm md-end-block"><div style=" width:200px;"> </div></pre> <h5 class="md-end-block md-heading">内联元素</h5> span是一个内联元素（行内元素） 所谓的行内元素，指的是只占自身大小的元素，而不是一整行 常见的内联元素： a img iframe span span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式 作用： 内联元素主要用来选中文本设置样式 <h6 class="md-end-block md-heading">一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素</h6> a元素可以包含任何元素，但除了a本身。 p元素不可以包含任何块元素 <h5 class="md-end-block md-heading">元素选择器</h5> 作用：通过元素选择器可以选择页面中的所有指定元素 语法：标签名{} <h5 class="md-end-block md-heading">id选择器</h5> #id名 <pre class="md-fences mock-cm md-end-block">#p1{ font-size：20px; }</pre> <h3 class="md-end-block md-heading">class属性</h3> class属性和id属性类似，只不过class属性可以重复 可以同时为一个元素设置多个calss属性值，多个值之间用空格隔开 <pre class="md-fences mock-cm md-end-block">呵呵</pre> <h4 class="md-end-block md-heading">类选择器</h4> 通过元素的class属性值选中一组元素 语法：.class名 <pre class="md-fences mock-cm md-end-block">.p2{ color：red； font-size：40px； }</pre> <h4 class="md-end-block md-heading">选择器分组（并集选择器）</h4> - 可以同时选中多个选择器对应的元素 - 语法：选择器1，选择器2，选择器N{} <h4 class="md-end-block md-heading">通配选择器</h4> <pre class="md-fences mock-cm md-end-block">- 用来选中页面中的所有元素 - 语法：*{}</pre> <h4 class="md-end-block md-heading">交集选择器</h4> 作用：可以选中同时满足多个选择器的元素 语法：选择器1选择器2选择器N{} <h6 class="md-end-block md-heading">对于id选择器不建议使用复合选择器</h6> <h6 class="md-end-block md-heading">元素之间的关系</h6> 父元素：直接包含子元素的元素 子元素：直接被父元素包含的元素 祖先元素：包括父元素 后代元素： 兄弟元素： <h4 class="md-end-block md-heading">后代元素选择器</h4> 指定元素的指定后代 语法： 祖先元素后代元素后代的后代{} -- 中间空格隔开，可以是#id，也可以是元素，也可以是* ；尽量不要写长，选择器越短越好 <h4 class="md-end-block md-heading">子元素选择器（IE6以下的浏览器不支持）要问清</h4> 作用：选中指定父元素的指定子元素 语法： 父元素>子元素{} <h4 class="md-end-block md-heading">兄弟类型选择器</h4> <h5 class="md-end-block md-heading">A+B 类型选择器 -------will select all B elements that directly follow A (brother)</h5> 仅仅选择后紧挨着的一个兄弟B <h5 class="md-end-block md-heading">A~B 选择器 ----------will select all B that follow A （brother）</h5> 选择A后的所有兄弟B <h4 class="md-end-block md-heading">子伪类选择器</h4> <h5 class="md-end-block md-heading">：first-child 选择器 ---------selects all first child elements</h5> P:first-child ---- selects all first child elements. div p:first-child -----selects all first childelements that are in a <div> <h5 class="md-end-block md-heading">:only-child 选择器 ----用法同上，孩子也可用*表示</h5> <h5 class="md-end-block md-heading">:last-child 选择器 -----selects all last-child elements.</h5> span:last-child selects all last-child elements. ul li:last-child selects the last <li> elements inside of any <ul>. <h5 class="md-end-block md-heading">：nth-child(8) 选择器 ----selects every element that is the 8th child of another element.</h5> div p:nth-child(2) selects the second p in every div 也可以选择even 和 odd <h5 class="md-end-block md-heading">span:first-of-type 选择器 ---selects the first in any element</h5> <h5 class="md-end-block md-heading">div:nth-of-type(2) 选择器 --- selects the second instance of a div.</h5> .example:nth-of-type(odd) selects all odd instances of a the example class. <h5 class="md-end-block md-heading">:nth-of-type(An+B) 选择器 --从第B个开始每间隔n个，包括B</h5> span:nth-of-type(6n+2) selects every 6th instance of a , starting from (and including) the second instance. <h5 class="md-end-block md-heading">:only-of-type 选择器</h5> p span:only-of-type selects a span within any p if it is the only span in there. <h5 class="md-end-block md-heading">:last-of-type 选择器</h5> div:last-of-type selects the last <div> in every element. p span:last-of-type selects the last in every . <h5 class="md-end-block md-heading">:empty 选择器</h5> div:empty selects all empty <div> elements. <h4 class="md-end-block md-heading">否定伪类</h4> <h5 class="md-end-block md-heading">:not(X)</h5> :not(#fancy) selects all elements that do not have id="fancy". div:not(:first-child) selects every div that is not a first child. :not(.big, .medium) selects all elements that do not have class="big" or class="medium". ##### <h4 class="md-end-block md-heading">伪类链接</h4> 专门表示元素的一种状态。比如：访问过的超链接，比如获得焦点链接 a:link{} -表示普通链接（没访问过的链接） a:visited{} -表示访问过的链接 <h6 class="md-end-block md-heading">犹豫设计用户隐私问题，所以使用visited伪类只能设置字体的颜色</h6> 浏览器是通过历史记录来判断一个链接是否访问过 a:hover{} - 鼠标移入的状态 a:active{} - 表示超链接被点击的状态 <h6 class="md-end-block md-heading">:hover 和 active 也可以为其他元素设置（IE6不支持对超链接以外的元素设置：hover和：active</h6> <pre class="md-fences mock-cm md-end-block">input 创建文本输入框 <input type="text" /></pre> input:focus{} -输入框的焦点（IE6不支持 ::selection{} - 选中的内容设置样式 (兼容大部分浏览器) 在火狐中用另一种方式编写 p::-moz-selection{} <h4 class="md-end-block md-heading">伪元素</h4> 使用伪元素来表示元素中的一些特殊的位置 <h6 class="md-end-block md-heading">首字母</h6> :first-letter <h6 class="md-end-block md-heading">首行</h6> :first-line <h6 class="md-end-block md-heading">元素前面的位置（不能选中）</h6> :before{ content:出现在内容前面的； color：red； } 元素的后面（不能选中 :after{} <h5 class="md-end-block md-heading">title属性，这个属性可以给任何标签指定</h5> 当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示 为所有具有title属性的p元素，设置一个背景颜色 <h5 class="md-end-block md-heading">属性选择器</h5> 作用：可以根据元素中的属性或者属性值来选取指定元素 语法： [属性名] 选取含有指定属性的元素 [属性名="属性值"] 既有指定属性，还有指定的属性值的元素 [属性名^="属性值"] 选取该属性的属性值以该指定属性值开头的元素 [属性名$="属性值"] 选取以该特定属性值结尾的元素 [属性名*="属性值"] 选取包含属性值的元素 <pre class="md-fences mock-cm md-end-block"><style type="text/css"> p[title="hello"]{ } p[class]{ } </style></pre> <h5 class="md-end-block md-heading">元素的继承</h5> css中祖先元素上的样式，也会被他的后代元素所继承，并不是所有样式都会被继承，比如：背景颜色不会被继承 <h5 class="md-end-block md-heading">选择器的优先级</h5> 使用不同的选择器选中同一个元素时，并且设置相同的样式时 优先级规则： 内联样式，优先级 1000 id选择器，优先级 100 类和伪类，优先级10 元素选择器，优先级1 通配* ， 优先级0 继承的样式，没有优先级 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较 但是注意，选择器优先级计算不会超过他的最大的数量级 如果选择器的优先级一样，则使用靠后的样式 并集选择器的优先级是单独计算的 可以在样式的最后，添加一个！important，则此时该样式将会获得一个最高的优先级，优先于所有的样式显示甚至超过内联样式（不建议使用，不利于后期修改） <pre class="md-fences mock-cm md-end-block">.p1{ color:yellow; background-color:greenyellow !important; //只对这一行有效 }</pre> <h5 class="md-end-block md-heading">伪类的顺序</h5> 涉及到a的伪类一共有四个： ：link ：visited ：hover ：active 而这四个选择器的优先级是一样的。 在后面的优先级高；所以hover要写到active的上面， <h6 class="md-end-block md-heading">所以写这四个伪类一定要按这个顺序</h6> <h1 class="md-end-block md-heading">文本标签样式</h1> <h5 class="md-end-block md-heading"> 和 </h5> <ul class="ul-list" data-mark="-"> <li class="md-list-item"> em标签用于表示一段内容中的着重点 </li> <li class="md-list-item"> strong 标签用于表示一个内容的重要性 </li> <li class="md-list-item"> 这两个标签可以单独使用，也可以一起使用。 </li> <li class="md-list-item"> 通常em显示为斜体，而strong显示为粗体 em主要表示语气上的强调 <pre class="md-fences mock-cm md-end-block"> 今天天气真不错 强调重点内容，比em更强烈 </pre> <h5 class="md-end-block md-heading">i标签斜体</h5> <h5 class="md-end-block md-heading">b标签加粗</h5> h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体就可以用b标签和i标签 <pre class="md-fences mock-cm md-end-block"> 斜体 加粗 </pre> <h5 class="md-end-block md-heading">small标签标签内容会比他的父元素中的文字要小一些</h5> 在h5中使用small标签来表示一些细则一类的内容：比如合同中的小字，网站的版权声明 </li> </ul> <pre class="md-fences mock-cm md-end-block"> 我是p标签中的内容我是samll标签中的内容</samll> </pre> <h5 class="md-end-block md-heading">cite标签</h5> 网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容 <h5 class="md-end-block md-heading">q标签表示一个短的引用（行内引用）内联元素</h5> 默认加上引号 <pre class="md-fences mock-cm md-end-block"> 子曰：<q>学而时习之不亦说乎</q> </pre> <h5 class="md-end-block md-heading">blockquote 标签块元素</h5> 表示一个长引用（块级引用） <h6 class="md-end-block md-heading">p里面不可以有块元素</h6> <pre class="md-fences mock-cm md-end-block"><div> <blockquote> 呵呵 </blockquote> </div></pre> <h5 class="md-end-block md-heading">sup 和 sub 标签</h5> <ul class="ul-list" data-mark="-"> <li class="md-list-item"> sup设置一个上标 </li> </ul> <pre class="md-fences mock-cm md-end-block">赵薇<a href="#">[1]</a></pre> <ul class="ul-list" data-mark="-"> <li class="md-list-item"> sub 下标用法和上面相同 </li> </ul> <h5 class="md-end-block md-heading">ins 和 del</h5> del 标签语义：表示一个删除的内容 ----删除线 ins 标签语义：表示插入的内容；自动添加下划线 <h5 class="md-end-block md-heading">pre标签</h5> pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格。 <h5 class="md-end-block md-heading">code标签</h5> 专门表示代码，但不会保留格式。 <h6 class="md-end-block md-heading">一般结合使用pre和code来表示一段代码</h6> <pre class="md-fences mock-cm md-end-block"><pre> <code> </code> </pre></pre> <h5 class="md-end-block md-heading">无序列表和有序列表</h5> HTML中一共有三种列表： 1.无序列表 2.有序列表 3.定义列表 无序列表： <ul class="ul-list" data-mark="-"> <li class="md-list-item"> 使用ul标签来创建一个无序列表 </li> <li class="md-list-item"> 使用li在ul中创建一个一个的列表项， 一个li就是一个列表项 通过type属性可以修改无序列表的项目符号（不用） </li> </ul> <pre class="md-fences mock-cm md-end-block"><style type="text/css"> ul{ list-style:none; /*要去掉项目符号*/ } </style> <ul> <li>一号内容</li> <li>二号内容</li> </ul></pre> 注意：默认的项目符号我们一般都不使用！！（因为不同浏览器效果不同） 如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置 无序列表： 无序列表和有序列表类似，只不过它使用ol来代替ul 有序列表用有序的序号作为项目符号 type属性，可以指定序号的类型 可选值：1.默认值，使用阿拉伯数字 2.a/A采用大写或小写字母作为序号 3.i/I 采用小写或者大写罗马数字作为序号 列表都是可以互相嵌套，自身嵌套的。 <h5 class="md-end-block md-heading">定义列表</h5> 定义列表用来对一些词汇或内容进行定义 使用dl来创建一个定义列表，dl中有两个子标签 dt：被定义的内容，dd：对定义内容的描述 <pre class="md-fences mock-cm md-end-block"><dl> <dt>武松</dt> <dd>景阳冈打虎英雄，战斗力99</dd> </dl></pre> ##### <h5 class="md-end-block md-heading">CSS基础_长度单位</h5> hbuilder 技巧 div.box +按tab键 ->快捷建立class=box的div，div#box 同理建立id 长度单位： 像素px - 我们网页中使用最多的一个单位，一个像素就相当于我们屏幕中的一个小点，屏幕上实际就是由这些像素点构成的，但是这些像素点是不能直接看见的 - 不同显示器一个像素的大小不相同，显示越好效果越清晰，像素越小，反之像素越大 百分比% - 也可以将单位设置成一个百分比的形式，这样浏览器会将根据其父元素的样式来计算该值 - 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变 - 创建自适应的页面时，经常使用百分比作为单位 em - em和百分比类似，他是相当于当前元素的字体的大小来计算的 - lem = 1font-size,使用em时，当字体大小发生改边时，em也会随之变化 <pre class="md-fences mock-cm md-end-block">.box1{ font-size:50px; width:1em; height:50%; background-color:yellow; }</pre> <h5 class="md-end-block md-heading">颜色单位</h5> 在css可以直接用颜色的单词来表示不同的颜色 也可以使用RGB值来表示不同的颜色 <ul class="ul-list" data-mark="-"> <li class="md-list-item"> RGB值指的是通过Red，Green，Blue三原色，通过这三种颜色的不同浓度，来表示出不同的颜色 </li> <li class="md-list-item"> 例子： rgb（红色的浓度，绿色的浓度，蓝色的浓度）； <ul class="ul-list" data-mark="-"> <li class="md-list-item"> 颜色的浓度需要用一个0-255之间的值，255表示最大，0表示没有 </li> <li class="md-list-item"> 浓度也可以采用百分数来设置，使用百分数最终也会转化为0-255之间的数 0%表示0，100%表示255 </li> <li class="md-list-item"> 也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样语法： #红色绿色蓝色 #000000 每组两位，范围00-ff 两两都重复的颜色，可以简写，比如：#ff0000 可以写成#f00 #abc -> #aabbcc </li> </ul> </li> </ul> <h4 class="md-end-block md-heading">字体</h4> <h5 class="md-end-block md-heading">font-size </h5> 设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的， font-size实际上是设置格的高度，并不是字体的大小 一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体不同，显示效果也不同。 <h5 class="md-end-block md-heading">font-family 文字的字体</h5> font-family：微软雅黑； 如果字体不支持，则使用默认字体，该样式可以同时指定多个字体，多个字体之间使用，分开。 采用多个字体时，浏览器会优先使用前面的字体，如果前边字体没有再尝试下一个。 <h5 class="md-end-block md-heading">字体分类</h5> 网页中将字体分为5大类： serif（衬线字体） sans-serif（非衬线字体） monospace（等宽字体） cursive（草书字体） fantasy（虚幻字体） 可以将字体设置为这些大类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式 font-style 字体样式 font-weight 字体粗度：可以指定100-900之间的数值；normal 正常；bold加粗 font-variant可以用来设置小型大写字母 可选值：normal，默认值，文字正常显示 small-caps 文本以小型大写字母显示 <h6 class="md-end-block md-heading">font</h6> 在css中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式 空格隔开，大小和字体必须写，缺一不可，字体必须是最后一个样式，大小必须是倒数第二个样式 实际上使用简写性能更好一些 <pre class="md-fences mock-cm md-end-block">font：italic small-caps bold 60px "微软雅黑"；</pre> <h5 class="md-end-block md-heading">行高</h5> CSS中并没有为我们提供一个直接设置行间距的方式，只能通过行高间接的设置行间距，行高越大，行间距越大，使用line-height来设置行高。在style标签中设置 行间距=line-height - font-size line-height可以间接的设置行高 可以接收的值： 1.直接就收一个大小 20px 2.可以指定一个百分数，则会相对于字体去计算行高 200%--就是二倍行高 3.可以直接传一个数值，则行高会设置字体大小相应的倍数 对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以使单行文本在父元素中垂直居中 <h6 class="md-end-block md-heading">font也可以指定行高</h6> 字体大小/行高 font：30px/30px "微软雅黑"； <h5 class="md-end-block md-heading">文本样式</h5> text-transform <h6 class="md-end-block md-heading">文本修饰</h6> text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方，下方或者中间添加线条 <h6 class="md-end-block md-heading">字母间距和单词间距</h6> letter-spacing用来设置字符之间的间距。单位px word-spacing用来设置单词之间的间距。单位px <h6 class="md-end-block md-heading">文本的对齐方式</h6> text-align 用于设置文本的对齐方式 -- 通过调整文本之间的空格大小来实现对齐的目的 可选值： left 默认值，文本靠左对齐 right，靠右对齐 center，居中 justify，两端齐 <h6 class="md-end-block md-heading">首行缩进</h6> text-indent 单位px 或者 em；--em是字体大小 当给定正值时，会自动向右侧缩进指定的像素。 当给定的是负值时，会向左移动指定的像素，通过这种方式可以将一些不想显示的文字隐藏起来 一般使用em作为单位 <h3 class="md-end-block md-heading">盒子模型（框模型）</h3> <ul class="ul-list" data-mark="-"> <li class="md-list-item"> 一个盒子分为几个部分 - 内容区（content） - 内边距（padding） - 边框（border） - 外边框（margin） </li> </ul> <pre class="md-fences mock-cm md-end-block"><head> <meta charset="UTF-8"> <title>

设置边框宽度与颜色

见上段代码

border-width

border-xxx-width

border-color 与 width同理

设置边框样式

border-style

简写样式 border

通过border可以同时设置四个边框的样式，宽度，颜色；没有任何顺序要求
border一指定就指定四个边不能分别指定
border-xxx xxx可以是top right bottom left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效；

border：10px red solid；

内边距

内边距（padding），指的是盒子的内容区与盒子边框之间的距离

一共有四个方向的内边距

padding-xxx xxx可以是top，right，bottom，left

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。

盒子的大小由内容区，内边距和边框共同决定

盒子可见框的宽度 =

border-left-width + padding-left + width + padding-right + border-reght-width

padding-top:100px;

使用padding可以同时设置四个边框的样式，规则和border-width一致

padding:100px；
padding:100px 200px 300px;

#####

外边距

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置

盒子有四个方向的外边距：margin-xxx 单位为px，

xxx 是 top，right，left，bottom

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置放生改变。

margin还可以设置为auto，auto一般只设置给水平方向的margin。

如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值；

如果都设置成auto，则会将两侧的外边距设置成相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置成auto
外边距同样可以用简写属性margin，可以同时设置四个反向的外边距，规则和padding一样。

垂直外边距的重叠

网页中垂直方向的相邻外边距会发生外边距的重叠

所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

如果想父子元素不重叠，可以给父元素设置一个padding-top 或者border-top元素，或者加一个内容

使用padding-top会导致可见框边长，可以从height将padding-top的长度抛去，就可以和原来高度相同

使用空的table标签可以隔离父子元素的外边距，组织外边距的重叠


/*父子之间加一个空的table，但只增加了没用的结构*/

通过css实现（最优方案）

实现在子元素前添加一个空表格（可以不用添加一个没用的结构）

.box:before{
	content:"";
	/*display:table可以将一个元素设置为表格显示，空表格不会占用任何空间
	display:table;
}

默认样式

每个类型都有特定的默认样式；所以我们要清除默认样式

*{
	margin:0;
	padding:0;
}

内联元素盒子模型

内联元素不能设置width和height

内联元素可以设置水平方向的内边距，会影响布局
内联元素可以设置垂直方向的内边距，但是不会影响布局
支持水平方向边框；支持垂直方向边框，但垂直方向不影响布局
只支持水平方向外边距；
水平方向的相邻外边距不会重叠，而是求和

因为内联元素不支持width和height：

将一个内联元素变成块元素

通过display样式可以修改元素的类型

可选值：

inline：可以将一个元素作为内联元素显示

block：可以将一个元素设置为块元素显示

inline-block：将一个元素转换为行内块元素

可以使一个元素既有行内元素的特点又有块元素的特点，

既可以设置宽高，又不会独占一行

none：此元素不会被显示，并且元素不会在页面中继续占有位置

visibility -- 设置元素显示隐藏的状态

可选值：

visible 默认值，元素默认会在页面显示

hidden 元素会隐藏不显示；但它的位置会依然保持

overflow

如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示

超出父元素的内容叫溢出内容，父元素默认是将溢出的内容，在父元素外边显示，

通过overflow可以设置父元素如何处理溢出内容：

可选值：

visible，默认值，不会对溢出内容做处理，元素会在父元素外呈现

hidden，溢出的内容会被修剪，不会显示

scroll，会为父元素添加滚动条，通过拖动滚动条查看完整内容；无论内容是否溢出都会添加水平和垂直双滚动条。

auto，会根据需求自动添加滚动条，不需要就不加

文档流

一个html页面就是一个文档，

文档流处在网页的最底层，他表示的是一个页面中的位置；我们所创建的元素默认都在文档流中

元素在文档流中的特点

块元素：

1.块元素在文档流中会独占一行，块元素会自上向下排列（垂直排列）

2.块元素在文档流中默认宽度是父元素的100%。（auto）

3.块元素在文档流中的高度默认被内容撑开

内联元素：

1.内联元素在文档流中只占自身的大小，会默认自左向右排列，

如果一行中不足容纳所有的内联元素，则换到下一行，继续自左向右。

2.内联元素在文档流中的高度和宽度都默认被内容撑开

浮动

块元素在文档流中默认垂直排列，如果希望块元素在页面中

水平排列，可以使块元素脱离文档流

使用float来使元素浮动，从而脱离文档流

可选值：

none，默认值，元素默认在文档流中排列

left，元素会立即脱离文档流，向页面左侧浮动

right，元素会立即脱离文档流，向页面右侧浮动

当为一个元素设置浮动以后（float属性是一个非none的值）

- 元素会立即脱离文档流，元素脱离文档流以后，他下边的元素会立即向上移动

- 元素浮动后，会尽量向页面左上或者右上漂浮，直到遇到父元素的边框或者其他的浮动元素

- 浮动元素不会超过他上边的兄弟元素，最多最多一边齐

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果。
块元素脱离文档流以后，高度和宽度都被内容撑开。

开启span的浮动；内联元素脱离文档流以后会变成块元素

高度塌陷

文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。

但是为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷；由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

避免高度塌陷

根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context

简称BFC（块级格式化环境），该属性可以设置打开或者关闭，默认是关闭的。

当开启元素的BFC以后，元素将会具有如下的特性：

1.父元素的外边距不会和子元素重叠

2.开启BFC的元素不会被浮动元素所覆盖

3.开启BFC的元素可以包含浮动的子元素

开启元素的BFC

1.设置元素浮动

- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边元素上移。

2.设置元素绝对定位

3.设置元素为inline-block -> display:inline-block

- 会导致宽度丢失

以上方式都不推荐

4.将元素的overflow设置为一个非visible的值 -- 设成auto和hidden值

但是在IE6及以下的浏览器不支持BFC，所以使用这种方式不能兼容IE6

在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做Has Layout，该属性作用和BFC类似。

开启hasLayout的方式：

直接将元素的zoom设置为1即可；

zoom表示放大的意思，后面跟着一个数值，写几就放大几倍；zoom:1;表示不放大元素；

但这种方式只支持IE6及以下，所以要写两种方式保证全部兼容；

zoom:1;
overflow:hidden;

在IE6中，如果为元素制定了一个宽度，则默认开启hasLayout

解决高度塌陷的最终方案

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能

clear可以用来清除其他浮动元素对当前元素的影响

可选值：

none，默认值，不清除浮动元

left，清除左侧浮动元素对当前元素的影响

right，清除右侧浮动元素对当前元素的影响

both，清除两侧浮动元素对当前元素的影响；清楚对他影响最大的那个元素的浮动

回到针对的元素不浮动的那个位置

解决高度塌陷方案二：

可以直接在高度塌陷的父元素的最后，添加一个空白的div；由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过空白的div来撑开父元素高度，基本没有副作用

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

.clear{
	clear:both;
}

通过after伪类实现（最好）

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动；

这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，目前最优方式。几乎没有副作用

.clearfix:after{
	/*添加一个内容*/
	content:"";
	/*转换为一个块元素*/	/*display:table也可以实现*/
	display:block;
	/*清除两侧的浮动*/
	clear:both;
}

/*在IE6中不支持after伪类，
所以在IE6中还需要使用hasLayout来处理*/
.clearfix{
	zoom:1;
}

即解决高度塌陷有解决外边距重叠

.clearfix:before,
.clearfix:after{
		content:"";
		display:table;
		clear:both;
}
.clearfix{
	zoom:1;
}

PS基本操作

ctrl+R 标尺操作

alt+滚轮放大缩小

ctrl+1 恢复到100%

ctrl+0 适应屏幕大小

选中框 -> F8 选中框信息

裁剪好的图片存储为web所用格式

相对定位

div.box$*3

$表示从1开始变，上句表示创建3个box$类的div

定位：

	- 定位指的就是将指定的元素摆放到页面的任意位置
	- 通过position设置定位

position 可选值：

relative：开启元素的相对定位
absolute：开启元素的绝对定位
static：默认值，元素没有开启定位
fixed：开启元素的固定定位（也是绝对定位的一种）

1.position：relative；开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位

3.相对定位的元素不会脱离文档流

4.相对定位会使元素提升一个层级

5.相对定位不会改变元素的性质，块还是块，内联还是内联

当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量

position:relative;
/*相对于原来的位置向右移动100px*/
left:100px;

通常偏移量只需要两个就可以对一个元素进行定位

绝对定位

position:absolute; 开启绝对定位

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）

如果所有祖先元素都没有开启定位，则会相对于浏览器窗口开启定位

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开

固定定位

position:fixed;

固定定位也是一种绝对定位，大部分特点都和绝对定位一样

不同的是：

1.固定定位永远是相对于浏览器窗口进行定位

2.固定定位会固定在窗口的某个位置，不会随着滚动条滚动

IE6不支持固定定位

元素的层级

如果定位元素的层级是一样的，则下边的元素会盖住上边的

通过z-index属性可以用来设置元素的层级；可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示。

对于没有开启定位的元素不能使用z-index
父元素的层级再高也不会盖住子元素

设置透明背景 opacity

它需要一个0-1之间的值

0表示完全透明

1完全不透明

0.5 表示半透明

opacity属性在IE8及以下的浏览器不支持

IE8及以下的浏览器需要使用如下属性代替

filter:alpha(opacity=透明度);

透明度：需要一个0-100之间的值。

这种方式支持IE6，但是这种效果在IE Tester中无法测试

背景

使用back-ground-image设置背景图片

		- 如果背景图片大于元素，默认会显示图片的左上角
		- 如果背景图片和元素一样大，则会将背景图片全部显示
		- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

/*相对路径，同一个文件夹下*/
background-image:url(img/1.jpg);

引入外部样式表

可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的一个底色
一般情况下设置背景图片时都会同时指定一个背景颜色

background-repeat 属性

继承性：无

可选值：

repeat：默认值，背景图片会双方向重复（平铺）

no-repeat：不重复，有多大显示多大

repeat-x：背景图片沿着水平方向重复

repeat-y：垂直

background-position 背景图片定位

背景图片默认是贴着元素的左上角显示

可选值： top right left bottom center 中的两个值指定一个背景图片的位置

如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量：水平偏移量垂直偏移量；

background-attachment 属性

用来设置背景图片是否随着页面一起滚动

可选值：

scroll：默认值，背景图片随着窗口滚动

fixed：背景图片会固定在某一位置，不随页面滚动。

当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器的窗口

不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

按钮练习

做完按钮功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，用户体验不佳。

产生闪烁问题的原因：

背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求。但是我们外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源。所以伪类hover和active的外部资源请求未被加载；hover和active被触发时才回加载。

为了解决该问题可以将三个图片整合为一个图片，这样三个图片同时加载，再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）雪碧图

background

- 通过该属性可以同时设置所有背景相关的样式

- 没有顺序要求，也没有数量要求，不写的属性使用默认值

background: #bfa url(img/3.png) center center no-repeat fixed;

表格

在html中使用table标签来创建一个表格；在table标签中使用tr来表示表格中的一行，有几行就有几个tr；在tr中使用td来创建单元格，有几个单元格就有几个td

  /*用css设置其他属性*/
	
		
		D3
		D3

td下：

colspan="单元格个数" 横向合并单元格

rowspan="单元格个数" 纵向合并单元格

表格的样式

table属于块元素

border-spacing属性

table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离

table{
	width:300px;
	margin:0 auto;
	border:1px solid black;
	border-spaceing:0px;
}

border-collapse可以用来设置表格的边框合并

设置border-collapse，则border-spacing自动失效

border-collapse:collapse;

th 标签标识表头

默认样式：居中，加粗

/*实现隔行变色*/
tr:nth-child(odd){
	background-color:#bfa;
}

长表格

有一些情况下表格是非常长的，这时就需要将表格分为三个部分：表头，表格的主体，表格底部

在HTML中为我们提供了三个标签：

thead 表头永远显示在头部

tbody 表格主题永远显示到表格的中间

tfoot 表格底部永远显示在表格的底部

这三个标签的作用，就是来区分表格的不同的部分，他们都是table的子标签，都需要直接写道table中,tr需要写在这些标签之中

如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中

tr是tbody中的直接子元素，不是table的直接子元素（祖先关系）


	
		
			日期
			收入

表单

表单的作用就是用来将用户的信息提交给服务器的

比如：百度的搜索框注册登录这些操作都需要填写表单

使用form标签创建表单；form标签中必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址

使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项

使用input来创建一个文本框，他的type属性是text
- 如果希望表单项中的数据会提交到服务器中，还必须给表单指定一个name属性；name表示提交内容的名字
  
  用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
  
  格式：属性名=属性值&属性名=属性值&属性名=属性值
  
  name="username" /一般后台使用/
- 在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
- 在文本框和文本域可以通过placeholder来指定提示文字（水印）这个属性在IE8及以下不支持，要用JS

用户名

css中text属性

overflow：auto ；去除滚动条

/*设置文本域不能调整大小 * /

resize:none;

提交按钮可以将表单中的信息提交给服务器

- 使用input创建一个提交按钮，他的type属性值是submit

- 在提交按钮中可以通过value属性来指定按钮上的文字

密码框

单选按钮 - 使用input来创建一个单选按钮，它的type属性使用radio - 单选按钮通过name属性进行分组，name属性相同是一组按钮 - 像这种需要用户选择但不需要用户直接填写内容的表单项；还必须指定一个value属性，这样被选中的表单项的value属性值将最终提交给服务器

性别 男
	女

多选框 - 使用input创建一个多选框，他的type属性使用checkbox，name属性体现是一组 - 不同的value属性用来返回数据

爱好 足球
	篮球
	羽毛球
	乒乓球

下拉列表

使用select来创建一个下拉列表；使用option标签来创建一个一个列表项，有几个选项就写几个option

下拉列表的name属性需要指定给select，而value属性需要指定给option

可以通过option中添加selected="selected"来将选项设置为默认选中。

当为select添加一个multiple="multiple",则下拉列表变成一个多选的下拉列表

在select中可以使用optgroup对选项进行分组

同一个optgroup中的选项是一组

可以通过label属性来指定分组的名字

默认被选中

如果希望单选按钮或者是多选框中指定默认选中的选项则可以加入以下名值对

名值对：check="checked"

文本域

使用textarea创建一个文本域

重置按钮

点击重置按钮表单会恢复为默认值

一个单纯的按钮

没有任何作用，只可以被点击，可以通过js绑定事件

除了input，也可以使用button标签来创建按钮

这种方式和使用input类似，只不过使用上更灵活一些

提示标签

在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的label标签

该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值;用来提示是一组的

一般用在选项表单类型用比较明显

用户名

为表单项进行分组

可将表单项的同一组放到一个fieldset中；在fieldset可以使用legend子标签，来指定组名


	用户爱好

框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面

框架集可以同时引入多个页面，而内联框架只能引入一个，相较而言，更推荐使用框架集

使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中，所以要使用框架集就不能使用body标签

在frameset使用frame子标签来指定要引入的页面

属性：

rows，指定框架集中的所有的框架，一行一行的排列

cols,指定框架集中的所有的页面，一列一列的排列

这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小，可以使用*代替剩余所占的大小

frameset中可以嵌套一个frameset

frameset和iframe一样，它里面的内容都不会被搜索引擎所检索，所以不推荐使用。

这就意味着页面中不能有自己的内容，只能引入其他的页面，而我们没单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就发送几次请求，用户体验比较差。

如果非要使用建议使用frameset，而不用iframe。

IE6 pong的修复

在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示

解决方法：

1.可以使用png8来代替png24，即可解决这个问题

2.使用javascript来解决该问题，需要向页面引入一个外部的javascript文件，然后再写一些简单的JS代码，来处理该问题

在body标签的最后引入外部的JS文件

再创建一个新的script标签，并且编写一些js代码;fix()函数是修复的意思

HTML&CSS

HTML

设置边框宽度与颜色

设置边框样式

简写样式 border

内边距

外边距

垂直外边距的重叠

通过css实现 （最优方案）

默认样式

内联元素盒子模型

将一个内联元素变成块元素

visibility -- 设置元素显示隐藏的状态

overflow

文档流

元素在文档流中的特点

浮动

高度塌陷

避免高度塌陷

开启元素的BFC

4.将元素的overflow设置为一个非visible的值 -- 设成auto和hidden值

解决高度塌陷的最终方案

解决高度塌陷方案二：

通过after伪类实现（最好）

即解决高度塌陷有解决外边距重叠

PS基本操作

相对定位

div.box$*3

position 可选值：

绝对定位

固定定位

元素的层级

设置透明背景 opacity

这种方式支持IE6，但是这种效果在IE Tester中无法测试

背景

引入外部样式表

background-repeat 属性

background-position 背景图片定位

background-attachment 属性

按钮练习

background

表格

表格的样式

border-spacing属性

border-collapse可以用来设置表格的边框合并

th 标签标识 表头

长表格

表单

css中text属性

框架集

IE6 pong的修复

通过css实现（最优方案）

th 标签标识表头