关键词采集 关键词采集工具

Tag: css预览模式: 普通 | 列表

rem详解及使用方法

作者:admin  日期:2019-02-02

好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法

 
首先，先说一个常识，浏览器的默认字体高都是16px。步入正题-----〉
 
兼容性：
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
 
就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
 
使用%单位方便使用
css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。
因为100%=16px，1px=6.25%，所以10px=62.5%，
这是的1rem=10px，所以12px=1.2rem。px与rem的转换通过10就可以得来，很方便了吧！
 使用方法
注意，rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可；
 
例子：
 
CSS代码
  1. /*16px * 312.5% = 50px;*/  
  2. html{font-size: 312.5%;}  
  3. /*50px * 0.5 = 25px;*/  
  4. body{  
  5.     font-size: 0.5rem;  
  6.     font-size\0:25px;  
  7. }  
 
一般情况下，是这样子使用的
 
CSS代码
  1. html{font-size:62.5%;}   
  2. body{font-size:12px;font-size:1.2rem ;}   
  3. p{font-size:14px;font-size:1.4rem;}  
 
优点
用一个东西肯定要知道它的好处啦，由于其他字体大小都是基于html的，所以在移动端做适配的时候，可以使用这样的方法
 
CSS代码
  1. @media only screen and (min-width: 320px){  
  2.   html {  
  3.     font-size: 62.5% !important;  
  4.   }  
  5. }  
  6. @media only screen and (min-width: 640px){  
  7.   html {  
  8.     font-size: 125% !important;  
  9.   }  
  10. }  
  11. @media only screen and (min-width: 750px){  
  12.   html {  
  13.     font-size: 150% !important;  
  14.   }  
  15. }  
  16. @media only screen and (min-width: 1242px){  
  17.   html {  
  18.     font-size: 187.5% !important;  
  19.   }  
  20. }  
 
这样子就能做到仅仅改变html的字体大小，让其他字体具有“响应式”啦。
 
又是午睡时间，如果本文有不正确的地方，请指出^_^

Tags: css

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 411

css背景颜色渐变

作者:admin  日期:2015-05-29

 垂直方向：

CSS代码
  1. filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');  
  2.   
  3. background: -moz-linear-gradient(top, #FF0000, #F9F900);  
  4.   
  5. background: -o-linear-gradient(top,#FF0000, #F9F900);  
  6.   
  7. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));  

水平方向：

CSS代码
  1. filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');  
  2.   
  3. background: -moz-linear-gradient(left, #FF0000, #F9F900);  
  4.   
  5. background: -o-linear-gradient(left,#FF0000, #F9F900);  
  6.   
  7. background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));  

Tags: css

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2124

常用CSS光标样式

作者:admin  日期:2012-09-09

all-scroll :　 IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize :　 IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair :　 简单的十字线光标。
move :　 十字箭头光标。用于标示对象可被移动。
help :　 带有问号标记的箭头。用于标示有帮助信息存在。
no-drop :　 IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed :　 IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer :　 IE6.0 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
PRogress :　 IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize :　 IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text :　 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text :　 IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait :　 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

Tags: css

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2199

Css透明度设置 兼容所有浏览器

作者:admin  日期:2012-04-16

本人IE8、Google chrome、Firefox下测试通过！

CSS代码
  1. .transparent_class {   
  2.       filter:alpha(opacity=50);   
  3.       -moz-opacity:0.5;   
  4.       -khtml-opacity: 0.5;   
  5.       opacity: 0.5;   
  6. }   

 

Tags: css

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2223

CSS Sprites简介

作者:admin  日期:2012-03-22

一、CSS Sprites简介
　　CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。 　　加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

二、CSS Sprites原理
　　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

三、CSS Sprites优缺点
　　利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 　　CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 　　解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 　　更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。 　　诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下： 　　在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不会出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂； 　　CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！ 　　CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。 　　CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

Tags: css

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4439

在国外网站上看到的一段代码～

作者:admin  日期:2010-10-04

涉及到层绝对定位，文字竖排，值得收藏！
<!--twitterBadge by neo22s-->
<style>.twitterBadge{ position:fixed;top:300px;right:0;width:30px;font-size:20px; font-family:Verdana, Geneva, sans-serif;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);background-color:#76AF4C;}
.twitterBadge  a{background-image:url("http://lab.neo22s.com/twitterBadge/twittbird.png");background-repeat:no-repeat;background-position:top right;text-decoration:none;background-color:#76AF4C;color:#EAF6E5;padding:0 35px 5px 10px;}</style>
<!--[if IE]><style>.twitterBadge {top:200px;writing-mode: tb-rl; filter: flipv fliph;}.twitterBadge a {background-image:url("http://lab.neo22s.com/twitterBadge/twittbird-ie.png");background-position:left;padding:7px 0 32px 0}</style><![endif]-->
<div class="twitterBadge">
 <a target="_blank" title="openclassifieds on Twitter" href="http://twitter.com/openclassifieds">Follow&nbsp;me</a>
</div>
<!--end twitterBadge-->
 

Tags: css

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2429

Css实现文字精确描边效果!

作者:admin  日期:2008-11-21

filter: DropShadow(Color=#FFFFFF, OffX=1, OffY=1, Positive=1) DropShadow(Color=#FFFFFF, OffX=1, OffY=-1, Positive=1) DropShadow(Color=#FFFFFF, OffX=-1, OffY=1, Positive=1) DropShadow(Color=#FFFFFF, OffX=-1, OffY=-1, Positive=1);
测试的时候请把网页背景设置为深色：）

Tags: css

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4188

 广告位

↑返回顶部↑