阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
网页分辨率设置技巧
分辨率，什么是分辨率，网页分辨率设置 p?$N[-W 6-
R_G2C@y*
大家一定在设计网面时，苦恼过不同分辨率下显示的问题，不论你喜欢打表格，还是运用图层，或者利用框架以及帧『内联帧』，当你在800×600下完成创作，1024×768下就会错位，或出现左对齐 4|_xz; i
OT\D;Z"__I
1.如果你喜欢打表格，解决的办法就很简单了，只要把最外边的<table>水平居中即可；如果你处理不好单元格，就把最外边的<table>的width设成"768"[针对800×600而言]；这样你的网页在800×600满屏，1024×768就水平局中了，如果想1024×768下也满屏，你只要把最外边的<table>的width设成"100%"。 M%_*vD
}K 'A/]'
说明：层，其实你可以把他看做是绝对定位标记区域，标记为<div></div> a&G{3#l
S=P}Jpq?Y;
2.如果你喜欢运用图层，【我很喜欢，而且极爱】，居中问题就是一个大问题 VL*5
%6(\Ki6I
图层的好处就是想怎么放就怎么放，比表格灵活的多，再者众多的动态页面技术javascript的运用都涉及到了层的概念，页面中表格与层的混合运用，在很多知名网站都可见其踪影因为是绝对定位的，【相对于浏览窗口0.0坐标】所以由于客户端分辨率的设置不同，显示时就会出现错位问题。 K7 C
<}y
0z \KI?kd
我的方法是：利用子层与父层的关系解决，具体细节请看下面的代码： uH$hMg
@VP/kut
<html> fZf>>mu@r'
<head> 7a9">:~
<title>New Page 1</title> Ch ?yk^cY
</head> x=rMjz-`_
<body>
Q#yHH]U)X
<div ID="blockdiv" style="position: absolute; top: 0; left: 0; width: 780; height: 26"> N_:!uR
<table border="0" width="100%" bgcolor="#00FF00" height="100%" cellspacing="0" cellpadding="0"> H%n /;DW
<tr> ^kK")+K
<td width="100%" height="13"> w +UB XW
<div style="position: absolute; left: 100; top: 75; width: 54; height: 23"> W\B@0Is o
aaaa Tg
O]q4
</div> g&/lyQ+G
<div style="position: absolute; left: 172; top: 178; width: 54; height: 23"> #vK99 S2
bbbb JT}"CuC
</div> ){/n7*#Th%
</td> nZj&Ma7R
</tr> kxe{HxM$Z
</table> = S 54p(>
</div> >H euf"V
)LG!"~qiz
<script language="javascript"> U{EcV%C2
<!-- 71(ppsHk
var a a$uD oi
ie4=(document.all)?true:false W"/,<xHuh
if(ie4) block=blockdiv.style 9_*3xu<7i
a=screen.width rr1,Ijh{D
if (a=="1024") {3os9r,
{ G| &$/]~
alert(block.left); agoMsxI9
block.left=112; C]ho7qC
} 3 P\4
K
sFfargl
if (a=="800") T;kh+ i
aQWg? ,Ju6
{ alert(block.left); V+' zuX
block.left=0; !k 'E
} t P' ._0n0
--> Ka{QjW!%d<
</script> [mUC7Kpi
</body> vKbGG
</html> yF
XPY=EQ
]R"n+LnI:=
3.至于框架，我有一个笨方法，是利用内联帧<IFRAME></IFRAME>把框架的索引页放在里面在外面放一个合适的<table>，具体细节请看下面的代码： 6XhS
g0s
a$11u.\q+
<html><head> }z-)!8vF
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> ac43d`wpK
<meta name="GENERATOR" content="Microsoft FrontPage 4.0"> k
V'0rb
<meta name="ProgId" content="FrontPage.Editor.Document"> 8
=3#S'n
<title>New Page 2</title> Xs4G#QsA J
</head> q={3f m
yle~hL
<body> bsWDjV~
M)nf(jw#G
<div align="center"> b\"2O4K,)
<center> B&lF!
]
<table border="0" width="780" height="600" cellspacing="0" cellpadding="0"> =H^^A G\}
<tr> {<^P YN>`
<td width="100%"> 4d ]T`
<p align="center"> 8+~|!)a
<IFRAME src="你的框架页.htm" width="780" height="600"> </IFRAME> x6~`{N1N
M
</td> }15ooe%
</tr> c:`&QDF
</table> KA {Y*m^7
</center> ^p7Er !
</div> dzc.
s8T(0
}"9 jCxXL
</body> /&'rQ`nd
,W<mz7Z(@
</html>
|
|
|
|
[楼 主]
|
Posted: 2006-04-05 08:55 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 网页分辨率设置技巧
