文档章节

css常用知识点整理

令小力
 令小力
发布于 2016/04/20 19:20
字数 786
阅读 18
收藏 0

整理的一些常用的CSS知识点笔记。

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的字体颜色


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

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%);

© 著作权归作者所有

令小力
粉丝 4
博文 12
码字总数 10879
作品 0
海淀
程序员
私信 提问
6张思维导图,帮你搞定html、css(css画QQ企鹅)

先给大家看一张喜欢的图片,缓解下心情,最近敲敲代码累的时候都会看看这几个小活宝,每次都忍不住伸手去摸一下屏幕,可爱到爆,不由自主的就笑了出来。这个是电影《鼠来宝》系列的海报图。不...

范小饭_
2016/12/30
0
0
web案例-css制作小米官网产品展示

小米官网产品展示 效果知识点: 企业布局思维的巧妙运用, DIV加CSS,css样式拆解与归类,css3过度与阴影,定位与动,常用如何搭配,开发标准。 👇html代码: 👇css代码: 文章分享到最后小...

急速奔跑中的蜗牛
2018/02/08
0
0
CSS知识点整理(1):CSS语法,层叠次序,选择器,其他重要方面。

本文转载于:猿2048网站CSS知识点整理(1):CSS语法,层叠次序,选择器,其他重要方面。 1. css的全称 2. CSS的层叠次序:优先级由低到高 ·浏览器设置 ·外部样式表 或者 内部样式表 —— ...

前端老手
08/30
11
0
HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方
2018/01/04
0
0
web前端基础案例-鼠标悬停图文切换效果

酷鼠标悬停图文切换 效果知识点: html/css布局思维,定位,浮动详解,css3动画详解,css3选择器详解, 通用样式与封装,企业布局思维运用,开发标准。 👇html代码: 👇css代码: 文章分享...

急速奔跑中的蜗牛
2018/02/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
13
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
13
0
【Medium 万赞好文】ViewModel 和 LIveData:模式 + 反模式

原文作者: Jose Alcérreca 原文地址: ViewModels and LiveData: Patterns + AntiPatterns 译者:秉心说 View 和 ViewModel 分配责任 理想情况下,ViewModel 应该对 Android 世界一无所知。...

秉心说
昨天
16
0
重学计算机组成原理(十二) - 异常和中断

1 概览 完好的程序都满足以下特征 自动运行 我们的程序和指令都是一条条顺序执行,不需要通过键盘或者网络给这个程序任何输入 正常运行 没有遇到计算溢出之类的程序错误。 不过,现实的软件世...

JavaEdge
昨天
11
0
程序设计基础(C)第06讲例程

1summing.c /* summing.c -- 根据用户键入的整数求和 */#include <stdio.h>int main(void){ long num; long sum = 0L; /* 把sum 初始化为0 */ int status; p......

树人大学数字媒体吴凡
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部