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. tcpdump完全指南

    先从第一个最简单的抓包指令开始 抓经过本主机上的所有网络接口的所有ARP.ICMP.IGMP.IP.TCP.UDP等所有网络包(以下简称“所有网络包”) tcpdump -i any -vnn (注: ...

  2. Openvswitch手册(3): sFlow, netFlow

    这一节,我们重点看sFlow 采样流sFlow(Sampled Flow)是一种基于报文采样的网络流量监控技术,主要用于对网络流量进行统计分析. sFlow系统包含一个嵌入在设备中的sFlow Age ...

  3. winform复制文件到指定目录

    执行步骤 弹出选择对话框:var openFileDialog = new OpenFileDialog(); 设置选择内容,如所有图片:openFileDialog.Filter="图像文 ...

  4. Javascript高级编程学习笔记(15)—— 引用类型(4)RegExp类型

    JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = ...

  5. Python学习笔记【第九篇】:Python面向对象基础

    Python语言中一切皆对象(类.属性.方法.........) 概念 面向对象编程:Object Oriented Programming 简称OOP 面向对象程序设计 面向对象和面向过程都是解决问 ...

  6. vim 行跳转和列跳转的方法

    vim提供了丰富的快速跳转任意行.任意列的方法,方便高效地移动光标,定位文件位置. 一.Vim行跳转 使用vim查看文件时,使用以下命令可以快速跳转文件首.尾行,方便对整个文件有个全局把握. 1.1 ...

  7. 神奇的CSS3混合模式

    神奇的css3混合模式 对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果.但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的, ...

  8. Axure安装、破解、汉化全套

    最近公司准备使用敏捷开发流程,然后刚好需要Axure这个软件,就去找了些资源分享给大家,希望对大家有所帮助: 全套安装,破解,汉化下载地址: 链接: https://pan.baidu.com/s/1 ...

  9. [源码]Python简易http服务器(内网渗透大文件传输含下载命令)

    Python简易http服务器源码 import SimpleHTTPServerimport SocketServerimport sysPORT = 80if len(sys.argv) != 2 ...

  10. Ansible系列之roles使用说明

    roles(角色)介绍 ansible自1.2版本开始引入的新特性,用于层次性,结构化地组织playbook.roles能够根据层次型结构自动装载变量文件.tasks以及handlers等.要使用ro ...