css常用效果http://www.qdfuns.com/notes/47654/f26eaa6148a3de8e8055bb6327b82055.html
div span 垂直居中 使用vertical-align: middle
vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用。所以要实现上下垂直居中对齐,可以采用如下样式
display:table-cell; /按照单元格的样式显示元素/
vertical-align:middle; /垂直居中对齐/
上面的设置方式相比设置line-height属性,可以兼容文字有多行的情形。
<div>
<span>测试测试,即便是多行,我也还是垂直居中对齐的。</span>
</div>
设置css样式
div{ width:200px; height:115px;display:table-cell;vertical-align: middle;}
给input的placeholder设置颜色
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
jquery Date()操作 获取时间 日期 星期等
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
全选 反选 不选
html:
<input type="button" value="全选" id="sele"/>
<input type="button" value="不选" id="setinterval"/>
<input type="button" value="反选" id="clear"/>
<div id="checkboxs">
<input type="checkbox"/><br />
<input type="checkbox"/><br />
</div>
js:
<script>
window.onload=function(){
var sele=document.getElementById('sele');//获取全选
var unsele=document.getElementById('setinterval');//获取不选
var clear=document.getElementById('clear');//获取反选
var checkbox=document.getElementById('checkboxs');//获取div
var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}
//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}
}
</script>
实现思想:设置tabindex 和 z-index一样;
<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;"> </div>
定义TAB属性后,元素是默认会加上焦点虚线的,那么在IE中可以通过hidefocus="true"去除!其他浏览器通过outline=0进行去除!
jquery去空格
html:
<div> lots of spaces before and after </div>
<pre id="original"></pre>
<pre id="trimmed"></pre>
jquery:
$(function () {
$( "#original" ).html( $('div').text()); //原文本
$( "#trimmed" ).html( $.trim( $('div').text())); //去空格的文本
})
实现textarea文本域的高度自适应(ie8以下不支持)
html:
<pre class="input" id="pre"></pre>
<textarea class="input hide" id="textarea"></textarea>
css
.input {
padding: 10px;
width: 300px;
min-height: 150px;
border: 1px solid #ccc;
resize: none;
font-size: 20px;
line-height:30px;
overflow: hidden;
word-wrap: break-word;
}
.hide {
position: absolute;
z-index: -100;
visibility: hidden;
}
js:
var textarea = document.getElementById('textarea');
var pre = document.getElementById('pre');
textarea.oninput = function() {
pre.textContent = textarea.value;
textarea.style.height = pre.offsetHeight + 'px';
}
滚动条宽度为0即滚动条消失
实现思想:设置滚动条宽度为0 或者 滚动条隐藏
::-webkit-scrollbar
{
width: 0px;
}
隐藏滚动条
html,body{
overflow-x:hidden;
_overflow-x:hidden;
overflow-y:hidden;
}
点击上下按钮实现div滚动条效果
实现思想:div设置超出滚动的时候,对div滚动条的一个操作 当点击相应按钮时。执行函数事项滚定效果
滚动条操作:获取滚动条距离div顶部距离 scrollTop();获取滚动条距离div左侧距离scrollLeft();
$('.down').click(function(){
$('.main').animate({scrollTop:$('.main').scrollTop()+200});
})
$('.up').click(function(){
$('.main').animate({scrollTop:$('.main').scrollTop()-200});
})
子父页面操作
主要运用情况:
1.子页面调用父页面函数:parent.fn() //fn() 父页面函数
2.子页面获取父页面变量:parent.varname //varname 父页面变量名
3.父页面调用子页面函数:iframename.window.fn() //iframename iframe属性name值 fn()子页面函数
4.父页面获取子页面变量:document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); //contentDocument后可以使用document相关方法
var tet = document.getElementById('iframeId').contentWindow.document.getElementById("text_inputId");
alert(tet.value)
按钮点击效果
移动端、PC端按钮点击时,要有变化。
效果可以用css 伪类来实现:
a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
其他伪类:
:link 链接没有被访问时
:visited链接被访问过后
:hover鼠标悬浮在链接上时
:focus用于元素成为焦点,这个经常用在表单元素上
:first-child选择某个元素的第一个子元素;
:last-child选择某个元素的最后一个子元素;
:nth-child()选择某个元素的一个或多个特定的子元素; odd奇数、even偶数
:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
:nth-of-type()选择指定的元素;
:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
:first-of-type选择一个上级元素下的第一个同类子元素;
:last-of-type选择一个上级元素的最后一个同类子元素;
:only-child选择的元素是它的父元素的唯一一个了元素;
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty选择的元素里面没有任何内容
CSS自定义字体,让你的字体运用随心所欲!
步骤:
1、下载所需字体。字体下载站提供的字体一般为.TTF格式。
2、字体转格式。为了确保在主流浏览器中都能正常显示该字体,需要提供3种字体格式。我们可以拿下载下来的.TTF文件去转换得到另外两种格式的字体。字体文件格式的转换可以通过网站FontsQuirrel或 onlinefontconverter提供的在线字体转换服务获取。
.TTF或.OTF 适用于Firefox 3.5、Safari、Opera
.EOT 适用于Internet Explorer 4.0+
.SVG 适用于Chrome、IPhone
3、使用@font-face定义字体。如果你是在fontsquirrel.com进行的字体转换,那么连定义字体的步骤都可以免了。转换以后他会提供一个下载包,里面包含需要的字体格式和定义好字体样式的CSS文件stylesheet.css,还有一个供查看字体的demo.html文件。把字体和stylesheet.css拷贝到你的CSS文件夹目录里面就可以调用了。如何生成的样式不能满足你的要求,可以自己修改。
4、在html里面调用CSS。
附: CSS字体声明:
@font-face {
font-family: ‘fontNameRegular’;
src: url(’fontName.eot’);
src: local(’fontName Regular’),
local(’fontName’),
url(’fontName.woff’) format(’woff’),
url(’fontName.ttf’) format(’truetype’),
url(’fontName.svg#fontName’) format(’svg’);
}
/*其中fontName替换为你的字体名称*/
在页面中需要的地方使用该字体:
p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}