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基本布局十六例详解】 在网页设计中,CSS(层叠样式表)扮演着至关重要的角色,它负责控制页面的布局和样式。本篇将详细介绍四种常见的CSS基本布局方式,帮助你理解如何构建单行单列和单行两列的布局。 1. **...
9. **Clearfix解决方案**:浮动元素可能导致父元素高度塌陷,为解决此问题,可以使用clearfix方法,如应用`.clearfix::after`伪元素和`clear:both`。 10. **Z-index**:决定元素在层叠上下文中的堆叠顺序,数值越大...
首先,固定宽度CSS版式布局是传统的网页设计方法,它设定了一个固定的页面宽度,如960像素或1200像素。这种布局方式适用于那些需要稳定视觉效果和清晰对齐的网站,尤其是在大屏幕显示器上。固定宽度布局的优点在于...
3. CSS基础:掌握选择器的用法,理解盒模型(包括内容、内边距、边框和外边距),以及了解颜色、字体、背景和布局的相关属性。 4. CSS高级特性:探索浮动(float)、定位(position)以及Flexbox和Grid布局,这些是...
除了`:before`和`:after`,W3School还介绍了这两个伪元素在CSS2中的基础用法。`:before`可以用于在元素内容前面插入内容,如图片或其他文本,`:after`则在元素内容之后插入内容。以下是一个简单的例子: ```css h1:...
在Web开发中,使用CSS来创建美观且功能性的用户界面是一项基本技能。本文将详细介绍如何仅通过CSS来实现一个带有箭头的菜单效果,无需借助任何图片资源或JavaScript代码。这种方法不仅能够提高网站的加载速度,还能...
此外,还提到了使用一个固定的父元素进行定位的替代方案,但这种方法在处理滚动条时可能存在难以解决的问题。在实际项目中,我们需要权衡各种方法的优缺点,选择最适合项目需求的解决方案。 总的来说,CSS动态定位...
在网页设计中,轮播图(Carousel)是一种常见的展示多张图片或内容...通过这个基础,你可以进一步学习和掌握更复杂的轮播图实现方法,如使用jQuery插件、Bootstrap Carousel等库,或者使用纯CSS实现更丰富的交互效果。
本教程将深入探讨`div+css`的基本概念、使用方法及其实例应用。 一、Div元素介绍 Div元素,全称为division,意为“分隔”,是HTML中用于组织和划分页面内容的一个容器。它本身没有特定的样式,主要通过CSS来定义其...
第二种进度条样式采用了一个不同的方法,它使用了两个`<div>`元素来构建一个视觉上的进度条,并且每一个元素都设置为绝对定位。这种方法通过改变元素的宽度或高度来展示进度变化。在这个例子中,进度条被构造成一个...
在创建和切换主题时,一种常见的方法是使用CSS变量(CSS Custom Properties)。通过定义全局变量,如`--primary-color`,可以在整个样式表中统一更改主题色彩,而不需要修改每个单独的样式规则。另外,媒体查询...
在本例中,CSS被用来定义菜单的各项样式属性,如字体、颜色、边框、背景色以及最重要的,通过`:hover`伪类实现鼠标悬停时菜单项状态的改变和子菜单的显示隐藏。 #### 3. 嵌套的UL和LI元素 `ul`(无序列表)和`li`...
例如,我们可以创建一个包含多个选项的列表,然后使用CSS将其隐藏,只显示一个带有三角箭头的按钮。当用户点击按钮时,通过JavaScript显示或隐藏列表: ```html 下拉菜单 选项1 选项2 选项3 ``` ```css ...
在IT领域,网页设计是不可或缺的一部分,而菜单导航则是网页设计中的核心元素,它帮助用户在网站中快速定位和浏览内容。"纯CSS仿百度百科下拉菜单代码"是一个专门针对这一需求的解决方案,旨在实现一种高效且美观的...
《CSS网站布局实战》是一本深入探讨CSS布局技术的专业书籍,其实例源码包提供了丰富的实践案例,旨在帮助读者掌握如何使用CSS进行高效且灵活的网页布局设计。在这个压缩包中,我们可以找到一个名为"external.css"的...
在本例中,我们将使用CSS来模拟这些像素,从而创建出类似的效果。 ### CSS代码解析 #### HTML结构 首先,我们需要一个基本的HTML结构来承载CSS样式。在这个例子中,我们有一个名为`#mydemo`的容器,里面包含了一个...
这个项目的源码是一个很好的学习资源,可以帮助初学者理解如何结合CSS和JS创建动态交互的网页元素。通过分析和理解这些代码,你可以掌握如何控制元素的显示、应用CSS样式以及响应式交互设计。同时,这也是提升网页...
### DIV+CSS常用的网页布局代码知识点解析 #### 一、基础知识概述 在现代网页开发中,**DIV+CSS**是一种...同时,随着技术的发展,还可以进一步探索使用Flexbox或Grid等更先进的布局方法来提升网页的设计与用户体验。
4. **定位与浮动**:使用`position`属性(如`relative`、`absolute`、`fixed`)进行元素定位,`float`属性处理元素的浮动。 5. **过渡与动画**:利用`transition`和`animation`添加动态效果,提升用户体验。 三、...