文章列表
最近一直忙于工作,修改BUG,很少有时间上来总结一些东西,实在抱歉,对于时间的管理上自己还是得加强,没时间不能做为一种理由。
提高用户体验关键在于细节。
经常会发现一些表单元素与标签对不齐的现象,如下图片所示:
做为专业者不能视而不见的,其实两句代码就能将对齐解决:
body{font-family:Tahoma;}
input,label{vertical-align:middle;}
其中font-family:Tahoma为关键点,当然你可以根据自已需要而更改,不需在BODY里控制font-family,可以定义一个class,运用到提示文字的容器里。
&l ...
一、禁止换行
white-space:nowrap;
overflow:hidden;
当文字内容过长,想以省略号表示可使用text-overflow:ellipsis,此法在FF下无效,但在FF下可以调宽度+ 伪类的方法即:
p:after{content:"...";}
这个方法有个弊端,当内容很少的情况下也会出现这个省略号,怎么解决呢???
二、强制换行
word-wrap:break-word;/*不断开英文单词*/
overflow:hidden;
word-break:break-all;/*断开英文单词*/
overflow ...
方法一:定义样式outline:none即可,但此法只适应于FF,IE不支持,在IE 下可使用其私有的html属性:hideFoucs,在标签的结构中加入 hidefocus=”true” 属性。
<a href="#" hidefocus="true">这里放置您需要的文字或图片</a>
方法二:针对于IE
.HideFocus {
hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
outline: none; /* for fir ...
前面一篇博文有讲关于display:inline-block在FF出现空白的解决方案,这篇博文主要讲解下display:inline-block的实际应用。
应用一如下图所示。当固定宽度,固定高度,向左浮动float:left就解决了。但是,这个设计中内容是可变的,也就意味着当内容增多,高度不一就会破坏这个布局。
你也许会想到每一行三个放在一个UL里,然后程序员3*N的循环,现在用display:inline-block来解决这个问题
<ul class="imgList">
<!--循环开始-->
< ...
自定义鼠标图案
.ablumInfo_style1{cursor:url("images/L.cur"),-moz-cell;}
<a href="#" class="ablumInfo_style1">自定义鼠标提示图标 </a>
其中url内是你自定义图案的路径,-moz-cell是FF的专有属性。
注意以下几点:
一、图片格式:cur格式与ani格式,可以用GIF Movie Gear软件将PNG,JPG,GIF格式的图片转化,其中FF不支持ani格式;
二、鼠标图片大小:32*32, ...
最近在优化页面时遇到的问题:在浮动里的绝对定位元素在FF下显示正常而在IE下被遮挡
FF显示效果:
IE显示效果:
#wrap{overflow:hidden;
height:1%;
}
#wrap li{float:left;
margin-right:12px;
height:120px;
padding:6px;
position:relative;
ist-style:none;
}
#wrap li .text{position:absolute;
left:120px;
top:8px;
background:#c ...
最近制作中有遇到过未知大小图片未知容器里底部对齐的效果,如下图所示:
有用到display:inline-block做这个效果,通过实践会发现在FF下相邻的inline及inline-block的元素而产生的莫名其妙的空白间距如下图所示:
这是因为,html中存在空格或者换行,就会有一个间距,就像两相邻的两个a,默认情况下也会有间距,解决的办法可以让相邻的inline及inline-block的元素没有空格。显然这样不利用查看结构。怎样有效的去掉这空白间距呢,方法如下两种。
方法一:利用letter-spacing属性,给外层容器的定义letter-s ...
一、单行文本垂直居中对齐方法
height:20px;
line-height:20px;
overflow:hidden;
注意:overflow:hidden不可省略,以上数字自定义,此法不适应图片
二、多行文本在未知容器内垂直居中对齐方法
padding-top:10px; padding-bottom:10px;
注意:以上数字自定义,此法不适应图片
三、多行文本在已知容器内垂直居中对齐方法
.valign{
border:2px #666 solid;
height:560px;
display:table-cell;
ver ...