<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          网页设计中的固定定位

          • 2019-03-22 18:16:16
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          从上一节可以看出,网站建设中固定定位与绝对定位很类似,只不过固定元素的包含块是视窗。固定定位时,元素会完全从文档流中去除,不会有相对于文档中任何部分的位置。

          网页设计员可以采用一些有意思的方式充分利用固定定位。首先,可以使用固定定位创建帧式界面。考虑图10-56,这里显示了一个相当常见的布局机制。

          图10-56:使用固定定位模拟帧

          这可以使用以下样式得到:

          div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;background: gray;}

          div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver;}

          以上样式会把标题和边栏固定到视窗的顶部和旁边,并保持不动,而不论文档如何滚动。

          不过这样做的缺点是,文档的其余部分会被固定元素覆盖。因此,可能应当把其余内容包含在其自己的div中,并应用以下规则:

          div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; overflow: scroll; background: white;}

          甚至可以适当地增加外边距,在三个定位div之间建立一些小缝隙,如图10-57所示:

          body {background: black; color: silver;}/* colors for safety's sake */

          div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;background: gray; margin-bottom: 2px; color: yellow;}

          div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;

          background: silver; margin-right: 2px; color: maroon;}

          div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; overflow: auto; background: white; color: black;}

          对于这种情况,网页设计员可以向body背景应用一个平铺图像。这个图像会透过外边距创建的缝隙显示出来,如果创作人员认为合适,还可以使缝隙加宽。

          固定定位的另一个用途是在屏幕上放置一个“永久性”元素,如一个小的链接列表。还可以创建一个包含版权和其他信息的永久性页脚,如下所示:

          div#footer {position: fixed; bottom: 0; width: 100%; height: auto;}

          这会把页脚放在视窗的底部,并且一直留在那里,而不论文档如何滚动。

          使用固定定位的一个缺点是,Windows平台的Internet Explorer在IE7之前对此不提供支持。确实有一些解决办法可以在较老版本的IE/Win中增加对固定定位的支持,不过这不一定能得到创作人员的认可,因为与完备的固定定位支持相比,这些模拟方法的显示不太平滑。还有一种办法是在IE/Win中对元素绝对定位,而在更高级的浏览器中使用固定定位,不过这也无法保证对所有布局都可行。

          图10-57:利用外边距分隔“帧”

          注意:网站建设要了解如何在较老版本的IE/Win中模拟固定定位,还可以参考http://css-discum.com/?page=EmulatingFixedPositoning (注 1)[1]。

          当前文章标题:网页设计中的固定定位

          当前URL:http://www.1c4w.com/news/wzzz/fixed-position.html

          上一篇:网页设计中Z轴上的放置

          下一篇:网页设计中的相对定位

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图