网页设计摘要.docx
《网页设计摘要.docx》由会员分享，可在线阅读，更多相关《网页设计摘要.docx（18页珍藏版）》请在冰豆网上搜索。
网页设计摘要
流式布局
一、百分号计算
目标元素宽度÷上下文元素宽度=百分比宽度
二、em计算
1、浏览器的默认字体大小是16px
2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如
“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算
1÷父元素的font-size×需要转换的像素值=em值
3、这一种千万要慢慢理解，不然很容易与第二点混了。
如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：
1÷父元素的font-size×需要转换的像素值=em值
那么元素设置了字体大小，此元素的其他属性，如
“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
1÷元素自身的font-size×需要转换的像素值=em值
设计分析
布局分析
首页、列表页、内容页面等
拆分图纸
网页的版式、颜色，做原料分离，包括尺寸坐标、颜色、背景图、装饰性的线框、特殊字体、装饰图片等；
1、分离颜色，配色提取包括基本配色、普通链接配色和导航部分配色。
1）基本配色：
页面、分栏、表格等的背景色。
2）普通配色：
普通文字中间出现的链接，包括内容目录和文字内出现的链接等；
3）导航部分配色：
页面内栏目及导航条部分的配色。
2、提取出组装页面用的布局尺寸、背景图、边框及装饰线、特殊插图等元件。
1）提取尺寸：
CSS盒模型中的边界（margin）、边框（border）、填充（padding）、宽度（width）、高度（height）以及XY坐标等。
2）分离背景图：
背景图一般包括大面积的重复图案区，还有一种情况是特殊样式的
边框、阴影、装饰线等。
3）分离图片：
包括装饰性大图、特殊字体的标题或者导航菜单、特殊的小
图标。
浏览器兼容
1、div的垂直居中问题
vertical-align:
middle;将行距增加到和整个DIV一样高line-height:
200px;然后插入文字，就垂直居中了。
缺点是要控制内容不要换行。
2、margin加倍的问题，浮动IE产生的双倍距离
设置为float的div在IE下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:
inline;
block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制（块元素）;Inline元素的特点是,和其他元素在同一行上,不可控制（内嵌元素）;
3、IE与CSS宽度和CSS高度的问题div
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，
可以这样：
#box{width:
80px;height:
35px;}
html>body#box{
width:
auto;height:
auto;
min-width:
80px;min-height:
35px;
}
4、页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。
但IE不认得这个，而它实际上把width当做最小宽度来使。
为了让这一命令在IE上也能用，可以把一个
放到标签下，然后为div指定一个类,
然后CSS这样设计：
#container{
min-width:
600px;
width:
expression_r（document.body.clientWidth<600?
"600px":
"auto"）;}
第一个min-width是正常的；CSS制作但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。
它实际上通过Javascript的判断来实现最小宽度。
5、DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位。
右边对象内的文本会离左边有3px的间距
#box{float:
left;width:
800px;}
#left{float:
left;width:
50%;}
#right{width:
50%;}
*html#left{margin-right:
-3px;//这句是关键}
升级会员 