网页布局基础分析.doc

网页布局基础 CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。W3c标准：结构化标准语言（HTML和XML），表现标准语言（CSS），行为标准语言（Dom和ECMAScript）。 标准文档流：从上到下，从左到右输出文档内容。由块级元素和行级元素组成。 块级元素：从左到右撑满页面独占一行，触碰到页面边缘时会自动换行。有：div、ul、li、dl、dt、p 行级元素:span、strong 、img、input不会独占一行 块级元素和行级元素都是盒子模型。 盒子模型：边框（border）、外边距（margin）、内边距（pading）、内容（content） 盒子3D模型：从上到下依次为：border、content+padding、background-image、background-color、margin 实现自动居中——列布局的三个技能点：标准文档流，块级元素，margin属性。网页设置完居中后（代码为：#wrap{width:700px;margin:0 auto;}）就不能再设置浮动属性以及位置属性了，否则位置就不会再居中。 对于网页居中：首先设置整体id为：上下 margin 不用设置为 auto，只设置右左就可以。width:100%; 也不可以，一定设置为一个不为 100% 的值Margin属性——设置两列之间的间距。 颜色表： #00C 草绿色 #FF3300 颜色样本 十六进制 名称与注释 #ffb3a7 粉红：即浅红色。别称：妃色 杨妃色 湘妃色 妃红色。 #ed5736 妃色：妃红色。古同“绯”，粉红色。杨妃色、湘妃色、粉红皆同义。 #f00056 品红：比大红浅的红色。 #f47983 桃红：桃花的颜色，比粉红略鲜润的颜色。 #db5a6b 海棠红：淡紫红色、较桃红色深一些，是非常妩媚娇艳的颜色。 #f20c00 石榴红：石榴花的颜色，高色度和纯度的红色。 #c93756 樱桃色：鲜红色。 #f05654 银红：银朱和粉红色颜料配成的颜色。多用来形容有光泽的各种红色，尤指有光泽浅红。 #ff2121 大红：正红色，三原色中的红，传统的中国红，又称绛色。 #8c4356 绛紫：紫中略带红的颜色。 #c83c23 绯红：艳丽的深红。 #9d2933 胭脂：1、女子装扮时用的胭脂的颜色；2、国画暗红色颜料。 #ff4c00 朱红：朱砂的颜色，比大红活泼，也称铅朱、朱色、丹色。 #ff4e20 丹：丹砂的鲜艳红色。 #f35336 彤：赤色。 #cb3a56 茜色：茜草染的色彩，呈深红色。 #ff2d51 火红：火焰的红色，赤色。 #c91f37 赫赤：深红，火红。泛指赤色、火红色。 #ef7a82 嫣红：鲜艳的红色。 #ff0097 洋红：色橘红。 #ff3300 炎：引申为红色。 #c3272b 赤：本义火的颜色，即红色。 #a98175 绾：绛色；浅绛色。 #c32136 枣红：即深红。 #b36d61 檀：浅红色，浅绛色。 #be002f 殷红：发黑的红色。 #dc3023 酡红：像饮酒后脸上泛现的红色，泛指脸红。 #f9906f 酡颜：饮酒脸红的样子。亦泛指脸红色。 #fff143 鹅黄：淡黄色（鹅嘴的颜色，高明度微偏红黄色）。 #faff72 鸭黄：小鸭毛的黄色。 #eaff56 樱草色：淡黄色。 #ffa631 杏黄：成熟杏子的黄色。 #ff8c31 杏红：成熟杏子偏红色的一种颜色。 #ff8936 橘黄：柑橘的黄色。 #ffa400 橙黄：柑橘的黄色。 #ff7500 橘红：柑橘皮所呈现的红色。 #ffc773 姜黄：中药名。别名黄姜。为姜科植物姜黄的根茎。又指人脸色不正，呈黄白色。 #f0c239 缃色：浅黄色。 #fa8c35 橙色：界于红色和黄色之间的混合色。 #b35c44 茶色：一种比栗色稍红的棕橙色至浅棕色。 #a88462 驼色：一种比咔叽色稍红而微淡、比肉桂色黄而稍淡和比核桃棕色黄而暗的浅黄棕色。 #c89b40 昏黄：形容天色、灯光等呈幽暗的黄色。 #60281e 栗色：栗壳的颜色。即紫黑色。 #b25d25 棕色：棕毛的颜色,即褐色。1、在红色和黄色之间的任何一种颜色；2、适中的暗淡和适度的浅黑。 #827100 棕绿：绿中泛棕色的一种颜色。 #7c4b00 棕黑：深棕色。 #9b4400 棕红：红褐色。 #ae7000 棕黄：浅褐色。 #9c5333 赭：赤红如赭土的颜料，古人用以饰面。 #955539 赭