title中小图标的实现及光标,兼容性

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

我们需要借鉴link标签

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

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

Type 是资源文件的mime类型  .html文件mime类型是text/html 图片的mime类型

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

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

2.转义字符

空格的字符  

3.

textarea{

resize: none;

}

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

4.

table{

border-collapse: collapse;

}

这个属性让表格的边框变细

5.

Font的简写

body{

  font:12px/15%  Arial,verdana,“\5b8b\4f53”;

  }

6.

清除浮动的兼容性

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

加一个.clearfix{*zoom:1;}

7.

光标的形状

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

8.     rgb 和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 a是opacity值是0-1;

但是ie低版本不支持。

9.

Rgb和opacity  与rgba的区别?

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

原文地址:https://www.cnblogs.com/Shinigami/p/9720456.html

时间: 2024-10-27 12:34:32

title中小图标的实现及光标,兼容性的相关文章

css sprite 调整大张图片中小图标的大小

直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px; width: 190px; height: 154px; } 现在取正常图标大小的一半: <pre name="code" class="html">

HTML中title前面小图标的实现

做一个比较正规的网站,需要在标题栏前面加上相应的小图标,会好看的多.效果大致如下: 其实实现起来很简单,只要在html文件中的<head></head>标签中加上: <link rel="icon" href="picture.ico" type="image/x-icon"/> 注意:href=“”中的图标格式是.ico,路径不管相对路径还是绝对路径,一定写对就好. OK,就这么简单. 原文地址:https:

Android PagerSlidingTitleIconTabStrip 可以在title旁边加小图标的PagerSlidingTabStrip

public class MainFragmentPagerAdapter extends FragmentPagerAdapter implements TitleIconTabProvider{ private final int[] TITLES = {R.string.text1_label,R.string.text2_label,R.string.text3_label}; private final String[] fragments = { Fragment1.class.ge

《转》PNG格式小图标的CSS任意颜色赋色技术

转自张鑫旭的PNG格式小图标的CSS任意颜色赋色技术 一.眼见为实 CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo 上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的: 下面,我们随意选择一个颜色,例如紫色,然后: 是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了. SVG, icon fonts等技术似乎也不是那么耀眼了. 二.原理其实很简单 原理其实很简单,使用了CSS3滤镜filter中的drop-shadow,

【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容

第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复,位置:以及文字相关的padding,无序列图标,行高等*/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

样式小图标的三种处理方式

搜狗:tubiao/icon 小图标的处理方法有三种: 一,最直接就是切图放在文件中进行读取 缺点: 1,多次HTTP请求,影响性能 2,不方便修改和维护.(每次修改都要重新修改美工修改图片大小,颜色等等) 二,使用base64,把图片转换为base64代码 本质:把小图标通过Base64转换成 Base64格式的图片 或者是 二进制编码 1,打开网址:https://www.sojson.com/image2base64.html 2,点击选择文件---选择需要转换的图片---确定---等待转

让文本框前端出现一个小图标的CSS代码

<title>让文本框前端出现一个小图标的CSS代码</title><style type="text/css">.searchBox{ background-image:url('/jscss/demoimg/200906/glass.gif'); background-repeat:no-repeat; padding-left:20px;}form{ display:inline;}</style><input type=&q

jquery字数限制超出显示...,原有内容在title中显示

为标签添加class = sliceFont:添加data-num属性为要显示的字数,截取后会在title中显示原有字符串: $('.sliceFont').each(function(index, el) { var num = $(this).attr('data-num'); var text = $(this).text(); var len = text.length; $(this).attr('title',$(this).text()); if(len > num){ $(thi

CSS从大图片上截取小图标的操作_CSS精灵

1.编程思想在于:          使用background-position属性(设置背景图像的起始位置).这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始. 2.CSS基础介绍: 1.如何定位背景图像: body { background-image:url('bgimage.gif'); background-repeat:no-repeat; background-attachment:fixed; background-p