网站图标添加
html head添加:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
注:位置为绝对位置,根据文件位置决定
鼠标样式自定义
1.基础指针设置为图片
将png文件转换为适合文件进行加载, 在网上找到的比较好用的转换平台:http://cn.faviconico.org/
注意:尺寸为 32*32、48*48、64*64。 ( 推荐 32*32 )
html,
body {
user-select: none; // 强制禁止选取文字(可不写、与本文无关)
cursor: url('../images/icon1.ico'),auto; //位置为绝对位置(图片格式为.ico、.ani、.cur)
}
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
首先尝试加载foo.cur。如果该文件不存在或由于其他原因无效,在尝试 bar.gif,如果也不能用的话, auto 会被使用。
链接到区段与其他浏览器的兼容性
- IE只支持CUR和ANI格式。
- IE不支持x和y坐标的CSS 3语法.光标图像和属性的其余部分将被忽略。
浏览器 | 最低版本 | 格式(例如) | x-y坐标 |
---|---|---|---|
Internet资源管理器 | 6.0 | .cur/.ani | … |
Firefox(Gecko)、Windows和Linux | 1.5 (1.8) | .cur / .png / .gif / .jpg | 1.5 (1.8) |
Firefox(Gecko) | 4.0 (2.0) | .cur / .png / .gif / .jpg /.svg | (壁虎2.0) |
Opera | … | … | … |
Safari(Webkit) | 3.0 (522-523) | .cur/.png / .gif / .jpg | 3.0 (522-523) |
2.内置指针样式
值 | 描述 |
---|---|
url | 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 |
default | 默认光标(通常是一个箭头) |
auto | 默认。浏览器设置的光标。 |
crosshair | 光标呈现为十字线。 |
pointer | 光标呈现为指示链接的指针(一只手) |
move | 此光标指示某对象可被移动。 |
e-resize | 此光标指示矩形框的边缘可被向右(东)移动。 |
ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 |
nw-resize | 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 |
n-resize | 此光标指示矩形框的边缘可被向上(北)移动。 |
se-resize | 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 |
sw-resize | 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 |
s-resize | 此光标指示矩形框的边缘可被向下移动(北/西)。 |
w-resize | 此光标指示矩形框的边缘可被向左移动(西)。 |
text | 此光标指示文本。 |
wait | 此光标指示程序正忙(通常是一只表或沙漏)。 |
help | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |