- 浏览: 180379 次
- 性别:
- 来自: 福建
最新评论
-
卡殿Love:
你好! 谢谢你的文章让我知道其中的原因,目前正在做手机端上的项 ...
web手机开发(iPhone和Andriod)关于position:fixed 属性的讨论
例如
<!-- ------------上传大附件box begin------------------------>
<div id="vastUpload" class="photo">
<iframe style="z-index:-1; width: 400px; height: 390px;border: 0px;"> </iframe>
<div class="photo_iframe">
<div id="fileUploadTitle" class="photo_A" >
<div class="photo_AA">
上传大附件
</div>
<a href="javascript:void(0);" class="photo_AB"
onclick="hideBox('vastUpload');" title="关闭"> </a>
</div>
<div class="photo_B" onmousedown="var e=event||window.event;if(document.all){e.cancelBubble=true}else{e.preventDefault()}">
<div class="photo_BA">
<span id="spanButtonPlaceholder1"></span>
</div>
<div class="photo_BB" id="fsUploadProgress1">
<span id="spanButtonPlaceholder1"></span>
<input id="btnCancel1" type="button" value="Cancel Uploads" onclick="cancelQueue(upload1);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;display: none;" />
</div>
</div>
<div class="photo_C" onmousedown="var e=event||window.event;if(document.all){e.cancelBubble=true}else{e.preventDefault()}">
<input type="button" value="关闭" class="photo_CA" onclick="hideBox('vastUpload');">
</div>
</div>
</div>
<script type="text/javascript">
new Drag($("#vastUpload")[0]);
</script>
<!-- ------------上传大附件box end---------------------- -->
/*===============================大附件上传框=====================================*/
.photo{width: 400px; height: 390px;position: absolute; top:40px; left: 60px; display: none;z-index: 10;}
.photo_iframe{width: 400px; height: 390px; background: #89B5E9;position: absolute;left: 0px ;top: 0px;border:1px solid #4E86C4; }
.photo_A{width:99%; height: 30px; float: left;}
.photo_AA{width: auto; height: 30px; float: left; line-height: 30px; color: #FFFFFF; font-weight: bold; font-size: 13px; margin-left: 5px; display: inline;}
.photo_AB{width: 16px; height: 16px; background: url('/webmail/resources/editor/cross.gif') no-repeat; float: right; margin: 5px 5px 0px 0px; display: inline;}
.photo_B{width:100%; height:330px; float: left;background-color: #EFF5FB; }
.photo_BA{width:300px;height: 40px;float: left;margin: 25px 0px 0px 15px;display: inline;}
.photo_BB{width:377px;height: 250px;float: left;margin: 0px 5px 10px 5px;background-color: #FFFFFF;border: 1px solid #A7C5E2;overflow-y:scroll;}
.photo_C{width: 100%;height: 30px;float: left;background-color: #E0ECF9;}
.photo_CA{width: 60px;height: 20px;float: right;margin: 5px 10px 0px 0px;}
/*===============================大附件上传-=====================================*/
<!-- ------------上传大附件box begin------------------------>
<div id="vastUpload" class="photo">
<iframe style="z-index:-1; width: 400px; height: 390px;border: 0px;"> </iframe>
<div class="photo_iframe">
<div id="fileUploadTitle" class="photo_A" >
<div class="photo_AA">
上传大附件
</div>
<a href="javascript:void(0);" class="photo_AB"
onclick="hideBox('vastUpload');" title="关闭"> </a>
</div>
<div class="photo_B" onmousedown="var e=event||window.event;if(document.all){e.cancelBubble=true}else{e.preventDefault()}">
<div class="photo_BA">
<span id="spanButtonPlaceholder1"></span>
</div>
<div class="photo_BB" id="fsUploadProgress1">
<span id="spanButtonPlaceholder1"></span>
<input id="btnCancel1" type="button" value="Cancel Uploads" onclick="cancelQueue(upload1);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;display: none;" />
</div>
</div>
<div class="photo_C" onmousedown="var e=event||window.event;if(document.all){e.cancelBubble=true}else{e.preventDefault()}">
<input type="button" value="关闭" class="photo_CA" onclick="hideBox('vastUpload');">
</div>
</div>
</div>
<script type="text/javascript">
new Drag($("#vastUpload")[0]);
</script>
<!-- ------------上传大附件box end---------------------- -->
/*===============================大附件上传框=====================================*/
.photo{width: 400px; height: 390px;position: absolute; top:40px; left: 60px; display: none;z-index: 10;}
.photo_iframe{width: 400px; height: 390px; background: #89B5E9;position: absolute;left: 0px ;top: 0px;border:1px solid #4E86C4; }
.photo_A{width:99%; height: 30px; float: left;}
.photo_AA{width: auto; height: 30px; float: left; line-height: 30px; color: #FFFFFF; font-weight: bold; font-size: 13px; margin-left: 5px; display: inline;}
.photo_AB{width: 16px; height: 16px; background: url('/webmail/resources/editor/cross.gif') no-repeat; float: right; margin: 5px 5px 0px 0px; display: inline;}
.photo_B{width:100%; height:330px; float: left;background-color: #EFF5FB; }
.photo_BA{width:300px;height: 40px;float: left;margin: 25px 0px 0px 15px;display: inline;}
.photo_BB{width:377px;height: 250px;float: left;margin: 0px 5px 10px 5px;background-color: #FFFFFF;border: 1px solid #A7C5E2;overflow-y:scroll;}
.photo_C{width: 100%;height: 30px;float: left;background-color: #E0ECF9;}
.photo_CA{width: 60px;height: 20px;float: right;margin: 5px 10px 0px 0px;}
/*===============================大附件上传-=====================================*/
发表评论
文章已被作者锁定,不允许评论。
-
CSS强制性换行
2013-05-22 13:52 809一般情况下,元素拥有 ... -
最小高度的定义
2011-03-18 10:33 1000height:auto !important;IE6不可以识别 ... -
flash wmode参数详解
2010-10-29 10:50 859在做web开发中可能会遇到flash遮挡页面中元素的情况,无论 ... -
CSS 过滤器 兼容ie,火狐和谷歌
2010-10-28 10:58 3640这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释, ... -
合并图片工具
2010-06-05 08:27 937不错的合成图片的工具,还提供css样式 -
关于line-height设置
2010-03-12 14:08 1149一个小小属性就有那么多的学问,我们来一起了解一下关于line- ... -
区别IE6,IE7,IE8,FF
2010-02-27 13:53 1076区别IE6,IE7,IE8,FF 【区别符号】:「\9」、「 ... -
在ie6下出现“无法打开该地址,浏览器停止服务”的bug
2010-01-04 13:48 749曾经在开发中遇到两次,原因是某个标签没有闭合。 -
IE6下某些中文注释引发的css样式全乱 | IE6下PNG背景图片透明问题
2009-12-08 15:55 2391IE6下如果line-height超出本身区块的height高 ... -
!important认识
2009-12-08 15:07 1007在设计《网页设计师》 ... -
删除div中默认的高度(在ie中)
2009-11-03 17:20 1444<div style='width:100%;heigh ... -
杂谈jQuery中的 height innerHeight outerHeight
2009-10-30 14:38 3727html代码: <div style="wid ... -
去除和隐藏点击链接时出现的虚线框
2009-10-23 15:53 1288如何去除点击链接时出现的虚线框 有时候在一个页面用到收放功能 ... -
浮层的移动
2009-10-23 09:30 771使用 <script type="text/ ... -
1000张网页常用图片
2009-06-08 17:13 2021好东东,1000张网页常用图片 -
1000个网页小图标
2009-06-08 17:12 3702好东东,1000个网页小图标 -
50张Flash小图片
2009-06-08 17:11 1290好东西,50张Flash小图片 -
如何插入flash
2009-06-08 17:00 681<object classid="clsid: ... -
在静态图片特定位置做链接
2009-06-08 16:57 854<img src="file:///C|/Do ... -
如何让一个表单中的文本框中的文字垂直居中?
2009-06-08 16:46 1625如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白 ...
相关推荐
浮层是一种网页设计技术,它在用户与页面交互时,会在当前内容之上显示一个半透明或全透明的覆盖层,通常用于显示详细信息、模态对话框或像这种图片预览。浮层可以是静态的,也可以是动态的,例如响应用户的点击事件...
例如,图片可以是一个`<img>`标签,而浮层则可能是一个`<div>`,通过CSS设置其初始为隐藏(`display:none`)。浮层内可以包含要显示的内容,如文本、按钮或其他元素。 ```html ;"> 浮层内容 关闭 ``` 接着,...
浮层能够覆盖在网页内容之上,吸引用户的注意力,提供额外的信息或者功能。在给定的标题和描述中,我们可以推测这个主题主要涉及如何使用jQuery插件来实现Web页面上的浮层效果。 jQuery是一个广泛使用的JavaScript...
在这个项目中,CSS3的伪类(如`:hover`, `:focus`)和过渡效果(`transition`)可能是实现标签浮动的关键。通过改变元素的`position`、`opacity`或`transform`属性,可以创建出标签从输入框内浮动到上方的效果。 接...
而浮动窗体控件则是在此基础上增加了一些附加功能,如拖放支持、边界吸附和自动隐藏。这些功能通常通过自定义控件和附加行为来实现。 **控件设计**: 1. **拖放支持**:通过重写`DragMove`方法,可以实现窗体的拖动...
浮层 广告 div右下角浮动 右下角浮动 浮动窗口。 兼容性良好。 很好用漂亮的东西。值得研究。
3. **定位与显示**:浮层引导页需要准确地覆盖在目标功能上,以便用户能明白它所对应的操作。工具类可能会自动处理这部分,确保浮层正确对齐。 4. **交互处理**:当用户完成引导后,通常会有一个关闭按钮或手势交互...
8. **响应式设计**:浮层应该适应不同的屏幕尺寸,尤其是在移动设备上。可以使用媒体查询(media queries)或响应式框架(如Bootstrap)来实现。 9. **关闭机制**:提供清晰的关闭按钮或点击非浮层区域自动关闭浮层...
浮层(Overlay)是指在网页原有内容之上覆盖一层新的内容,通常用于显示额外信息或进行交互操作,不影响下方页面的布局。弹出层(Popup)则是在特定触发条件下,如点击或悬浮,从页面某一位置弹出一个包含信息或功能...
浮层View,又称为Overlay View,是一种覆盖在原生UI元素上的透明或半透明视图,用于突出显示或提供额外信息。在Android和iOS平台上,开发者可以利用系统提供的API或第三方库来创建这样的视图。 对于Android平台,...
1. 需要精确地知道`<select>`元素的位置:因为浮层是基于绝对定位覆盖在`<select>`元素上的,所以必须确保浮层的尺寸和位置与`<select>`元素完全匹配,否则可能无法完全遮挡。 2. 对于动态内容或响应式布局,可能...
PagerSlidingTabStrip浮层显示测试完全可以用,在实际项目中经常使用,安卓开发者可以直接下载使用喔 本来亲自测试可以使用 Demo中的PagerSlidingTabStrip是实现了固定的tab个数的方式 如果需要修改成不固定的可以...
本教程将深入讲解如何在RecyclerView中实现一个往上顶浮层标题的功能。 首先,我们需要了解RecyclerView的基本结构。RecyclerView由三个主要部分组成:Adapter、LayoutManager和ViewHolder。Adapter是数据源,负责...
在网页设计和开发中,"透明浮层DIV"是一个常用的技术,它允许创建一个可交互的、具有透明度效果的浮动元素,常用于弹出窗口、对话框或者自定义控件。下面我们将深入探讨这个主题,包括其原理、实现方法以及浏览器...
此款PPT模板采用极简设计,旨在突出核心内容,避免过多的视觉干扰,让观众的注意力更加集中在报告的关键点上。 4. **黑蓝配色**:黑色通常象征专业和权威,蓝色则代表信任和稳定。选择黑蓝作为主色调,既能传达出...
浮层,也称为浮动窗口或悬浮面板,通常是指在主应用窗口之上,可以自由移动、调整大小并显示特定信息的窗口。这种设计使得用户能够方便地访问或操作额外的信息,而不必离开当前的工作环境。在【描述】中提到的“360...
这种功能通常用于提供额外的信息或指导,当用户将鼠标悬停在某个元素上时,提示框会出现在鼠标附近,跟随鼠标的移动而移动。这种设计可以提高用户体验,让用户在不离开当前操作的情况下获取相关信息。 在实现“提示...
本文将深入探讨如何使用SurfaceView来实现这一功能,并通过在每一帧上绘制浮层展示处理结果。 首先,`SurfaceView`是Android系统提供的一种用于显示视频流的视图组件。它拥有自己的独立的渲染线程,能够高效地处理...
标题中的“浮层的移动”指的是在Web开发中,一种常见的交互设计——浮动元素的动态位置调整。浮层,通常是指那些悬浮在页面主内容之上,用于显示额外信息或者功能的元素,比如提示框、菜单、广告等。当用户进行某些...
这个插件的核心功能是在输入框上提供一个下拉或弹出的浮层,展示全国各大城市,包括热门城市,供用户方便快捷地选择。 首先,我们要理解这个插件的实现方式。由于描述中提到城市数据是静态的,这意味着这些城市信息...