界面排版基本要点.docx

1. 界面排版两大学习要点：html,css1) HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。2) CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。3) 学习资料：/tags/index.asp /css/index.asp 2. DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。1) 过渡的,一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：2) 严格的,一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如等。严格的DTD的写法如下：3) 框架的,一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD 还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。 3. 常用html标记:1) 闭合标记：html、head、title、script、body、div、ul、ol、li、dl、dt、dd、table、thead、tbody、tfoot、colgroup、tr、th、td、span、font、a、select、textarea、form、object、iframe、p、h1 - h62) 非闭合标记：meta、link、input、img、br、hr4. css选择器：1) 标签选择器： 顾名思议，标签选择器是直接将 HTML 标签作为选择器，可以是 p、h1、dl、strong 等 HTML 标签。如： p font:12px; em color:blue; dl float:left; margin-top:10px; 2) id 选择器： 我们通常给页面元素定义 id。例如定义一个层 然后在样式表里这样定义： #menubar margin:0 auto; background:#ccc; color:#c00; 其中“menubar“是你自己定义的 id 名称。注意在前面加“#“号。 id 选 择 器 也 同 样 支 持 后 代 选 择 器 ， 例 如 ： #menubar p text-align:center; line-height:20px; 这个方法主要用来定义层和那些比较复杂，有多个“唯一后代”的 元素。3) 类（class）选择器： 在 CSS 里用一个点开头表示类别选择器定义，例如： .da1 color:#f60; font-size:14px ; 在页面中，用 class=“类别名“的方法调用： 14px 大小的字 体 这个方法比较简单灵活，可以随时根据页面需要新建和删除。但需要避免多 class 综合症4) 群组选择器： 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如： p, td, li line-height:20px; color:#c00; #main p, #sider span color:#000; line-height:26px; .www_52css_com,#main p span color:#f60; .text1 h1,#sider h3,.art_title h2 font-weight:100; 使用组群选择器，将会大大的减化 CSS 代码，将具有多个相同属性的元素，合并群组进 行选择，定义同样的 CSS 属性，这大大的提高了编码效率与 CSS 文件体积5) 后代选择器： 后代选择器也叫派生选择器。 可以使用后代选择器给一个元素里的子元素定义样式6) CSS 中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover 和 a : active，以上语句分别定义了 “链接、 已访问过的链接、 鼠标停在上方时、点下鼠标时“的样式。a:linkfont-weight : bold ;text-decoration : none ;color : #c00 ; a:visited font-weight : bold ;text-decoration : none ;color : #c30 ; a:hover font-weight : bold ;text-decoration : underline ;color : #f60 ; a:active font-weight : bold ;text-decoration : none ;color : #F90 ; 注意，必须按以上顺序写，否则显示可能和你预期的不一致。记住它们的顺序是“LVHA”5 理解css盒子模型(width、height、float、margin、padding、position)1) width、height 一个标签对象（盒子）占据多大的空间，盒子的尺寸2) margin、padding 盒子的边界，留白3) float、position盒子与页面其它元素的相对位置4) 所有对象都是矩形5) 注意事项：如果一个盒子的宽度设置为100%，它就不能再设置margins，padding，和borders，否则会撑破其父容器；垂直毗邻的margin会引起复杂的坍塌问题，导致布局问题（比如两个垂直毗邻的Block对象，上面的对象的bottom-margin为40， 下面的对象的top-margin为20，则两个对象的间距将是40，而不是60-译者）；如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了float）；如果不设置宽度，一个非float型盒子水平上将充满其父容器（扣除父容器的留白）；relativeabsolute6. 理解block级和inline级对象的区别(通过对象的display样式设置)1) block级对象：block级对象会自然地水平充满其父容器，因此没有必要为之设置100%宽度属性; block级对象的起始摆放位置是其父容器的左上边界，并顺排在其前面的兄弟block对象的下方（除非设置float或绝对位置）2) inline级对象：inline级对象会忽略其宽度和高度设置；inline级对象会随着文字排版，并受排版属性的影响（如white-space，font-size，letter-spacing）; inline级对象可以使用vertical-align属性控制其垂直对齐，block级对象不可以；inline级对象的下方会保留一些自然的空间，以适应字母g一类的会向下探出的笔画；一个设置为float的inline对象将变成block对象；3) ie6中block对象的margin加倍（解决方法是转换为inline-block） 4) 常用block对象：div、table、p；常用inline对象：span、font、a、select、input、h1 - h67. 了解 Floating 和 Clearing 属性实现多栏排版的最好方法是使用 float 属性，float 也是一个将使你受益匪浅的属性。一个 float 对象可以居左或居右，一个设置为 float 的对象，将根据设置的方向，左移或右移到其父容器的边界，或其前面的 float 对象的边界，而紧随其后的非 float 对象或内容，则包围在其相反的方向。以下是使用 float 和 clear 属性的一些重要准则:一个 float 对象，将从其置身的 block 级非 float 内容流中跳出，换句话说，如果你要将一个 box 向左边 float，它后面的 block 级非 float 对象会显示到下方，inline 级内容会在旁边包围要让一段内容从一侧包围一个 float 对象，这段内容必须要么是 inline 级的，要么也设置为相同方向的 float一个 float 对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为 float 对象明确设置宽度如果一个 block 对象包含 float 子对象，会出现本文中阐述的问题。一个设置了 clear 属性的对象，将不会包围其前面的 float 对象一个既设置了 clear 又设置了 float 属性的对象，只有 clear:left 属性生效，clear:right 不起作用8. 经验总结：1) IE6 中不可滥用 float，否则会带来内容消失以及文字重复等稀奇古怪的问题2) IE6 中，float 对象，在 float 方向的那边，会出现