Xhtml+CSS

常用JS+CSS

.pop {width:100%;height:100%;position:absolute;left:0;top:0;}
.maskbox {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index:1000;
background: #000;
filter:alpha(opacity=60); /* IE */
opacity: 0.6; /* 支持CSS3的浏览器(FF 1.5也支持)*/
-moz-opacity: 0.6; /* Moz + FF */
}
.outer{height:0px; width:0px;top:50%; left:50%;position:absolute;z-index:2000;}
.middlebox{width:600px;height:400px;margin:-200px -300px;background:#fff;border:5px solid #8b0000;position:absolute;}
.hypertensionlist table td p {width:100px;height:20px;overflow:hidden;/*注意不要写在最后了*/white-space: nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;}
.addpopup {width:600px;height:320px;background:url(../images/poptitlebg.gif) repeat-x left top;}
.addpopup h2 {line-height:30px;padding-left:24px;font-weight:bold;font-size:14px;color:#8b0000;position:relative;}
.addpopup h2 a {position:absolute;right:10px;top:4px;}
.addpopup table {margin:10px auto 0;}
.addpopup table td {text-align:left;padding-left:10px;}
.addpopup table td span {color:#333;padding-left:10px;}
.addpopup table td textarea {margin:5px 0;border:1px solid #c7c7c7;}
.middlebox div.buttonbox {width:98%;margin:5px 0 0;}


/**********Table**********/
table {width:98%;height:auto;margin:0 auto;border-collapse:collapse;border-top:1px solid #ccc;border-left:1px solid #ccc;}
caption{height:24px;line-height:24px;text-align:left;padding:0 0 0 24px;font-weight:bold;font-size:14px;background:url(../images/icon.gif) no-repeat left -524px;}
caption span span {color:red;}
th,td{height:30px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;text-align:center;}
th {height:26px;color:#8b0000;background:url(../images/trbg.gif) repeat-x left top;border-bottom:none;}
td span {color:red;}
tr.graytr td {background-color:#f0f0f0;}
tr.whitetr td {background-color:white;}
tr.overtr td {background-color:#707070;color:white;}
tr.overtr td span {color:white;}
tr.overtr td a:link {color:white;}
tr.overtr td a:visited {color:white;}
tr.overtr td a:hover {color:white;}


//隔行换色 & 鼠标选中变色

用标准的CSS定义你的表格样式

原文链接:A CSS styled table version 2

CSS Hack – IE注释篇

IE特有注释格式:

  1. <!--[if *condition IE *version]>contend<![endif]-->

*condition 值说明:

gt: greater than,选择条件版本以上版本,不包含条件版本
lt: less than,选择条件版本以下版本,不包含条件版本
gte: greater than or equal,选择条件版本以上版本,包含条件版本
lte : less than or equal,选择条件版本以下版本,包含条件版本

  1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
  2. <!--[if IE]> 所有的IE可识别 <![endif]-->
  3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
  4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
  5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
  6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
  7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
  8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
  9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
  10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
  11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

CSS+JS方法去除点击链接,按钮时出现的虚线框

做前台开发时肯定会遇到使用button,a标签的时候,每次点击相关这些标签的时候,我们会经常看到有一个虚线框出现,从视觉效果来看,有虚线框会很刺眼,形象到用户浏览的视觉中心,所以我们有必要将这个刺眼的虚线框去掉。利用google和百度,整理一下相关的方法,方便以后开发当中使用。
继续阅读 »

CSS控制DIV层固定在浏览器底部

使用CSS控制DIV层,使这个DIV层一直在浏览器底部,代码如下:

  1. #foot{
  2.   width:100%;
  3.   height:50px;
  4.   position:absolute;
  5.   top:100%;
  6.   margin-top:-50px;
  7.   background:Blue;
  8.   color:white;
  9. }

首先要设置定位为绝对定位,并设置top为100%,当div的height为N数值时,其div层就必须设margin-top为-N值。IE,FF通过测试。

新发现一些国外地址

http://www.experts-exchange.com/

http://www.ozzu.com/zh/

著名的万能float闭合Clearfix Hack

今天在蓝色理想看到了冰极峰关于弹性流体布局的文章时候,自己对流体布局有了一个重新的认识。不过今天在这里整理的是冰极峰同学在代码里面提到的万能float闭合Clearfix Hack。 继续阅读 »

部分浏览器差异和Bug消除技巧

来源:http://www.dangbao.net/article/data/cssbug.htm

平时开发的时候经常会遇到一些Bug,做个整理和收集

CSS的优先权:style优先级大于id,id的优先级大于class。

FF下水平居中:margin-left:auto;margin-right:auto。

网页编码为UTF-8,页面注释最好用英文。

一个容器内有两个以上浮动元素注释时,容易引起IE BUG(莫名出现结尾字符)。解决方法:删除注释。

浮动+margin在IE6下出现双倍边距,display:inline消除。

IE6不支持除A标签以外的伪类。

IE下容器边框有断裂的地方,容器加上宽度或者zoom:1即可。

IE6捉迷藏bug:预览页面的内容不会出现。全选后出现。给藏起来的容器使用宽度和高度,或者设置line-height即可。

line-height和height的高度相同时,不同的字体显示是居中效果也不同。

list-style-image无法准确定位,建议使用li的背景来实现。

用vertical-align:middle来对齐文本与文本输入框。

禁用文本框中文输入法的通用方法:ime-mode:disabled。

兼容各浏览器的CSS截取字符串省略号效果

做前台开发的时候经常会遇到截取字符串的效果,可以用JavaScript或CSS来完成,这里介绍的是兼容目前多个浏览器的CSS处理方法,后期会补全使用JavaScript处理方法。 继续阅读 »