当前位置:  编程技术>WEB前端
本页文章导读:
    ▪元素及文本的居中      一.层的横向居中<style>#div1{width:600px; height:600px;}#div2{width:400px; height:200px;}</style><div id="div1"> <div id="div_2"> div2 </div> </div>要让div2在div1中横向居中,解决办法如下:1.IE.........
    ▪OGNL学习(一)Ognl和OgnlContext      各种表达式如下:(导入相关jar包,OGNL.jar 和javassist.jar) package com.ognl; import java.util.ArrayList; import java.util.List; import ognl.Ognl; import ognl.OgnlContext; public class OgnlTest { public static void main(String[] args).........
    ▪Jquery中使用setInterval和setTimeout      var time = 1; $.extend({ showTip : function() { time++; if(time%3 == 0) { alert(time); } else { } } }); setInterva.........

[1]元素及文本的居中
    来源:    发布时间: 2013-10-16

一.层的横向居中

<style>

#div1{width:600px; height:600px;}

#div2{width:400px; height:200px;}

</style>

<div id="div1">
<div id="div_2"> div2 </div>
</div>

要让div2在div1中横向居中,解决办法如下:

1.IE中,设置div1的样式:text-align:center; 该方法在IE8以上版本和firefox中仅适用于行内元素居中(display:inline; 和 display:inline-block; 及类似效果的元素以及文本,如 input img 等 ),子元素中的 div、table 等 具有类似 display:block 效果元素将继承这个样式使文本居中 ,但是容器元素本身并不会居中。

 

2.IE7 以 上和 firefox 中,设置div2样式:margin: auto;  仅对具有类似 display:block 效果的元素生效,对 display 为 inline、inline-block 的元素不生效,一般用于 div、table 等位置定位的容器元素, margin 样 式 auto 效果是横向居中,并置顶。

 

3. div2 不能是 position:absolute; 绝对定位将使浏览器无法对元素自动排版,需依赖 left、right 属性,除非明确设定 left:0,right:0;

 

综合以上:

 #div1{
*text-align:center;   /* ie */
}

#div2{
margin:auto;
display:block;

*display:inline; /* ie */
*zoom:1; /* ie */

}

 

二.层的垂直居中

1.最常见的就是表格元素的 vertical-align:middle; 和 css中的 vertical-align:middle;

css中的 vertical-align:middle;与表格的 vertical-align 不太一样, 该样式作用于 inline-block(或具有类似行内块状效果) 的元素与其父元素内的文本或祖先元素内的文本(如果该祖先元素内的inline-block 元素没有设置 vertical-align 样式)在垂直方向的对齐方式。
vertical-align 无法影响后代元素的内容的对齐方式。

vertical-align 对 block  元素不起作用,因为折行了在垂直方向没有对齐可言。
vertical-align 作用于 inline元素(如 span)时,将决定该元素自身如何对齐于同一行内的 inline-block 元素,无法影响同辈元素或文本的对齐方式。
vertical-align 取 值为 text-top text-bottom 时, 对齐方式涉及文本的 inline-box 模型,

inline-box 模型的高度 由 line-height(可以是继承来的) 决定,分为 content-area、top、bottom几个部分,其中的 content- area 是由文字大小决定,如果过 line-height 很大, font-size 较小,加上背景颜色,我们就看到的背景色区域就 是 content-area,
text-top 和 text-bottom 并不是可见的文字的顶端和底端(IE6-8 在渲染 text- top 和text-bottom时, 错误地将content-area 的顶端和底端作为对齐的基准)。

具体的解释参考这里:

http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%EF%BC%88%E4%BA%8C%EF%BC%89%E4%B9%8Btext-top%E7%AF%87/

 

一个例子,firefo、chrome 与IE 有差别:

<div >
<span >大大的文字</span>后面是静止的文字。
</div>

##================== test ==================

document.body.innerHTML = '<div id="conatiner" >aaaaaaaaa<div ><div >12313123123<input type="button" value="click"><span >hello world</span></div>8888</div>bbbbbbbbbb</div>';

##====================================

 

 

2.如果不想用table元素实现垂直居中,在IE8以上版本和firefox中,display: table-cell; 可以让div以表格单元格的方式显示,设置样式为

#div2{display: table-cell; vertical-align: middle; } ,但IE6中不支持display: table-cell;

3、如果是单行文本,为了兼容IE6,可以使设置行高与div的高度一致 #div2{heigh:100px;line-height:100px;}

4、对于多行文本,如果包含文本的div高度不固定,为了兼容IE6可以使设置top和bottom的padding为相同的固定值,div随文本内容增加而自动改变高度  #div2{height:auto; padding:10px 0px;}

 

三.绝对居中

1、利用百分比偏移和margin负值,该方法对所有元素生效,该方法兼容所有浏览器

<style>

.div_1{
position:relative;
border: solid 1px red;
width:200px;
height:200px;
background-color:
    
[2]OGNL学习(一)Ognl和OgnlContext
    来源: 互联网  发布时间: 2013-10-16

各种表达式如下:(导入相关jar包,OGNL.jar 和javassist.jar)

package com.ognl;
import java.util.ArrayList;
import java.util.List;
import ognl.Ognl;
import ognl.OgnlContext;
public class OgnlTest {
	public static void main(String[] args) throws Exception  {
		Person person = new Person();
		person.setName("zhangsan");
		
		Dog dog = new Dog();
		dog.setName("wangcai");
		
		Dog dog2 = new Dog();
		dog2.setName("maomao");
		person.setDog(dog2);
		
		OgnlContext context = new OgnlContext();//实现了map接口
		
		context.put("person", person);
		context.put("dog", dog);
		
		context.setRoot(person);
		
		Object object = Ognl.parseExpression("name");
		System.out.println(object);//name
		/*
		 * Ognl.getValue(object,context,context.getRoot())
		 * 它会到指定的上下文context中去寻找object,默认是到根元素中寻找
		 * 在OGNL中,如果表达式没有使用#号,那么OGNL会从根对象中寻找该属性对应的get()
		 * 方法,如果寻找的不是根对象的中的属性,那么需要以#开头,告诉OGNL,去寻找指定对象中的属性
		 */
		Object object2 = Ognl.getValue(object, context,context.getRoot());
		System.out.println(object2);//zhangsan
		Object o = Ognl.getValue("name", context,context.getRoot());
		System.out.println(o);//zhangsan
		
		Object object3 = Ognl.getValue("#dog.name",context,context.getRoot());
		System.out.println(object3);//wangcai
		
		Object object4 = Ognl.getValue("#person.dog.name", context,context.getRoot());
		System.out.println(object4);//maomao
		/*
		 * 调用属性所用的方法
		 */
		System.out.println("-------------------------------");
		//Object obj = Ognl.getValue("getName().toUpperCase()", context,context.getRoot());//效果同下
		Object object5 = Ognl.getValue("name.toUpperCase()", context,context.getRoot());
		System.out.println(object5);//ZHANGSAN
		
		System.out.println("--------------------------------");
		/*
		 * 当使用OGNL调用静态方法的时候,需要按照如下的语法编写表达式
		 * @package.classname@method(parameters)
		 * 较特殊的类:对OGNL来说,java.lang.Math是其默认的类,即调用java.lang.Math的静态方法时,
		 * 无需指定类的名称
		 */
		Object object6 = Ognl.getValue("@java.lang.Integer@toBinaryString(10)",context,context.getRoot());
		System.out.println(object6);//1010
		Object object7 = Ognl.getValue("@@min(7,10)", context,context.getRoot());
		System.out.println(object7);//7
		System.out.println("----------------------------");
		/*
		 * 数组和集合
		 * 都是通过下标索引访问
		 */
		Object object8 = Ognl.getValue("{'aa','bb','cc'}[2]", context,context.getRoot());
		System.out.println(object8);//cc
		System.out.println("-------------------------");
		/*
		 * 映射Map
		 * 语法格式如下:
		 * 	#{'key1':'value1','key2':'value2'}
		 */
		Object object9 = Ognl.getValue("#{'key1':'value1','key2':'value2'}['key2']", context,context.getValues());
		System.out.println(object9);//value2
		System.out.println("--------------------------");
		/*
		 * 过滤
		 * 格式:
		 * 	collection.{? expression}
		 * 返回的是集合
		 * #this表示遍历时每个对象(联想增强for循环)
		 */
		List<Person> list = new ArrayList<Person>();
		Person p1 = new Person();
		Person p2 = new Person();
		Person p3 = new Person();
		
		p1.setName("hehe");
		p2.setName("xixi3");
		p3.setName("haha333");
		
		list.add(p1);
		list.add(p2);
		list.add(p3);
		context.put("list",list);
		System.out.println(Ognl.getValue("#list.{? #this.name.length() > 4}.size()", context,context.getRoot()));//2
		/*
		 * 过滤获取集合中的第一个元素
		 * 表达式:
		 * 		collection.{^ expression}
		 * 返回值为集合
		 */
		System.out.println(Ognl.getValue("#list.{^ #this.name.length() > 4}.get(0).getName()", context,context.getRoot()));//xixi3
		/*
		 * 过滤器取得集合中最后一个元素
		 * 表达式:
		 * 		collection.{$ expression}
		 */
		System.out.println(Ognl.getValue("#list.{$ #this}[0].name", context,context.getRoot()));//haha333
		/*
		 * 投影
		 * 	表达式:
		 * 		collection.{expression}
		 * 返回集合,返回集合长度和原来集合的长度相等
		 * 返回的集合中的对象是原来对象的子集
		 * 
		 * 过滤与投影的区别:
		 * 	类比于数据库中的表,过滤是取行,而投影是取列的操作
		 */
		System.out.println(Ognl.getValue("#list.{name}", context,context.getValues()));//[hehe, xixi3, haha333]
		
		System.out.println(Ognl.getValue("#list.{#this.name.length()>4?'Hello world':#this.name}", context,context.getRoot()));//[hehe, Hello world, Hello world]
	}
}


 在Struts2中,根对象就是ValueStack(一个堆栈),在Struts2的任何流程中,ValueStack中的最顶层对象一定是Action对象。

以下几个对象,叫做“命名对象” ,不在ValueStack中:

 

类名 访问方式 parameters(客户端传向服务器端的参数) #parameters.uernme request #request.username application

#application.username

访问 静态方法或静态成员变量的改进@vs@method(其中vs表示ValueStack)

作者:zhongqian123 发表于2013-1-6 22:19:20 原文链接
阅读:76 评论:0 查看评论

    
[3]Jquery中使用setInterval和setTimeout
    来源: 互联网  发布时间: 2013-10-16
var time = 1;
		$.extend({  
            showTip : function() {  
                time++;  
                if(time%3 == 0) {    
						alert(time);
                } else {    
                 }     
            }  
        });    
        setInterval("jQuery.showTip()", 1000); 


上面是一个简单用于每隔3秒检测一次


直接在ready中调用其他方法,会提示缺少对象的错误,解决方法如下:

方法1. 应用jQuery的扩展可以解决这个问题。
$(document).ready(function(){
$.extend({
  show:function(){
   alert("ready");
  }
});
setInterval("show()",3000);
});

方法2. 指定定时执行的函数时不要使用引号和括号。
$(function(){
function show(){
   alert("ready");
}
setInterval(show,3000);// 注意函数名没有引号和括弧!

// 使用setInterval("show()",3000);会报“缺少对象” 
});

区别:

setTimeout()

   从载入后延迟指定的时间去执行一个表达式或者是函数;

      仅执行一次 ;和window.clearTimeout一起使用.

setInterval()

   在执行时,它从载入页面后每隔指定的时间执行 一个表达式或者是函数;(功能类似于递归函数);和window.clearInterval一起使用.

补充说明:

这两个方法都可以用来实现在一个固定 时间段之后去执行JavaScript。不过两者各有各的应用场景。


作者:grassroots2011 发表于2013-1-6 22:18:27 原文链接
阅读:75 评论:0 查看评论

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3