⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 0031.htm

📁 新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑
💻 HTM
📖 第 1 页 / 共 2 页
字号:
🔍
12 
<html>

<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1  {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
    <p align="center"><big><strong>CSS教程（八）</strong></big></p>
<div align="right">---《网猴》版权所有</div>
<p><font size="3">在样式表最后一天的课程中，我们将学习样式表最精彩的部分：定位和叠放。 
</font></p>
<font size="3">

<p>我们都知道<font face="宋体">,</font>在网页上利用<font face="宋体">HTML</font>定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式<font
face="宋体">GIF</font>图象，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。 
</p>

<p>而<font face="宋体">CSS</font>能使你看到希望的曙光。利用今天我们即将学到的<font
face="宋体">CSS</font>属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有<font
face="宋体">...</font>还有<font face="宋体">......</font>你自己慢慢看吧！ </p>

<p>以下是今天将学习的各种属性： 

<ul>
  <li>定位 </li>
  <li>左边 </li>
  <li>顶部 </li>
  <li>宽度 </li>
  <li>高度 </li>
  <li>可视性</li>
  <li><font face="宋体">z-index </font></li>
</ul>

<p>注意：由于<font face="宋体">CSS</font>定位开发得比其它<font
face="宋体">CSS</font>属性晚，所以<font face="宋体">IE3</font>不支持<font
face="宋体">CSS</font>定位属性。定位属性只能用于<font face="宋体">4.0</font>版的浏览器。<br>
<br>
下面我们回答第<font face="宋体">4</font>天留下的小问题。
<p><font size="3"><b>定位（左边和顶部）</b> </font></p>
<font size="3">

<p>定位属性将是网虫们打开幸福之门的钥匙： 

<ul>
  <tt><p><font face="宋体">H4 { position: absolute; left: 100px; top: 43px }</font></p>
  </tt>
</ul>

<p>这项<font face="宋体">CSS</font>规则让浏览器将 &lt;H4&gt;</font>的起始位置精确地定在距离浏览器左边<font
face="宋体">100</font>象素，距离其顶部<font face="宋体">43</font>象素的位置。 
</p>

<p>注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。 
</p>

<p>左边和顶部属性很直观，左边（<font face="宋体">left)</font>设定要素距浏览器窗口左边的距离，顶部<font
face="宋体">(<tt>top</tt>)</font>设定距离浏览器窗口顶部的距离。 </p>

<p>设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。 
</p>

<p>你可以定位什么呢？任何东西！段落、单词、<font face="宋体">GIF</font>和<font
face="宋体">JPEG</font>图象、<font face="宋体">QUICKTIME</font>电影等等。
<p> 绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。</font><font
size="3">相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例： 

<ul>
  <tt><p><font face="宋体">I { position: relative; left: 40px; top: 10px } </font></p>
  </tt>
</ul>

<p>相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。如果你停止使用相对定位，则文字的显示位置将恢复正常。 
</p>

<p>使用相对定位时要小心，否则容易将页面弄得非常乱。 </p>

<p>除了相对定位和绝对定位，你还可以使用<font face="宋体">static</font>（静止）参数值。它的使用方法同普通<font
face="宋体">HTML</font>中的定位方法，不能附加特殊的定位设置。 </p>
</font>

<p><font size="3">还不错吧？下面我们将学习如何控制定位了的要素。
<p><font size="3">除了控制定位要素的左上角位置，你还可以控制要素的宽度和高度，及要素在页面的可视性。 
</font></p>
<font size="3">

<p><b><tt>宽度</tt></b> </p>

<p>定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。 

<ul>
  <tt><p><font face="宋体">DIV { position: absolute; left:<br>
  200px; top: 40px; width: 150px }</font></p>
  </tt>
</ul>

<p>浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在<font
face="宋体">150</font>象素。</p>

<p>宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。 
</p>
</font>

<p><font size="3"><font face="宋体">IE 4</font>中，这项属性还可用于图象。你可以通过宽度设置人为地</font><font
size="3" face="宋体">拉宽或压缩</font><font size="3">图象。 </font></p>
<font size="3">

<p><b><tt>高度</tt></b> </p>

<p>理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上： 

<ul>
  <tt><p><font face="宋体">DIV { position: absolute; left: 200px; top: 40px; height: 150px 
  }</font></p>
  </tt>
</ul>

<p>这里我用了“理论上讲”，因为常用的几种浏览器都不支持高度属性。（你最多只能在<font
face="宋体">IE 4</font>中用高度设置拉长图象。） </p>

<p><b><tt>可视性</tt></b> </p>

<p>利用<font face="宋体">CSS</font>，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。 

<ul>
  <tt><p><font face="宋体">H4 { visibility: hidden }</font></p>
  </tt>
</ul>

<p>我很想给你看一个例子，但是，因为要将它设为看不见，那我这个例子让你看什么呢？ 
</p>

<p>选项： 

<ul>
  <li> <tt>visible</tt></font>使要素可以被看见 </li>
  <li> <tt>hidden</tt></font>使要素被隐藏 </li>
  <li> <tt>inherit</tt></font>指它将继承母体要素的可视性设置。 
  </li>
</ul>

<p>当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域。 
</p>

<p>这条属性在编写语言和使用动态<font face="宋体">HTML</font>时很有用，比如你可以使某段落或图象只在鼠标滑过时才显示。 
</p>

<p><font face="宋体">Communicator</font>不支持可视性属性。只有<font
face="宋体">IE 4</font>的用户可以享受其美妙之处！
<p><font size="3">下面我将要谈到我一直吹嘘的在页面上重叠要素的方法。它不是通过设定边距负值或采用更小的行高来实现，而是通过<font
face="宋体">......</font> </font></p>
<font size="3">
12

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -