CSS元素POSITION的用法一例
左直拳
页面上用到了Atlas的控件<atlas:UpdateProgress,以便在进行各种操作时显示一个等待图标,给用户解解闷,好让他们在漫长的等待结果的岁月中不那么烦躁,知道系统正在忙。
形如:
<atlas:UpdateProgress ID="UpdateProgress1" runat="server" >
<ProgressTemplate>
<img src="../images/loading.gif" alt="请稍候..." />
</ProgressTemplate>
</atlas:UpdateProgress>
可是这样写的话图标就歪在一边,不显眼。如果写上个绝对定位,比如
style="position:absolute;left:400px;top:300px;",可这仅仅适合800*600的屏幕,而用户的屏幕分辨率千差万别。
最后发觉可以用百分比,这样写:
<atlas:UpdateProgress ID="UpdateProgress1" runat="server" >
<ProgressTemplate>
<img src="../images/loading.gif" alt="请稍候..." style="position:absolute;left:50%;top:50%;"/>
</ProgressTemplate>
</atlas:UpdateProgress>
这样不管什么情况下,图标都会居于页面之中。
本文介绍了一种使用CSS的百分比定位方法来确保页面加载图标始终处于屏幕中心的技术。这种方法不受用户屏幕分辨率的影响,提高了用户体验。
1246

被折叠的 条评论
为什么被折叠?



