1. background-position 雪碧图

我们的html和css中有三个属性可以向服务器发送请求 ser href url

2.overflow

(1) 值hidden 超出就隐藏

(2)值scroll 出现滚动条

visibility:hidden 可见的(消失但是占用位置)

display:none 消失但不占用位置

为什么要使用雪碧图

因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就能请求过来,然后使用 background-position 调位置,从而减少了该页面想服务器请求的次数,间接液化了该页面的性能。

1, 如何实现浏览器title中的小图标

我们需要借鉴 link标签

link 标签的标签属性有哪些?rel type href

rel 是当前页面和url之间的关系 rel=stylesheet

type 是资源文件的mime 类型 html文件 mime 是text/html图片的mime类型。

lmage/jpg (png gif) css的mime 类型是text/css/js 的mime 类型是text/javascript。

mine 类型 客户端和服务器之间的暗号,根据拓展名而定

title中的小图标就出来了。href这里不能写成 ./

2.meta 元信息标签

分析里面的属性

3.矢量图标 http://www.iconfont.cn/

阿里云矢量图库

5. textarea{

resize:none;

}

这个属性不让文本域被人为拉伸

6.table {

border-collapse:collapse;

}

这个属性让表格边框变细

7.清除浮动的兼容性

清除浮动在低版本浏览器不行。需要处理兼容性

加一个.clearfix:after{zoom:1}

8. 光标的形状

cursor 光标属性有pointer 抓手 指针 wait help

10. reb 和rgba 和opacity

rgb 颜色的表示方法值是0-255 如 background:rgb (12,15,16)

opacity 表示透明度 值是0-1

rgba r是red 0-255 g是green 值是0-255 b是blue 值是0-255 啊是opacity 值是0-1但是ie低版本不支持

geb和rgba的区别?

前者的内容也跟着透明,后者的内容不跟着透明。包含文字和文字。

雪碧图和如何实现浏览器中title的小图标的更多相关文章

  1. HTML中title前面小图标和网站收藏现实的图标

    网站上的logo实际上是一个“favicon.ico”图片.实现步骤:第一步:制作favicon.ico,大小为16*16毫米:第二步:将“favicon.ico”放到项目的根路径下. 第三步:在所有 ...

  2. 使用雪碧图Css Sprite精灵 | 加速网页响应速度

    什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...

  3. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  6. 雪碧图(background-position)、overflow、title中的小图标、光标、rgb 和opacity 与rgba

    一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...

  7. CSS中的背景、雪碧图、超链接的伪类样式

    一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填 ...

  8. gulp-css-spriter 将css代码中的切片图片合并成雪碧图

    NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     ...

  9. 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案

    花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...

随机推荐

  1. .Net程序员 初学Ubuntu ,配置Nignix

    1.安装VM虚拟机 2.升级VI编辑器 3.安装Nginx 4.测试localhost 5.编辑配置文件 仅仅用了记录一个过程,不会太详细 1.安装虚拟机,网上一大片,不是特别难 2.为什么要升级VI ...

  2. Stateful Future Transformation

    As an async programming pattern, Future has been popular with many of our programmers across a wide ...

  3. Python学习笔记【第二篇】:运算符、比较、关系运算符

    运算符 python支持以下几种运算符 算术运算符 运算符 描述 实例 + 加 两个对象相加 a + b 输出结果 30 - 减 得到负数或是一个数减去另一个数 a - b 输出结果 -10 * 乘 ...

  4. java中的全局变量如何实现?ThreadLocal~

    全局变量就是不管你在哪里,都能够直接引用的变量,还不用担心各种问题.每个语言都有自己的全局变量,我想! 一般地,面向过程的语言当中,可能就是一个声明在最前面的变量,后面的代码直接引用,就成了全局变量! ...

  5. js-完整轮播图

     js-完整轮播图 今天写一个完整的轮播图,首先它需要实现三个功能:1.鼠标放在小圆点上实现轮播.2.点击焦点按钮实现轮播.3.无缝自动轮播. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布 ...

  6. idea 过段时间java程序包不存在问题 ?

    有时候我们在导入程序之后,系统会给出错误提示:Java:程序包xxxx不存在,现在我这里有一招,就是使用IDEA自动导入Java程序包,这也是IDEA的一大优点. 但是在看到这个问题的文章的时候,并不 ...

  7. CSS Modules 与 scoped 的不一样

    What ? css 的作用域表现. Css modules 是一个CSS文件,其中所有类名和动画名称默认为局部作用域. 使用JS编译原生的CSS文件,使其具备模块化的能力,该文件需要import使用 ...

  8. CAS单点登陆/oAuth2授权登陆

    单点登陆 CAS是一个单点登录框架,即Central Authentication Service(中心认证服务) ,开始是由耶鲁大学的一个组织开发,后来归到apereo去管,github地址:htt ...

  9. .Net 并发写入文件的多种方式

    1.简介 本文主要演示日常开发中利用多线程写入文件存在的问题,以及解决方案,本文使用最常用的日志案例! 2.使用File.AppendAllText写入日志 这是种常规的做法,通过File定位到日志文 ...

  10. Linux编程 21 shell编程(环境变量,用户变量,命令替换)

    一.概述 这篇介绍shell的变量使用,跟其实语言一样,都有声明变量,使用变量,在shell中变量允许你临时地将信息存储中shell脚本中,以便和脚本的其他命令一起使用. 1.1 环境变量 在前面章节 ...