CSS
cui_angel
whatever is worth doing is worth doing well
展开
-
CSS标准颜色值查找 16进制10进制颜色值表 颜色中英文名称 在线颜色配色对比效
名称背景数值背景颜色名称中文名称十六进制RGB十进制RGB粗细字体配色参考 aliceblue艾利斯兰#f0f8ff240,248,255艾利斯兰[中国搜] antiquewhite古董白#faebd7250,235,215古董白[中国搜]转载 2012-06-20 09:52:41 · 12987 阅读 · 0 评论 -
CSS3 Transitions, Transforms和Animation使用简介与应用展示
一、前言兼目录索引《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似乎有类似的感觉,本来不打算深究CSS3的一些属性的,但是其效果以及实际应用价值之诱惑实在巨大,还是抵挡不住,折腾下了这篇文章。劳民伤财的工程越少越好,所以,这里干脆把CSS3 动画相关的几个属性凑合到一起转载 2012-08-18 16:25:15 · 15679 阅读 · 0 评论 -
在网页中插入一个透明背景的PNG图片
在网页中插入一个透明背景的PNG图片,可是在显示的时候,它的背景就成灰色了。这是IE的bug。需要加入以下代码: function correctPNG() { for(var i=0; i<document.images.length; i++) {转载 2012-09-05 14:42:33 · 14043 阅读 · 0 评论 -
-moz-user-select与onselectstart 禁止选择文字
今天无意中注意到QQ、Hi的密码输入框不能用鼠标选择后一次性删除,只能一个一个的删除,然后,就想js中怎么实现这种效果。 上网一找,还不少,但是我测试了很多, 发现并不完美,还是浏览器在作怪,一种方式似乎只能满足一种浏览器 onselectstart="return false;",能够满足IE下的效果,当只针对某一个区域的时候,就把该段语句放在某一个区域中转载 2012-09-06 18:05:30 · 3336 阅读 · 0 评论 -
Firefox/Opera不支持onselectstart事件
Firefox/Opera不支持onselectstart事件 Text Text var div = document.getElementById('d1'); div.onselectstart = function(){ console.log(3); }转载 2012-09-06 18:06:59 · 1033 阅读 · 0 评论 -
a:focus{outline: none;} 如何去掉点击链接时周围的虚线框outline属性
1. CSS方式 在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true”属性即可,但这个属性是IE私有的,Firefox是不认的。 加了hidefocus属性IE中用CSS处理的方式为:a{noOutline:expression_r(this.onFocus=this.blur());}Firefox的处理方法比较符合转载 2012-10-29 17:12:51 · 11679 阅读 · 0 评论 -
rel="nofollow"对网站的作用
Google联合Yahoo!MSN和主要Blog服务提供商推出一个新的搜索引擎收录服务标准,超链的rel="nofollow"属性。rel这个属性是用来说明链接和包含此链接页面的关系,以及链接打开的目标,它有许多的属性值,比如next、previous、chapter、section等等。我们现在比较长见的是rel="externalnofollow"与rel="nofollow"两种参数的应转载 2012-10-31 10:37:27 · 2652 阅读 · 0 评论 -
height、clientHeight、scrollHeight、offsetHeight区别
我们来实现test中的onclick事件 function justAtest() { var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementById("test3转载 2012-11-08 09:53:40 · 888 阅读 · 0 评论 -
line-height:150%, line-height:1.5的区别
主要区别还是1.5内部继承的是未经过计算的,line-height:150%是经过计算的。因为line-height:继承属性和其他css不一样的地方是根据font-size:px数值进行计算的 我们都知道line-height是可以继承的,由于这个特性,子元素就可以不用重复定义line-height了。但line-height会给人误解的地方也就是这个继承。这是怎么回事呢?别急,我们先转载 2012-11-26 11:19:26 · 1470 阅读 · 0 评论 -
CSS border实现三角形
一、原理CSS盒模型一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。 调整宽度大小可以调节三角形形状。示例1:一般情况下,我们设置盒子的宽高度及上下左右边框,会呈现如下图:CSS语言:高亮代码由发芽网提供1 #tes转载 2012-12-14 15:02:19 · 5732 阅读 · 0 评论 -
圣杯布局
圣杯布局我听就听了很久很久啦,而且每次看到圣杯布局总会离不开一篇文章,那就是a list apart里面的In Search of the Holy Grail。随着现在H5,CSS3的发展,IE6,IE7的逐渐退出舞台,或许现在工程师也没那么纠结了(或许而已,移动的大肆发展,还是出现了更多要兼容的东西,但是现在也逐渐不用再纠结那个IE6了吧,起码做移动端的就可以不用)。这篇文章06发布的,或许将转载 2012-12-17 11:08:39 · 8634 阅读 · 0 评论 -
前端基础知识点
[HTML && CSS]1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 首先我讲讲如何触发两种模式: 加入xml头部声明可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此。 IE6的触发 在XHTM转载 2013-01-16 16:59:13 · 2437 阅读 · 0 评论 -
CSS border实现三角形
一、原理CSS盒模型一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。 调整宽度大小可以调节三角形形状。示例1:一般情况下,我们设置盒子的宽高度及上下左右边框,会呈现如下图:CSS语言:高亮代码由发芽网提供1 #tes转载 2013-01-18 16:07:20 · 1108 阅读 · 1 评论 -
父元素与子元素之间的margin问题(css hack)
hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。html代码: css样式:.box1{height:200px;width:200px;background:gray;}.box2{height:100px;width原创 2013-03-19 11:13:48 · 1668 阅读 · 0 评论 -
CSS3 Transitions, Transforms和Animation使用简介与应用展示
一、前言兼目录索引《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云,禁不住诱惑享乐去了。啊,我现在似乎有类似的感觉,本来不打算深究CSS3的一些属性的,但是其效果以及实际应用价值之诱惑实在巨大,还是抵挡不住,折腾下了这篇文章。劳民伤财的工程越少越好,所以,这里干脆把CSS3 动画相关的几个属性凑合到转载 2012-08-18 16:23:02 · 818 阅读 · 0 评论 -
IE6 PNG透明终极解决方案
文章引自:http://www.cnblogs.com/wanghun/archive/2012/03/29/2423024.html方案1 - 滤镜解决方案:介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意:此方法在部分版本的IETest中无效,建议使用标准的IE6来进行测试!转载 2012-08-16 14:07:41 · 631 阅读 · 0 评论 -
推荐图书
推荐一些适合前端开发工程师阅读的书籍,希望对大家有所帮助:JavaScript类:javascript权威指南javascript基础教程javascript DOM 编程艺术javascript高级程序设计HTML5+CSS3类:HTML5高级程序设计HTML5与CSS3权威指南网站优化:转载 2012-08-16 14:21:36 · 910 阅读 · 0 评论 -
浅析a标签的4个伪类
关于伪类,大家最熟悉的还是a标签的4个伪类::link 有链接属性时:visited 链接地址已被访问过:active 被用户激活(在鼠标点击与释放之间发生的事件):hover 其鼠标悬停关于这四个伪类的排列次序,很多地方都能查到,可是为什么这么排列?从来没有见过有人提及。这里我就从技术、用户体验、优先级几个角度简单的阐述下我们为什么这转载 2012-06-20 10:40:46 · 44149 阅读 · 1 评论 -
使用 XHTML 重构网站的一些规则和概要
XHTML 规则概要1、使用恰当的文档类型声明和命名空间2、使用meta元素声明你的内容类型3、使用小写字母书写所有的元素和属性4、为所有的属性值加引号5、为所有的属性分配值6、关闭所有的标签7、使用空格和斜线关闭空标签8、不要在注释中写双下划线9、确保小于号及和号为Unicode 和其他字符集XML、XHTML、和HTML 4.0 文档的默原创 2012-06-21 17:02:24 · 810 阅读 · 0 评论 -
块状元素和内联元素
在用CSS布局页面的时候,我们会将HTML标签分成两种:块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a就是内联元素)。块状元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p。内联元素内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于原创 2012-06-21 17:26:05 · 4415 阅读 · 1 评论 -
Position属性四个值:static、fixed、absolute和relative的区别和用法
用Div+CSS进行网站布局时,做一些浮动层等特殊效果时要考虑到定位问题。这就要用到Position属性等。Position属性有四个值:static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过转载 2012-06-27 10:15:52 · 14465 阅读 · 2 评论 -
CSS 中长度单位em、px、ex、%
px 像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em 是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。% 相对长度单位。相对于浏览器窗口原创 2012-06-26 10:53:04 · 17050 阅读 · 1 评论 -
CSS中zoom:1的作用 ,小标签大作用
CSS中zoom:1的作用兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题。比如,本站使用DIV做一行两列显示,HTML代码:div class="h_mainbox"> h2>推荐文章h2> ul class="mainlist"> li>a href=转载 2012-07-17 17:19:51 · 746 阅读 · 0 评论 -
CSS的position:fixed的使用
接触CSS已有相当长一段时间,我们竟然没有留意position:fixed的用法。我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed。我平时比较常用absolute和relative,而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持转载 2012-07-24 15:52:33 · 3432 阅读 · 0 评论 -
记住 ,!important与>
margin-top:0px!important;>margin-top:0px!important;margin-top:16px;现在IE6和IE7以及FF对盒模型解释大致是一致的,都是盒实际宽度=盒内容宽度+内补丁值+边框宽度。主要差异还是在一些细节上。比如IE6.0的margin双倍问题,这样的话在写CSS或搭建XHTML结构时候尽量去写兼容性地,可扩展性的代码和结转载 2012-07-24 15:47:54 · 772 阅读 · 0 评论 -
css问题filter: alpha(opacity=100,finishopacity=0,style=2)
alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,style,startX,startY,finishX,finishY).opacity代表透明度数,选值0-100,0是完全透明,100是不透明.finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.style指渐变类型,0是无变化,1是线行渐转载 2012-07-26 12:42:18 · 5850 阅读 · 0 评论 -
CSS相对定位绝对定位
参考文章:http://www.w3school.com.cn/css/css_positioning.aspCSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、转载 2012-08-14 10:51:46 · 2644 阅读 · 0 评论 -
详解div+css相对定位和绝对定位用法
前言 在用DIV+CSS控制排版过程中,定位一直被人认为是一个难点,这主要是表现为很多网友在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来,比如CSS相册等等,因此自己杂乱的网页与高手完美的设计形成鲜明对比,这在一定程度上打击了初学定位的网友,也在他们心目中形成这样的一种思想:当我熟练地玩转DIV+CSS定位时,转载 2012-08-14 11:03:59 · 1297 阅读 · 0 评论 -
CSS样式的优先级别
优先原则一:文本从上到下,后出现的样式优先于前面出现的同一样式例:.def1{background:black;}.def2{background:yellow; }测试1结果:所有浏览器均yellow色,注意:与class=”” 引号内的顺序无关,只看.def1和.def2在声明时的顺序,.def2后声明的所以权重高。优先原则二:id声明(即 # 开头的样转载 2012-07-27 11:32:03 · 1050 阅读 · 0 评论 -
原来我一直理解错了css的position
对position错误的理解每次做层浮动效果时,我都将position设置为absolute, 再通过js来计算left,top来给元素来定位。也许是之前做的页面非常简单,整个页面里面没有嵌套设置position的情况,故一直都认为当position:absolute时,是相对于document.body来偏移的, 其实并不是这样的, 我们先看下position的属性。positi转载 2012-08-15 16:20:25 · 928 阅读 · 0 评论 -
CSS选择器的权重与优先规则
我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。 那么,又怎么来计算选转载 2013-03-26 17:36:05 · 1072 阅读 · 0 评论