It's my evolution lab…
Xhtml+CSS
常用JS+CSS
十二 16th
.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 Hack – IE注释篇
八 26th
IE特有注释格式:
- <!--[if *condition IE *version]>contend<![endif]-->
*condition 值说明:
gt: greater than,选择条件版本以上版本,不包含条件版本
lt: less than,选择条件版本以下版本,不包含条件版本
gte: greater than or equal,选择条件版本以上版本,包含条件版本
lte : less than or equal,选择条件版本以下版本,包含条件版本
- <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
- <!--[if IE]> 所有的IE可识别 <![endif]-->
- <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
- <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
- <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
- <!--[if IE 6]> 仅IE6可识别 <![endif]-->
- <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
- <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
- <!--[if IE 7]> 仅IE7可识别 <![endif]-->
- <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
- <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
CSS+JS方法去除点击链接,按钮时出现的虚线框
七 10th
做前台开发时肯定会遇到使用button,a标签的时候,每次点击相关这些标签的时候,我们会经常看到有一个虚线框出现,从视觉效果来看,有虚线框会很刺眼,形象到用户浏览的视觉中心,所以我们有必要将这个刺眼的虚线框去掉。利用google和百度,整理一下相关的方法,方便以后开发当中使用。
继续阅读 »
CSS控制DIV层固定在浏览器底部
七 1st
使用CSS控制DIV层,使这个DIV层一直在浏览器底部,代码如下:
- #foot{
- width:100%;
- height:50px;
- position:absolute;
- top:100%;
- margin-top:-50px;
- background:Blue;
- color:white;
- }
首先要设置定位为绝对定位,并设置top为100%,当div的height为N数值时,其div层就必须设margin-top为-N值。IE,FF通过测试。
著名的万能float闭合Clearfix Hack
六 17th
部分浏览器差异和Bug消除技巧
六 12th
来源: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截取字符串省略号效果
六 9th
做前台开发的时候经常会遇到截取字符串的效果,可以用JavaScript或CSS来完成,这里介绍的是兼容目前多个浏览器的CSS处理方法,后期会补全使用JavaScript处理方法。 继续阅读 »