`
totoxian
  • 浏览: 1063090 次
  • 性别: Icon_minigender_2
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

CSS元素POSITION的用法一例

CSS 
阅读更多

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布局16例

    9. **Clearfix解决方案**:浮动元素可能导致父元素高度塌陷,为解决此问题,可以使用clearfix方法,如应用`.clearfix::after`伪元素和`clear:both`。 10. **Z-index**:决定元素在层叠上下文中的堆叠顺序,数值越大...

    50例DIV+CSS模板

    首先,固定宽度CSS版式布局是传统的网页设计方法,它设定了一个固定的页面宽度,如960像素或1200像素。这种布局方式适用于那些需要稳定视觉效果和清晰对齐的网站,尤其是在大屏幕显示器上。固定宽度布局的优点在于...

    html css80例

    3. CSS基础:掌握选择器的用法,理解盒模型(包括内容、内边距、边框和外边距),以及了解颜色、字体、背景和布局的相关属性。 4. CSS高级特性:探索浮动(float)、定位(position)以及Flexbox和Grid布局,这些是...

    使用CSS伪元素实现文字部分变色的方法

    除了`:before`和`:after`,W3School还介绍了这两个伪元素在CSS2中的基础用法。`:before`可以用于在元素内容前面插入内容,如图片或其他文本,`:after`则在元素内容之后插入内容。以下是一个简单的例子: ```css h1:...

    纯CSS箭头效果

    在Web开发中,使用CSS来创建美观且功能性的用户界面是一项基本技能。本文将详细介绍如何仅通过CSS来实现一个带有箭头的菜单效果,无需借助任何图片资源或JavaScript代码。这种方法不仅能够提高网站的加载速度,还能...

    css动态定位

    此外,还提到了使用一个固定的父元素进行定位的替代方案,但这种方法在处理滚动条时可能存在难以解决的问题。在实际项目中,我们需要权衡各种方法的优缺点,选择最适合项目需求的解决方案。 总的来说,CSS动态定位...

    简单实现css轮播图

    在网页设计中,轮播图(Carousel)是一种常见的展示多张图片或内容...通过这个基础,你可以进一步学习和掌握更复杂的轮播图实现方法,如使用jQuery插件、Bootstrap Carousel等库,或者使用纯CSS实现更丰富的交互效果。

    div+css讲解

    本教程将深入探讨`div+css`的基本概念、使用方法及其实例应用。 一、Div元素介绍 Div元素,全称为division,意为“分隔”,是HTML中用于组织和划分页面内容的一个容器。它本身没有特定的样式,主要通过CSS来定义其...

    利用CSS3实现进度条的两种姿势详解

    第二种进度条样式采用了一个不同的方法,它使用了两个`&lt;div&gt;`元素来构建一个视觉上的进度条,并且每一个元素都设置为绝对定位。这种方法通过改变元素的宽度或高度来展示进度变化。在这个例子中,进度条被构造成一个...

    css实现主题

    在创建和切换主题时,一种常见的方法是使用CSS变量(CSS Custom Properties)。通过定义全局变量,如`--primary-color`,可以在整个样式表中统一更改主题色彩,而不需要修改每个单独的样式规则。另外,媒体查询...

    纯DIV+CSS制作的竖向三级弹出菜单代码

    在本例中,CSS被用来定义菜单的各项样式属性,如字体、颜色、边框、背景色以及最重要的,通过`:hover`伪类实现鼠标悬停时菜单项状态的改变和子菜单的显示隐藏。 #### 3. 嵌套的UL和LI元素 `ul`(无序列表)和`li`...

    CSS 学习 三角 border transparent 下拉框

    例如,我们可以创建一个包含多个选项的列表,然后使用CSS将其隐藏,只显示一个带有三角箭头的按钮。当用户点击按钮时,通过JavaScript显示或隐藏列表: ```html 下拉菜单 选项1 选项2 选项3 ``` ```css ...

    纯CSS仿百度百科下拉菜单代码.zip

    在IT领域,网页设计是不可或缺的一部分,而菜单导航则是网页设计中的核心元素,它帮助用户在网站中快速定位和浏览内容。"纯CSS仿百度百科下拉菜单代码"是一个专门针对这一需求的解决方案,旨在实现一种高效且美观的...

    css网站实例源码包

    《CSS网站布局实战》是一本深入探讨CSS布局技术的专业书籍,其实例源码包提供了丰富的实践案例,旨在帮助读者掌握如何使用CSS进行高效且灵活的网页布局设计。在这个压缩包中,我们可以找到一个名为"external.css"的...

    CSS制作液晶屏的显示效果.

    在本例中,我们将使用CSS来模拟这些像素,从而创建出类似的效果。 ### CSS代码解析 #### HTML结构 首先,我们需要一个基本的HTML结构来承载CSS样式。在这个例子中,我们有一个名为`#mydemo`的容器,里面包含了一个...

    JS+CSS 做的下拉菜单

    这个项目的源码是一个很好的学习资源,可以帮助初学者理解如何结合CSS和JS创建动态交互的网页元素。通过分析和理解这些代码,你可以掌握如何控制元素的显示、应用CSS样式以及响应式交互设计。同时,这也是提升网页...

    DIV+CSS常用的网页布局代码

    ### DIV+CSS常用的网页布局代码知识点解析 #### 一、基础知识概述 在现代网页开发中,**DIV+CSS**是一种...同时,随着技术的发展,还可以进一步探索使用Flexbox或Grid等更先进的布局方法来提升网页的设计与用户体验。

    小米商城,通过使用html+css+js实现

    4. **定位与浮动**:使用`position`属性(如`relative`、`absolute`、`fixed`)进行元素定位,`float`属性处理元素的浮动。 5. **过渡与动画**:利用`transition`和`animation`添加动态效果,提升用户体验。 三、...

Global site tag (gtag.js) - Google Analytics