网页设计那些事Word格式文档下载.docx
《网页设计那些事Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页设计那些事Word格式文档下载.docx（46页珍藏版）》请在冰豆网上搜索。
MicrosoftJhengHei
微软雅黑体：
MicrosoftYaHei
装Office会生出来的一些：
隶书：
LiSu
幼圆：
YouYuan
STXihei
华文中宋：
STZhongsong
方正舒体：
FZShuTi
方正姚体：
FZYaoti
华文彩云：
STCaiyun
华文琥珀：
STHupo
华文隶书：
STLiti
华文行楷：
STXingkai
华文新魏：
STXinwei
Windows中的中文字体。
在默认情况下，也就是未自行安装新字体或者Office等文字处理软件的情况下，Windows默认提供下列字体：
Windows95/98/98SE宋体、黑体、楷体、仿宋
WindowsXP/2000/2003/ME/NT宋体/新宋体、黑体、楷体、仿宋（WindowsXPSP3宋体-PUA）
WindowsVista/7/2008宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB
那么每种字体能显示那些汉字呢？
Vista之前的Windows中宋体/新宋体、黑体支持GBK1.0字符集，
楷体、仿宋支持GB2312-80字符集。
（注：
Windows3.X只能支持GB2312-80字符集）
Vista及之后的Windows中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持GB18030-2000字符集，
SimSun-ExtB只支持GB18030-2005字符集扩展B部分。
下面对字符集进行简单的介绍：
GB2312-80<
GBK1.0<
GB18030-2000<
GB18030-2005
GB2312-80中的字符数量最少，GB18030-2005字符数量最多。
GB2312-80是最早的版本，字符数比较少；
GBK1.0中的汉字大致与Unicode1.1中的汉字数量相同；
GB18030-2000中的汉字大致与Unicode3.0中的汉字数量相同，主要增加了扩展A部分；
GB18030-2005中的汉字大致与Unicode4.1中的汉字数量相同，主要增加了扩展B部分；
由于Unicode5.2的发布，估计GB18030会在近期发布新版本，增加扩展C部分。
需要说明的是在GB18030中扩展B部分并不是强制标准。
如果想查看GB18030的标准文本，请访问;
中的强标阅读。
如果想了解Unicode的内容，请访问http:
//www.unicode.org。
现在纠正网上普遍的一个错误：
GB18030-2000和GB18030-2005都不支持单字节的欧元符号
与简体中文有关的代吗页如下：
936gb2312简体中文（GB2312）————其实是GBK
10008x-mac-chinesesimp简体中文（Mac）
20936x-cp20936简体中文（GB2312-80）
50227x-cp50227简体中文（ISO-2022）
51936EUC-CN简体中文（EUC）
52936hz-gb-2312简体中文（HZ）
54936GB18030简体中文（GB18030）
补充：
使用楷体、仿宋后，在Windows7/Vista/2008中可能不再显示为对应的字体。
这是因为Windows7/Vista/2008中有楷体、仿宋，默认情况下没有楷体、仿宋，字体名称相差“”。
2.兼容性良好的css文字描边
.sizscolor{
position:
absolute;
//为了兼容IE6、IE7
filter:
Dropshadow（offx=1,offy=0,color=red）Dropshadow（offx=0,offy=1,color=red）Dropshadow（offx=0,offy=-1,color=red）
Dropshadow（offx=-1,offy=0,color=red）;
//IE系列
text-shadow:
#F001px00,#F0001px0,#F00-1px00,#F000-1px0;
//FF、Safari、Chrome、Opera
}
3.火狐（Firefox）/ie6.ie7.ie8兼容问题
.color{
background-color:
#CC00FF;
/*所有浏览器都会显示为紫色*/
#FF0000\9;
/*IE6、IE7、IE8会显示红色*/
*background-color:
#0066FF;
/*IE6、IE7会变为蓝色*/
_background-color:
#009933;
/*IE6会变为绿色*/
**记住上面得样式解释为顺序是ff、ie8、ie7、ie6**
显示的结果：
用火狐浏览，颜色是紫色
用IE8浏览，颜色是红色
用IE7浏览，颜色是蓝色
用IE6浏览，颜色是绿色
例子：
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
title>
无标题文档<
/title>
styletype="
text/css"
.main{
width:
200px;
color:
#fff;
height:
400px;
background:
#f00;
/*ff红色*/
200px\9;
#ff0\9;
/*ie8黄色*/
*height:
*background:
#0ff;
/*ie7蓝色*/
_height:
100px;
_background:
#000;
/*ie6黑色*/
/style>
/head>
body>
divclass="
main"
ff红色height:
400px/IE8黄色height:
200px/IE7蓝色height:
200px/IE6黑色height:
100px<
/div>
/body>
/html>
--------------------------------------------------------
如果你只是为了兼容ie7和8，其实可以在<
里加上这样一条代码：
X-UA-Compatible"
IE=7"
即可免去你大量修改代码，但是我发现，有些后台程序员往往会把它删掉，具体原因我也不清楚。
微软在IE8提供三种解析页面的模式
IE8StandardModes：
默认的最标准的模式，严格按照W3C相关规定
IE7StandardsModes：
IE7现在用的解析网页的模式，开起机关是在<
中加入<
QuirksModes：
IE5用的解析网页的模式，开起机关是删除HTML顶部的DOCTYPE声明
注意：
不同模式间的网页在IE8中可以互相frame，因此因不会模式下的DOM和CSS渲染不一样，所以会引发很多问题，务必注意如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
x-ua-compatible"
ie=7"
IE8最新csshack：
"
\9"
例:
"
margin:
0pxauto\9;
.这里的"
可以区别所有IE和FireFox.
*"
IE6、IE7可以识别.IE8、FireFox不能.
_"
IE6可以识别"
IE7、IE8、FireFox不能.
---------------------------------------------------------
一些IE6IE7IE8FF的CSShack
p{+color:
}支持IE6IE7不支持FFIE8
p{_color:
}支持IE6不支持FF
p{color:
#00f!
important;
}支持IE7IE6FFIE8
}支持IE7IE8FF不支持IE6
head:
first-child+bodyp{color:
/*\*//*/
/**/支持IE8不支持IE6IE7FF
html*p{color:
html&
gt;
html[xmlns]p{color:
@import'
style.css'
;
@import"
style.css"
@importurl（style.css）;
@importurl（'
）;
@importurl（"
支持IE7IE6FFIE8
p{/*/*/color:
/**/}支持IE6IE7FF不支持IE8
*htmlp{color:
}支持IE6不支持FFIE7IE8
*+htmlp{color:
}支持IE7IE8不支持FFIE6
p{*color:
}支持IE7IE6不支持FFIE8
====================================================
这样写，也许会简单些，很方便，但是这个只是IE8对IE7的兼容模式
4.CSS注意细节
一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：
li>
记住密码<
imgsrc="
align="
bottom"
style="
margin-bottom:
-4px"
/>
/li>
二、当文字与图片在一行，需要将文字与图片居中对齐，需要这样写：
static/img/xyx.jpg"
middle"
三、更改IE“查看源代码”菜单打开的编辑器
打开注册表编辑器,在开始-运行中输入regedit
找到以下位置：
HKEY_LOCAL_MACHINE"
SOFTWARE"
Microsoft"
InternetExplorer"
ViewSourceEditor"
EditorName"
修改默认的数据为"
D:
ProgramFiles"
EmEditor"
EmEditor.exe"
切换到IE中查看源代码就可以看到效果了。
如果ViewSourceEditor"
EditorName项没有,可以自己新建。
四、自动最大化窗口，在<
与<
之间加入：
SCRIPTlanguage="
javascript"
setTimeout（'
top.moveTo（0,0）'
5000）;
top.resizeTo（screen.availWidth,screen.availHeight）'
/script>
五、window.opener实际上就是用window.open打开的窗体的父窗体。
比如在父窗体parentForm里面通过window.open（"
subForm.html"
）,那么在subform.html中window.opener
就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。
1,window.opener.test（）;
---调用父窗体中的test（）方法；
2,如果window.opener存在,设置parentForm中stockBox的值。
if（window.opener&
&
!
window.opener.closed）
{
window.opener.document.parentForm.stockBox.value=symbol;
}
六、刷新页面的方法
Javascript刷新页面的方法：
1history.go（0）
2location.reload（）
3location=location
4location.assign（location）
5document.execCommand（'
Refresh'
）
6window.navigate（location）
7location.replace（location）
8document.URL=location.href
自动刷新页面的方法:
1.页面自动刷新：
把<
refresh"
20"
加入<
区域中
2.页面自动跳转：
20;
url="
3.js自动刷新页面
scriptlanguage="
JavaScript"
functionmyrefresh（）
{
window.location.reload（）;
myrefresh（）'
1000）;
//指定1秒刷新一次
4.JS刷新框架
a）刷新包含该框架的页面用
scriptlanguage=JavaScript>
parent.location.reload（）;
b）子窗口刷新父窗口
self.opener.location.reload（）;
（ 或 <
ahref="
javascript:
opener.location.reload（）"
刷新<
/a>
）
c）刷新另一个框架的页面
parent.另一FrameID.location.reload（）;
七、用过CSShack应该知道，用下划线命名是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。
在做CSS检查时会出现错误提示。
八、IE条件注释写法
--[if!
IE]>
除IE外都可识别<
[endif]-->
--[ifIE]>
所有的IE可识别<
--[ifIE5.0]>
只有IE5.0可以识别<
九、CSSHACK写法
第一种：
.div{
orange;
green!
blue;
第二种：
10px;
*margin:
15px;
_margin:
第三种：
#div{color:
#333;
*+html#div{color:
#999;
*html#div{color:
#666;
细节2………………………………………………………………………………
一、IE6及以下不识别a标签外的:
hover伪类，在火狐，IE7里能正确达到效果，解决办法：
#showli.s1{border:
1pxsolid#ff9900;
background:
#454242;
#showli.s2{border:
1pxsolid#D9D8D8;
#312E2E;
lionMouseOver="
this.className='
s1'
onMouseOut="
s2'
二、为元素设置hasLayout
很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决，最简单的给元素设置hasLayout值的方法是给加上CSS的height或width（当然，zoom也可以用，但这不是CSS的一部分）。
比如设置为height:
1%。
如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。
三、IE6下字符重复出现
确保浮动元素设置了display:
inline;
在浮动元素中使用margin-right:
-3px;
四、样式优先级
1，内联样式[1.0.0.0]
2，ID选择器[0.1.0.0]
3，类，属性，伪类选择器[0.0.1.0]
4，元素标签，伪元素选择器[0.0.0.1]
五、一个元素垂直居中的css写法
#exm{
position:
left:
50%;
top:
z-index:
1;
width:
height:
margin-left:
-100px;
margin-top:
-52px;
六、zoom:
normal|number
设置或检索对象的缩放比例。
设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。
虽然此属性不可继承，但是它会影响对象的所有子对象（children）。
七、图片跟文字并排时,要实现图片文字垂直居中:
1>
将line-height:
设置成图片的高度,或者图片父元素的高度.
2>
再将图片的CSS设置vertical-align:
middle;
八、li元素中包含aimg元素的时候，IE6下出现空白
解决方法一
使li浮动，并设置img为块级元素
解决方法二
设置ul的font-size:
0;
解决方法三
设置img的vertical-align:
bottom;
解决方法四
设置img的margin-bottom:
-5px;
细节3………………………………………………………………………………
一、被点击访问过的超链接样式不在具有hover和active
解决方法：
改变CSS属性的排列顺序:
L-V-H-A
二、FF下连续长字段不能自动换行
word-wrap:
break-word;
overflow:
hidden;
三、FF下父容器高度不能自适应
解决办法：
清除子元素的浮动
四、IE下图片下方产生空隙
定义img为display:
block，或vertical-align为top/bottom/middle/text-bottom
定义父容器的字体大小为零，font-size:
五、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙
相邻的非浮动元素也设置浮动；
浮动元素相对IE6定义_margin-right:
六、LI内容超长后以省略号显示
white-space:
nowrap;
（文本不换行）text-overflow:
ellipsis;
-o-text-overflow:
overflow:
hidden;
七、文本不能垂直居中
行高和容器高度相等line-height=height；
八、文本输入框和相邻的文本不能对齐
设置文本输入框vertical-align:
九、IE设置滚动条样式
body{
scrollbar-face-color:
#f6f6f6;
scrollbar-highlight-color:
scrollbar-shadow-color:
#eeeeee;
scrollbar-3dlight-color:
scrollbar-arrow-color:
scrollbar-track-color:
scrollbar-darkshadow-color:
十、IE6无法定义高度为1px
升级会员 