标签归档CSS

工作记录-单行和双行文字的省略号,2015.10.12

吴阳 No Comments

//一行文字省略号
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
//两行文字省略号,此处是有2处需要出现省略号所以有个循环。
 for (i = 1; i < 3;i++){
 var text = document.getElementById('txt'+i);
 str = text.innerHTML;
 var textLeng = 16;
 if (str.length > textLeng) {
 text.innerHTML = str.substring(0, textLeng) + "...";
 }
 }

省略号

CSS – firefox与IE透明度(opacity)设置区别 – L.Rain – 博客园

吴阳 No Comments

来源: CSS – firefox与IE透明度(opacity)设置区别 – L.Rain – 博客园

IE:

filter:alpha(opacity=sqlN)

tips:其中 sqlN的值域为[0, 100]

js: ieNode.style.filter=”alpha(opacity=sqlN)”;

Firefox,Chrome和Safari:

opacity:sqlN

其中sqlN的值域为[0, 1]

js: firefoxNode.style.opacity=sqlN;

效果工具收集整理css/js/css3

吴阳 No Comments

1、支持手机触摸屏左右滑动的js轮播效果代码 – 下载频道 – CSDN.NET

2、HTML5:datalist

3、css中正确设置微软雅黑字体——w3cdream|前端学习-开发.
font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiuvia;

4、移动端web,自适应问题:
百分比就是先以640下的尺寸除以2,为基准,然后media screen去调整。

5、Unix时间戳(Unix timestamp)转换工具 – 站长工具.

6、【原】js实现复制到剪贴板功能,兼容所有浏览器 – 白树 – 博客园.

7、IE7兼容性问题

.style{
line-height:18px;
*line-height:30px;/* IE7 */
}

8、鼠标经过某一容器,使其容器内部的元素呈现
#container:hover .arrow { display: block;}

9、禁止选中文字CSS

<body onselectstart="return false"> <!-- for IE -->
div{
moz-user-select: -moz-none; 
-moz-user-select: none; 
-o-user-select:none; 
-khtml-user-select:none; /* you could also put this in a class */ 
-webkit-user-select:none;/* and add the CSS class here instead */ 
-ms-user-select:none; 
user-select:none;/**禁止选中文字*/
}

10、textarea禁止被拉伸

 resize:none;

11、Box Shadow(阴影)-Css3演示

http://www.css88.com/tool/css3Preview/Box-Shadow.html
-moz-box-shadow:0px 1px 5px #2D2D33; 
-webkit-box-shadow:0px 1px 5px #2D2D33; 
box-shadow:0px 1px 5px #2D2D33;
  • box-shadow:阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
  • Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2px 5px #333333
  • webkit内核的Safari和Chrome支持Box Shadow(阴影):-webkit-box-shadow:2px 2px 5px #333333
  • Opera支持Box Shadow(阴影):box-shadow:2px 2px 5px #333333
  • IE不支持Box Shadow(阴影)

同一class下不同标签,定义相同样式的格式

吴阳 No Comments

结构:

<div class=”head_tools”><a>标签</a><i>标签</i><span>标签</span></div>

样式:

.head_tools a, .head_tools i, .head_tools span{
display:block;
float:left;
height:30px;
font-size:14px;
color:#FFF;
font-family:”微软雅黑”;
font-weight:900;
}

理解为:

类名+标签,类名+标签,类名+标签{

}

注意:因为样式定义了浮动,所以当不需要浮动的时候可以直接用该class来定义其字体样式。