布局(版式布局):是网页UI设计师将有限的视觉元素进行有机的排列组合。
网页设计的特点:1.网页可以自适应宽度;2.网页的长度理论上没有限制。
分栏又称分列,常见的布局分为:一列布局、二列布局、三列布局及混合布局。
流动布局 浮动布局 绝对定位布局
W3C标准:有万维网联盟制定的一系列标准,包括:1.结构化标准语言(HTML和XML);2.表现标准语言(CSS);3.行为标准语言(DOM和ECMAScript)。
CSS中存在3中的定位机制:标准文档流(Normal flow)、浮动(Floats)、绝对定位(Absolute positioning)
标准文档流:
特点:从上到下,从左到右,输出文档内容由块级元素和行级元素组成
块级元素:
特点:从左到右撑满页面,独占一行;触碰到页面边缘时,会自动换行。
常见块级元素(=块级标签):div、ul、li、dl、dt、p...
行级元素:
特点:能在同一行内显示,不会改变HTML文档结构。
常见的行级标签:span、strong、img、input...
块级元素和行级元素都是盒子模型。
盒子模型(=网页布局的基石)由4部分组成:1.边框(border);2.外边距(margin);3.内边距(padding);4.盒子中的内容(content)。
盒子3D模型:1.border;2.content+padding;3.background-image;4.background-color;5.margin。
盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸
自动居中一列布局:
三个技能点:1.标准文档流;2.块级元素;3.margin属性。
Dreamweaver中常用快捷键小知识:Ctrl+Shift+> 选中代码进行缩进