📄 day5_2.html
字号:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: purple; text-decoration: underline}
.unnamed1 { font-family: "宋体"; font-size: 9pt}
-->
</style>
<style>
<!--#menu {position: absolute;
left: 1px;top: 174px;width: 163px;height: 300px;}
-->
</style>
<style>
<!--#content {position: absolute;
left: 175px;top: 184px;width: 435px;height: 300px;}
-->
</style>
<title>网猴：动态HTML</title>
</head>
<body bgcolor="#FFFFFF">
<div id="content" style="left: 12px; top: 15px">
<table border="0" width="600" cellspacing="0">
<tr>
<td bgcolor="#ffff99" colspan="2"><font size="4" color="#000000"><strong>动态HTML教程
- 第五天</strong></font></td>
</tr>
<tr>
<td bgcolor="#FF6600" colspan="2"><em><font size="4"><a href="mailto:taylor@taylor.org">Taylor</a>
</font><font size="3">1998.3.9</font></em></td>
</tr>
</table>
<p><strong>第二页：放在底部和右面</strong></p>
<p>CSS在定位上的缺点是它只有left和top属性，但是没有bottom<br>
或right。这就意味着你只能放一个对象在离浏览器窗口50个<br>
像素的位置，但是你不能只用CSS就能把对象放在离浏览器<br>
窗口右边50像素的地方。这个问题在CSS2中应该能得到解<br>
决，样式表的下一代<a href="http://www.w3.org/TR/WD-CSS2/">specification</a>正在出笼；在它被主流<br>
浏览器支持之前，你只好求助于JavaScript。</p>
<p>用JavaScript解决这个问题的最好方式是基于文档宽度的计<br>
算。两种4.0浏览器都在DOM中包含文档大小的对象。所以定<br>
位对象的方式是把窗口的宽度减去对象的宽度。</p>
<pre><div id="foo">
your content here
</div>
<script>
if (document.layers) {
document.foo.left = window.innerWidth - document.foo.clip.width;
} else if (document.all) {
foo.style.left = document.body.offsetWidth - parseInt(foo.style.width);
}
</script></pre>
<p>这可以把div定位到屏幕的右边。这种技术也可以把对象定位<br>
到窗口底部。</p>
<p>两种浏览器都支持的屏幕对象是：</p>
<table border="1" width="518">
<tbody>
<tr>
<th width="52">Feature</th>
<th width="270">Internet Explorer</th>
<th width="182">Netscape Navigator</th>
</tr>
<tr>
<td width="52">height of the screen</td>
<td width="270"><tt>screen.height</tt></td>
<td width="182"><tt>screen.height</tt></td>
</tr>
<tr>
<td width="52">width of the screen</td>
<td width="270"><tt>screen.width</tt></td>
<td width="182"><tt>screen.width</tt></td>
</tr>
<tr>
<td width="52">color depth of the screen</td>
<td width="270"><tt>screen.colorDepth</tt></td>
<td width="182"><tt>screen.colorDepth</tt></td>
</tr>
<tr>
<td width="52">height of the window</td>
<td width="270"><tt>document.body.offsetHeight</tt>*</td>
<td width="182"><tt>window.innerHeight</tt></td>
</tr>
<tr>
<td width="52">width of the window</td>
<td width="270"><tt>document.body.offsetWidth</tt>*</td>
<td width="182"><tt>window.innerWidth</tt></td>
</tr>
</tbody>
</table>
<p><em><small>*从技术上讲，这是文档的高度和宽度，不是窗口的，但是<br>
大多数情况下可以把它们看成一件事。</small></em></p>
<p><a href="day5_3.html">>></a></p>
<p><strong>动态HTML教程</strong><br>
<font color="#FF0000">第一页</font> <a href="day5_1.html">排错</a><br>
<font color="#FF0000">第二页</font> 放在底部和右面<br>
<font color="#FF0000">第三页</font> <a href="day5_3.html">Netscape的调整大小问题</a><br>
<font color="#FF0000">第四页</font> <a href="day5_4.html">一定要把样式加在标记中吗？</a><br>
<font color="#FF0000">第五页</font> <a href="day5_5.html">关于Event对象</a><br>
<font color="#FF0000">第六页</font> <a href="day5_6.html">课程结束</a></p>
<p><font size="3">[<a href="day1_1.html">第1天</a>][<a href="day2_1.html">第2天</a>][<a href="day3_1.html">第3天</a>][<a href="day4_1.html">第4天</a>][第5天]</font></p>
<font size="3">
<hr>
<br>
</font><font face="verdana, arial, geneva, sans-serif" size="2">本文由<a href="http://chd.126.com" target="_blank">《CHD的网络教室》</a>根据<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>相关文章改编，版权归<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>所有</font><font size="3">
</font></div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -