img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
Document
溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏
img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
<style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transition-function: ease-out; transition-duration: 1000ms; -webkit-transition-function: ease-out; -webkit-transition-duration: 1000ms; -moztransition-function: ease-out; -moztransition-duration: 1000ms; -o-transition-function: ease-out; -o-transition-duration: 1000ms; } .trans-scale:hover { transform: scale(1.25, 1.25); -webkit-transform: scale(1.25, 1.25); -moz-transform: scale(1.25, 1.25); -o-transform: scale(1.25, 1.25); } style> <div class="trans-scale">div>
最简便的一个方法,通过js实现。
<input type="text" name="username" id="username" value="姓名" onfocus="if(this.value=='姓名') this.value = ''" onblur="if(this.value=='') this.value='姓名'"> <textarea name="content" id="content" onfocus="if(this.value=='内容') this.value = ''" onblur="if(this.value=='') this.value='内容'">内容textarea>
<style> div{ width:300px; height:300px; background:#89F; margin:100px auto; transition:width 1s ease-out .5s; -moz-transition:width 1s ease-out .5s; -webkit-transition:width 1s ease-out .5s; -o-transition:width 1s ease-out .5s; } div:hover{ width:600px; } style> <div>div>
官方网站:http://echarts.baidu.com
css去除ios文本框默认圆角
input, textarea {-webkit-appearance: none;}
<div id="allmap">div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY">script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js">script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <script type="text/javascript"> var map = new BMap.Map("allmap"); var point = new BMap.Point(113.663941,34.805986);//坐标 var marker = new BMap.Marker(point); // 创建标注 marker.enableDragging(); //marker可拖拽 marker.addEventListener("click", function(e){ searchInfoWindow.open(marker); }) var content = '' +'; //创建检索信息窗口对象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title : "XX公司", //标题 width : 290, //宽度 height : 105, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", { title: "信息框1", //标题 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_FROM_HERE, //从这里出发 BMAPLIB_TAB_SEARCH //周边检索 ] }); map.addOverlay(marker); // 将标注添加到地图中 map.centerAndZoom(point, 15); map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("北京市"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 function openInfoWindow1() { searchInfoWindow1.open(new BMap.Point(116.319852,40.057031)); } script>
' ' +
'地址:
XXX
电话:
XXX' + '
window.οnlοad=function(){ function(a); function(b); }
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( ); //获取日期与时间
css设置透明并实现兼容:
<style>
div{
filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8;
} style>
为防止文字过长而撑坏表格,一般我们需要通过css使td中内容强制换行。分别给table和td加一条样式即可实现:
<meta charset="utf-8"> <style> table{table-layout:fixed;} td{word-break:break-all;} style> <table width="90"> <tbody> <tr> <td>table溢出自动换行td> tr> tbody> table>
传统网站常用的设为首页/加入收藏js代码
<a href="javascript:void(0)" onclick="sethome(this,window.location)">设为首页a> | <a href="javascript:void(0)" onclick="collect(document.title,window.location)">加入收藏a> <script type="text/javascript"> function sethome(obj,vrl){ try{ obj.style.behavior='url(#default#homepage)';obj.setHomePage(vrl) }catch(e){ if(window.netscape){ try{ netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect") }catch(e){ alert("此操作被浏览器拒绝!\n请在浏览器地址栏输入“about:config”并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为'true',双击即可。") } var prefs=Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch); prefs.setCharPref('browser.startup.homepage',vrl) }else{ alert("您的浏览器不支持,请按照下面步骤操作:\n1.打开浏览器设置。\n2.点击设置网页。\n3.输入:"+vrl+"点击确定。") } } } function collect(sTitle,sURL){ try{ window.external.addFavorite(sURL,sTitle) }catch(e){ try{ window.sidebar.addPanel(sTitle,sURL,"") }catch(e){ alert("加入收藏失败,请使用Ctrl+D进行添加") } } } script>
个人QQ客服代码
<a href="tencent://message/?uin=QQ号码">在线咨询a>
企业QQ客服代码
<a href="javascript:;" id="wap_qq">在线咨询a> <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq.com/cgi/wpa.php?key=你的key">script> <script type="text/javascript"> BizQQWPA.addCustom({ nameAccount: '企业QQ号码', //企业QQ号码 selector: 'wap_qq' //客服链接所在元素 }); script>
唤起手机QQ代码
<a href="mqqwpa://im/chat?chat_type=wpa&uin=QQ号码">在线咨询a>
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div。这个貌似不是难题,只需要给这个div设置如下的属性即可:
background: rgba(255,255,255,.1);
但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。
rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba(255,255,255,0.1)就是透明度为0.1的白色。在现代浏览器中是支持rgba的。但是在ie8等古董级浏览器中是不支持的rgba的,ie8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)。
所以在ie8中设置半透明就要费点脑子了。从大神那里得知可以使用ie的filter来解决这个问题,css代码如下:
background: rgba(255,255,255,.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
大家注意,这个颜色“#19ffffff”是由两部分组成的。
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;都是白色。
1 <style> 2 i{ border-left: 5px solid transparent; 3 border-right: 5px solid transparent; 4 border-top: 5px solid #2794EF; 5 } 6 style> 7 8 <i>i>