css笔记——杂记

####文本框内阴影####

input[type=text], textarea, input[type=email], input[type=url]{
box-shadow: inset 2px 2px 1px #ddd;
-webkit-box-shadow: inset 2px 2px 1px #ddd;
-moz-box-shadow: inset 2px 2px 1px #ddd;
-o-box-shadow: inset 2px 2px 1px #ddd;
}

  

####table####












thead>tr>th

tbody>tr>td

  


####按需加载对应页面####

if(!!(window.attachEvent && !window.opera)) 
{document.execCommand("stop");} //IE
else 
{window.stop();} //FF

  


#####文本####

.at{
background-color:pink;
width:270px;
height:170px;
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;

}

  

UI组件

1、button
2、checkbox & radio
3、panel
4、modal
5、progress
6、component
7、typography
8、listgroup
9、tabs
10、alert
11、tables
12、form


#检测移动端还是PC端

var mobileReg=/iphone/ipod/android.*mobile/windows.*phone/blackberry.*mobile/i;

if((mobileReg.test(window.navigator.userAgent.toLowerCase()))){
alert("移动设备!");
}
else{
alert("非移动设备!");
}

navigator.userAgent

//然后用indexOf找

//寻找页面中的iframe
window.opener.location.href

    

/*自适应设置*/


  

/*关于vertical-align*/
vertical-align的百分比值是相对于line-height计算的
vertical-align和line-height是一对好基友两个一起用近似垂直居中

vertical-align起作用的前提
-----探讨各种display值对vertical-align的影响

p{display:table-cell;vertical-align:middle;}/×那么p里面的内容居中对齐×/

  

eg:

文字

  

.test-list>span{display:inline-block;width:210px;vertical-align:middle;}
.test-list>img{vertical-align:middle;}

  


eg:

{
line-height:30px;
vertical-align:-10%;
}

  


等同于

{
line-height:30px;
vertical-align:-3px;
}

  

text-align:justify;任意数目列表两端对齐效果

.justify-fix{ display:inline-block; width:250px;}

容器:line-height:0;
元素:vertical-align:top;

  

此时图片可以实现两端对齐

 

/*文本框做字符串限制*/

方法一:


  

方法二:

$(function() { 
$.fn.manhuaInputLetter = function(options) {
var defaults = { 
len : 200,
showId : "show"
};
var options = $.extend(defaults,options); 
var $input = $(this); 
var $show = $("#"+options.showId);
$show.html(options.len);
$input.live("keydown keyup blur",function(e){ 
var content =$(this).val();
var length = content.length;
var result = options.len - length;
if (result >= 0){
$show.html(result);
}else{
$(this).val(content.substring(0,options.len))
}
}); 
} 
});

  

完全垂直居中

根据定义:元素垂直中心点和父级基线上1/2x-height对齐 如果要完全垂直居中,则设置font-size:0;

1、:元素vertical-align 垂直对齐的位置和前后的元素都没有关系;
2、:元素vertical-align垂直对齐的位置与行高line-height没有关系,只与字体大小font-size有关

1、使用基线的问题在于图标偏上
2、使用顶线/底线的问题在于收其他内联元素影响,造成巨大定位偏差
3、使用中线也是不错的选择,但需要恰好的字体大小以及兼容性要求不高
4、使用文本底部较合适,不受行高以及其他内联元素的影响

html中的上标下标

上:sup
下:sub

大概相当于 vertical-align:super 提高盒子基线到父级合适的上标基线位置
大概相当于 vertical-align:sub 降低盒子的基线到父级合适的下标基线位置


//#######################
js

xx.split('/').pop() 或 xx.split('\\').pop()

 

css3实现动画渐入效果

h2:hover{

transition:transform 3s;
transform:translate(50px , 100px);
}

h5标签

figure 以及 figcaption


trasition 在ie10里面才有效

@charset "utf-8"


动画延时

p标签的同辈元素

.test1 figcaption p:nth-of-type(1){transition-delay:0.05s;}
.test1 figcaption p:nth-of-type(2){transition-delay:0.1s;}
.test1 figcaption p:nth-of-type(3){transition-delay:0.15s;}  

 ######js中checked####

只要记住,修改input的 checked or disabled 属性的时候,用prop就行

######变色背景#####

background-color: #fff;
animation:bgColor 1s linear 1s infinite alternate ;
-webkit-animation:bgColor 1s linear 1s infinite alternate ;
-moz-animation:bgColor 1s linear 1s infinite alternate ;
-o-animation:bgColor 1s linear 1s infinite alternate ;


@keyframes bgColor {
0%{border-color:#990000}
100%{border-color:#f36523 }
}

@keyframes bgColor {
0%{border-color:#f36523}
100%{border-color:#faaba1 }
}

@-webkit-keyframes bgColor {
0%{border-color:#f36523}
100%{border-color:#faaba1 }
}

@-moz-keyframes bgColor {
0%{border-color:#f36523}
100%{border-color:#faaba1 }
}

  

 

css笔记——杂记_第1张图片

 禁止选择文本:

-webkit-user-select:none

  

转载于:https://www.cnblogs.com/MonaSong/p/5151859.html

你可能感兴趣的:(ui,移动开发,javascript,ViewUI)