在做开发时,总是找UI来调试样式的问题,自己也学到了一点
1.在一行,分配不同的大小位置用,
<div class="col-sm-8">
<div class="col-sm-3"></div>
</div>
2.按钮的位置 偏左 居中 偏右
style="margin:0 0 0 10px"
3.css处理文字过长时显示为多余部分省略
一、仅定义text-overflow:ellipsis; 不能实现省略号效果。
二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果
三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果:
4.限制显示长度
Js控制字符串显示长度,多出规定字符用点代替
if(str . length > 5) str = str.substring(0,5) + '...';//控制显示五个字符+....;
4.刷新当前页面
window.location.reload();
5.jsp系统的时候经常会使用el标签
在EL中empty对""和null的处理都返回true,而==null对""返回false,对null返回true。
比如:a ==null ,如果a是等于""字符串空。结果就是false.只能判断null
empty a 不管a等于null或者"' ,结果都是true.
Empty 运算符主要用来判断值是否为空(NULL,空字符串,空集合)。
el表达式一般不直接用== != > < >= <=之类的表示相等不等于 大于 小于 大于等于 小于等于,而是使用字母表示的表达式,他们的表示如下:
类别 运算符
算术运算符 + 、 - 、 * 、 / (或 div )和 % (或 mod )
关系运算符 == (或 eq )、 != (或 ne )、 < (或 lt )、 > (或 gt )、 <= (或 le )和 >= (或 ge )
逻辑运算符 && (或 and )、 || (或 or )和 ! (或 not )
验证运算符 empty 空 包括 null和"" not empty 不等于空 包括 null和""
在做jsp系统的时候经常会使用el标签,而empty是使用比较多的一个,这个标签也很方便。但是一直只是会用,从来都没有好好的去思考它的执行原理,所以在写这个之前碰到了一点错误,先来看看我的错误:
- <c:if test="${not empty order.shipphone> ${order.shipphone}</c:if>
这个语句想实现的效果很简单就是进行判断如果值不为null的话才会输出,但是这样却没有实现我要的效果,页面中输出了null,这就奇怪了既然${order.shipphone}已经为null了,这个判断执行的话应该是不允许它通过的,为什么又通过了。于是乎去查询了一下数据库,得到如下:
<br>
于是乎就更加迷惑了,对啊值是空的啊,最后实在没办法,只好求助java群了,其中一个的话让我好好思考了一下:
- 是不是因为${order.shipphone}是字符串的“null”
最后再去看了一下empty的用法:
- <c:if test="${! empty key}">${key}</c:if><c:if test="${empty key}">所有</c:if>当key不为空时输出key的值。当key为空时,输出“所有”规则:1若key为null时,返回true2若key为空string时,返回true3若key为空array时,返回true4若key为空map时,返回true5若key为空collection时,返回true6否则,返回false
从上面可以看出,如果是字符串null的话,这个判断当然是true,也就是说order中的shipphone本身并不为null,它有值,并且值为null,就是这个解释。
看来还是只懂表面,不懂实质啊,也没办法,工作就一个劲完成目标,有时候的确不允许停下来。
那就找一下折中的办法吧!!
- <c:if test="${not empty order.shipphone> ${order.shipphone}</c:if>
- 是不是因为${order.shipphone}是字符串的“null”
- <c:if test="${! empty key}">${key}</c:if><c:if test="${empty key}">所有</c:if>当key不为空时输出key的值。当key为空时,输出“所有”规则:1若key为null时,返回true2若key为空string时,返回true3若key为空array时,返回true4若key为空map时,返回true5若key为空collection时,返回true6否则,返回false
6.button没写type=button会导致点击时提交
改成
原因:button按钮默认为submit.
7.html input标签的隐藏处理 默认值到后台
<
input
type
=
"hidden"
name
=
"id"
value
=
"隐藏的值"
>
<
input
type
=
"text"
name
=
"id"
style="display:none" value
=
"隐藏的值"
>
以上两种方法可以实现不留痕迹的隐藏。
<input type="text" style="visibility: hidden;" />第三种方法可以实现占位隐藏(会留下空白而不显示)8,异步刷新,点击分页按钮,返回顶部
页面: window.scrollTo(0, 0);
子页面parent: window.parent.scrollTo(0, 0);
9. lable标签 (隐式和显式的联系)
第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来,它的 for 属性的值和控件的 id 一样,都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性,它的相关控件也不需要 id 属性,它们是通过在 <label> 标签中放入 <input> 标签来隐式地连接起来的
<form><label for="male">Male</label>
<input type="radio" name="sex" id="male" /> <br /><label for="female">Female</label>
<input type="radio" name="sex" id="female" /> </form>点击 文字一样可以选
点击 文字 进入输入框<label for="username">会员名</label> <input type="text" id="username" name="username" data-rule="会员名:required" placeholder="用户名/邮箱">