前端开发CSS经常用到的点

视频网站的前端开发
网站前端开发教程实例
python 网站开发 前端

1、去除button点击出现蓝框:outline:none;去除chrome浏览器下input ,textarea,button的焦点蓝色边框:input,button,select,textarea{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、去掉热区点击的边框线:onfocus=”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的字体颜色

/ reset placeholder font color/
input::-webkit-input-placeholder { / WebKit browsers /
color:#999;
}
input:-moz-placeholder { / Mozilla Firefox 4 to 18 /
color:#999;
}
input::-moz-placeholder { / Mozilla Firefox 19+ /
color:#999;
}
input:-ms-input-placeholder { / Internet Explorer 10+ /
color:#999;
}

10,清除select的下拉箭头

/ clear select default style start /

select {

/很关键:将默认的select选择框样式清除/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/为下拉小箭头留出一点位置,避免被文字覆盖/
padding-right: 14px;
}

/清除ie的默认选择框样式清除,隐藏下拉箭头/
select::-ms-expand { display: none; }
.selectArrow{
background: url(“../img/arrowDown.png”) no-repeat scroll 97% center transparent;
}

/ end /

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">

13.常用移动端meta标签

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>
<meta content=”yes” name=”apple-mobile-web-app-capable”>
<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>
<meta name=”format-detection” content=”telephone=no”>
<meta name=”format-detection” content=”email=no”>

14.喜欢的字体

font-family: Lato, “Microsoft Jhenghei”, “Hiragino Sans GB”, “Microsoft YaHei”, sans-serif;

网站:http://colachan.com/,,,,,,http://www.wuxiaodi.com/

15 background-color

position: relative;
background-color: #0a1855;
background-image: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#0a1855),color-stop(100%,#da0024));
background-image: -webkit-linear-gradient(45deg,#0a1855 0,#da0024 100%);
background-image: -moz-linear-gradient(45deg,#0a1855 0,#da0024 100%);
background-image: -ms-linear-gradient(45deg,#0a1855 0,#da0024 100%);
background-image: -o-linear-gradient(45deg,#0a1855 0,#da0024 100%);
background-image: linear-gradient(45deg,#0030FF 0,#FF5A75 100%);

-webkit-overflow-scrolling : touch;移动端滑动流畅
http://seabye.com/blog/11893.html

-webkit-appearance:none导致无法获取checkbox值
http://blog.csdn.net/jennieji/article/details/8512426

阻止遮罩层弹出后,背景层还能移动(主要需求在移动端)
css代码:
.ovfHiden{overflow: hidden;height: 100%;}

jquery:
$(“.header_right”).click(function(){
$(‘html,body’).addClass(‘ovfHiden’); //使网页不可滚动
$(“.searchbox”).show();
})
$(“.yg-close”).click(function(){
$(‘html,body’).removeClass(‘ovfHiden’); //使网页恢复可滚
$(“.searchbox”).hide();
})
阻止遮罩层弹出后,背景层还能移动(主要需求在移动端)—end

placeholder 更改字体颜色

<style>
.teltxt input::-webkit-input-placeholder {
color:red;
}
.teltxt input:-moz-placeholder {
color:red;
}
.teltxt input::-moz-placeholder{
color: red;
}
.teltxt input:-ms-input-placeholder {
color: red;
}
</style>

背景横向渐变;background: -webkit-gradient(linear,0 0,100% 100%,from(rgb(95, 189, 232)),to(rgb(102, 216, 209)));

/ css Document /
html { font-size: 40px; }

/解决页面因网络问题放大问题/
@media screen (max-width:319px) {
html { font-size: 17px }
}
@media screen and (min-width:320px) and (max-width:335px) {
html { font-size: 18px }
}
@media screen and (min-width:336px) and (max-width:351px) {
html { font-size: 19px }
}
@media screen and (min-width:352px) and (max-width:367px) {
html { font-size: 20px }
}
@media screen and (min-width:368px) and (max-width:383px) {
html { font-size: 21px }
}
@media screen and (min-width:384px) and (max-width:399px) {
html { font-size: 22px }
}
@media screen and (min-width:400px) and (max-width:415px) {
html { font-size: 23px }
}
@media screen and (min-width:416px) and (max-width:431px) {
html { font-size: 24px }
}
@media screen and (min-width:432px) and (max-width:447px) {
html { font-size: 25px }
}
@media screen and (min-width:448px) and (max-width:463px) {
html { font-size: 26px }
}
@media screen and (min-width:464px) and (max-width:479px) {
html { font-size: 27px }
}
@media screen and (min-width:480px) and (max-width:495px) {
html { font-size: 28px }
}
@media screen and (min-width:496px) and (max-width:511px) {
html { font-size: 29px }
}
@media screen and (min-width:512px) and (max-width:527px) {
html { font-size: 30px }
}
@media screen and (min-width:528px) and (max-width:543px) {
html { font-size: 31px }
}
@media screen and (min-width:544px) and (max-width:559px) {
html { font-size: 32px }
}
@media screen and (min-width:560px) and (max-width:575px) {
html { font-size: 33px }
}
@media screen and (min-width:576px) and (max-width:591px) {
html { font-size: 34px }
}
@media screen and (min-width:592px) and (max-width:607px) {
html { font-size: 35px }
}
@media screen and (min-width:608px) and (max-width:623px) {
html { font-size: 36px }
}
@media screen and (min-width:624px) and (max-width:639px) {
html { font-size: 37px }
}
@media screen and (min-width:640px) and (max-width:655px) {
html { font-size: 38px }
}
@media screen and (min-width:656px) and (max-width:700px) {
html { font-size: 39px }
}
@media screen (max-width:750px) {
html { font-size: 40px }
}

Keefe 2017/12/18 星期一 上午 10:56:43
.kd-pane{
overflow:auto;
-webkit-overflow-scrolling: touch;
}
$browser-default-font-size: 75px !default;
@function rem($px) {
@return $px / $browser-default-font-size * 1rem;
}

@function px2($px) {
@return $px/2;
}
body{
font-family: Helvetica;
}
[nav-view-transition=”ios”][nav-view-direction=”forward”],
[nav-view-transition=”ios”][nav-view-direction=”back”] {
background-color: transparent;
}

.ar-l {
float:left;
}
.ar-r {
float:right;
}
.clear {
overflow : hidden;
zoom :1;
clear : both;
_overflow : visible; / for IE /
_zoom : 1; / for IE /
}

未完待续ing

前端开发获取图片的网站
网站前端后台开发协作
前端开发网站标题图片添加
» 本文来自:前端开发者 » 《前端开发CSS经常用到的点》
» 本文链接地址:https://www.rokub.com/7465.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!