css技巧1

参考网站http://www.w3chtml.com

http://www.w3school.com.cn/

1:input与img对齐 
<style> 
    alignImg{ 
vertical-align:middle; 
    } 
</style> 
<table> 
  <tr> 
    <td> 
        <input class="classA alignImg"/> 
        <img class="alignImg"/> 
    </td> 
   </tr> 
</table> 
input使用了两个class名. 

2：防止单元内容太大把table撑变型 
td{ 
    word-break: break-all; 
    color:red !important; 
} 
3：验证input的长度时最好使用maxlength属性，而不是js. 
<input name="username" maxlength="100"/> 
数据库中定义的字段长度是varchar2(200),这样是因为在GBK中文环境时页面的100个字符，存到数据库中正好是200。如果页面输入200个英文是可以保存成功的，但是不能保证用户只输入英文。 
4：css控制超链接的样式 
a:link    {color:blue; text-decoration:none;} 
a:visited {color:red;  text-decoration:none;} 
a:hover   {color:red;  text-decoration:underline;} 
a:active  {color red;  text-decoration:none;} 

5:使div中的内容可以在浏览器中编辑 
<div   contentEditable="true" unselectable="off" ></div> 
然后使用js得到元素的css位置值,可以把这些值保存在服务器中 
var v_top    = obj.style.top; 
var v_left   = obj.style.left; 
var v_width  = obj.style.width; 
var v_height = obj.style.height; 


6:IE本地显示图片 
<style type="text/css"> 
    #_show{ 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
#_man1{ 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
#man2{ 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 

</style>

7:在表格的单元格中，把两个span内容，左右两端显示

<td style="width:100%;">
 <span style="float:left; vertical-align: middle; margin-top: 4px;">
  &nbsp;&nbsp;&nbsp;&nbsp;
  左边显示的内容
 </span>
 <span style="float:right; margin-bottom: 0px; vertical-align: middle;">
  右边显示的内容
 </span>
</td>