雪碧图和如何实现浏览器中title的小图标
- 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的小图标的更多相关文章
- HTML中title前面小图标和网站收藏现实的图标
网站上的logo实际上是一个“favicon.ico”图片.实现步骤:第一步:制作favicon.ico,大小为16*16毫米:第二步:将“favicon.ico”放到项目的根路径下. 第三步:在所有 ...
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- 雪碧图(background-position)、overflow、title中的小图标、光标、rgb 和opacity 与rgba
一.background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src url href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...
- CSS中的背景、雪碧图、超链接的伪类样式
一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填 ...
- gulp-css-spriter 将css代码中的切片图片合并成雪碧图
NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'), ...
- 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
随机推荐
- CS61B HW0
The Enhanced For Loop public class EnhancedForBreakDemo { public static void main(String[] args) { S ...
- Batch_Size 详解
Batch_Size(批尺寸)是机器学习中一个重要参数,涉及诸多矛盾,下面逐一展开. 首先,为什么需要有 Batch_Size 这个参数? Batch 的选择,首先决定的是下降的方向.如果数据集比较小 ...
- Visual Studio 开发(一):安装配置Visual Studio Code
一.为何使用Visual Studio Code 在学习音视频开发的时候,使用到了C和C++,在回顾复习C和C++的知识的时候,需要编写一些代码来加强理解. 虽然,有在线的语言编辑工具https:// ...
- Android MediaPlayer SeekTo 在 8.0 版本上优化说明
android使用 mediaPlayer 播放video视频过程中, 当用户退出当前播放,再从后台恢复播放时,需要跳转到之前退出的时间点继续播放.使用的方法基本都是 SeekTo 之前的时间点,但是 ...
- 在Apache上http强制跳转到https
https已经配置完成,也可以正常使用,但输入域名或http加域名时也一样可以打开网站,于是想强制使用https 大概百度了一下方法,感觉与之前设置二级域名绑定二级目录时差不多 首先,修改httpd. ...
- JavaScript 基础排序的实现(一)
作为一个有追求的前端,忙里偷闲(闲得发慌)地复习了一下基础的排序算法,以此文留念. 本篇主要记录O(n²)复杂度的基础算法O(nlogn)的算法将在下次有空(闲得发慌)时更新 在记录时发现Es6语法中 ...
- python 利用matplotlib中imshow()函数绘图
matplotlib 是python最著名的2D绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中.通过简单的绘图语 ...
- js对象按某个字段排序
var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8} ]; function compare(propert ...
- CentOS 7配置MariaDB允许指定IP远程连接数据库
防火墙 CentOS7 之前的防火墙是不一样的,比如你要添加3306端口: ## 全部 iptables -A INPUT -p tcp -m tcp --dport 3306 -j ACCEPT # ...
- 可以落地的DDD到底长什么样?
领域驱动设计的概念 大家都知道软件开发不是一蹴而就的事情,我们不可能在不了解产品(或行业领域)的前提下进行软件开发,在开发前通常需要进行大量的业务知识梳理,然后才能到软件设计的层面,最后才是开发. ...