1、去除button点击出现蓝框:outline:none;
2、chrome表单自动填充去掉input黄色背景解决方案:input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}
3,图片满屏居中:外层样式:width:1920px;left:50%;margin-left:-960px;text-align:center;position:relative;font-size:0;(去掉图片的间隙)
图片上的样式:.wrapper img{width:1920px;}
4、去掉热区点击的边框线:οnfοcus="this.blur()"
5、网站色调变灰
<style>
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
</style>
* 有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:
<param name="menu" value="false" />
<param name="wmode" value="opaque" />
6、body { overflow-x: hidden; overflow-y: auto; }去掉横向滚动条
7、清除浮动
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8、bootstrap中模态框禁用空白处点击关闭:
data-backdrop="static";
9,设置input placeholder的字体颜色
input::-webkit-input-placeholder {
color:#999;
}
input:-moz-placeholder {
color:#999;
}
input::-moz-placeholder {
color:#999;
}
input:-ms-input-placeholder {
color:#999;
}
10,清除select的下拉箭头
select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
padding-right: 14px;
}
select::-ms-expand { display: none; }
.selectArrow{
background: url("../img/arrowDown.png") no-repeat scroll 97% center transparent;
}
11.小屏幕时隐藏横向滚动条
html{
overflow-x:hidden;
}
12.meta标签
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 favicon icon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
2、chrome表单自动填充去掉input黄色背景解决方案:input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}
3,图片满屏居中:外层样式:width:1920px;left:50%;margin-left:-960px;text-align:center;position:relative;font-size:0;(去掉图片的间隙)
图片上的样式:.wrapper img{width:1920px;}
4、去掉热区点击的边框线:οnfοcus="this.blur()"
5、网站色调变灰
<style>
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
</style>
* 有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:
<param name="menu" value="false" />
<param name="wmode" value="opaque" />
6、body { overflow-x: hidden; overflow-y: auto; }去掉横向滚动条
7、清除浮动
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8、bootstrap中模态框禁用空白处点击关闭:
data-backdrop="static";
9,设置input placeholder的字体颜色
input::-webkit-input-placeholder {
color:#999;
}
input:-moz-placeholder {
color:#999;
}
input::-moz-placeholder {
color:#999;
}
input:-ms-input-placeholder {
color:#999;
}
10,清除select的下拉箭头
select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
padding-right: 14px;
}
select::-ms-expand { display: none; }
.selectArrow{
background: url("../img/arrowDown.png") no-repeat scroll 97% center transparent;
}
11.小屏幕时隐藏横向滚动条
html{
overflow-x:hidden;
}
12.meta标签
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 favicon icon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">