随笔分类 -  CSS

级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
android 2.3 webView select控件 无法及时显示optionLabel的BUG
摘要:使用 -webkit-appearance 修改select的外形时,在2.3系统中遇到了问题,每次选择option项时会随机出现其值已更新,但标签显示内容不更新的问题,也许是2.3 webview 视图渲染的bug。解决方法如下:创建一个span元素,并定义指定样式,将select的样式设置为-webkit-appearance:none;position:absolute;top:0;left:0;z-index:99;color:#FFF;border:none;此时select已定位在span上方,下面为重点,将select的opacity设置为0(PS:display:none与op 阅读全文

posted @ 2012-12-12 15:52 jQing 阅读(698) 评论(0) 推荐(0) 编辑

您可能不知道的CSS元素隐藏“失效”以其妙用
摘要:byzhangxinxufromhttp://www.zhangxinxu.com转自:http://www.zhangxinxu.com/wordpress/?p=2191一、CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。后宫选秀——一个一个看。 1 { display: none; /* 不占据空间,无法点击 */ } 2 { visibility: hidden; /* 占据空间,无法点击 */ } 3 { position: absolute; top: -999em; /* 不占据空间,无法 阅读全文

posted @ 2012-12-12 13:36 jQing 阅读(275) 评论(0) 推荐(0) 编辑

:before和::before的区别
摘要:转自:http://wchlt.blog.163.com/blog/static/2196057201111234012201/在一次项目中,有一次要用到::selection伪元素,然后开发同学问我,CSS中一个冒号和两个冒号有神马区别?这好像真的是个问题,或许很多前端同学对此都有疑惑,查了些资料,证实了下两个符号的区别,简而言之:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。W3C关于CSS3选择器的规范中有一段描述:A pseudo-element is made of two colons (::) followed by the name of the pseudo 阅读全文

posted @ 2012-12-10 10:37 jQing 阅读(194) 评论(0) 推荐(0) 编辑

css3 Transition
摘要:在CSS3中,用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形,这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用,就会产生不同的效果,使用顺序不同,产生的效果是不一样的。 目前浏览器支持情况:Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+ 一、旋转: CSS中使用rotate方法来实现对元素的旋转,在参数中加入角度值,旋转方式为顺时针旋转。 例一:一个黄色的div元素,通过在样式代码中使用“transform: rotate(45deg)”,... 阅读全文

posted @ 2012-12-05 10:00 jQing 阅读(307) 评论(0) 推荐(0) 编辑

[转]<select>在chrome浏览器下背景透明问题
摘要:转自:http://blog.csdn.net/teresa502/article/details/7784777在chrome浏览器下遇到了跟ie、ff不一样的透明效果,下面重现一下:在一个大的div(背景红色)内放置一个select元素(背景透明)。在线查看(可在不同浏览器中查看效果)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns=" 阅读全文

posted @ 2012-12-02 16:53 jQing 阅读(235) 评论(0) 推荐(0) 编辑

CSS3 下select下拉列表样式的修改
摘要:都知道页面中如果不给select添加样式的话,就会是系统默认的样式,如下图,很丑吧!而狠多时候我们都希望对select的样式进行修改,以使得它能够更加美观一点,在css2.0下面我们除了设置一些基本的样式之外,是没有办法把select变的更好看的,尤其是那个很丑的下拉箭头我是没有正常的办法把它隐藏掉的。总结了一下,更改select样式有如下几种方法:(1)如果只是为了去掉select的下拉箭头的话,可以用css样式clip:rect(xxxx)来吧select的下拉箭头部分直接截取掉。但是这种方法存在的问题就是,如果设置了select的border的话,截取就会把border也截去,很是不美观 阅读全文

posted @ 2012-12-02 16:50 jQing 阅读(1446) 评论(0) 推荐(0) 编辑

position:absolute与overflow:hidden,解决子元素设置position:absolute后父元素 overflow:hidden无效的问题
摘要:讨论内容来自:http://bbs.blueidea.com/thread-2925174-1-1.html绝对定位的对象不是脱离文档流的么,为什么还是会受其父层的overflow:hidden的影响呢?谁知知晓原理并有完美解决方案?运行下面的代码,因为父容器没有设置position:relative|absolute|fixed ,所以overflow是不能生效的 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD 阅读全文

posted @ 2012-11-14 23:36 jQing 阅读(3899) 评论(0) 推荐(0) 编辑

CSS3 Gradient
摘要:转自:http://hi.baidu.com/94013678/item/6ae9f5aec2faf9a129ce9de9CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3: Gradient─CSS3渐变。CSS3 Gradient分为linear-gradient(线性渐变)和r 阅读全文

posted @ 2012-11-11 17:30 jQing 阅读(245) 评论(0) 推荐(0) 编辑

让IE6区块元素具备display:inline-block属性
摘要:转自:http://www.wufangbo.com/ie-inline-block/1、display:inline-block让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。2、IE中的inline-blockIE6不支持这个属性,但IE8开始支持这个属性。让IE6内联元素具备inline-block特性由于inline-block会触发IE的layout,所以IE6中只要设置{display:inline-block;}即可。让IE6区块元素具备inline-block属性,有两种方法A、可以先触发layout,再设置为inl 阅读全文

posted @ 2012-11-10 13:24 jQing 阅读(157) 评论(0) 推荐(0) 编辑

去掉超级链接的虚线框
摘要:【转载:http://www.enation.cn/html/knowledge/JavaScript/200910/16-155.html】方法一:在链接处加入语法 onfocus="this.blur()"如:文字链接<a href="#" onfocus="this.blur()">这里是链接文字 </a>图片链接<a href="#" onFocus="this.blur()"><img src=XXX.JPG border=0></ 阅读全文

posted @ 2012-10-31 20:15 jQing 阅读(333) 评论(0) 推荐(0) 编辑

CSS解决Chrome浏览器限制使用12px以下字体的问题
摘要:转自:http://www.jizhinet.com/archives/274在谷歌的浏览器Chrome中有一个奇怪的问题,页面上小于12px的字都以12px显示。在其它浏览器中都没有此问题,不知道是谷歌真没发现这个bug,还是谷歌为了考虑到chrome的用户体验,故意把字号限制到最小12px ?我看了那么多网站,应用10px或其它小于12px字号的站还真不多见,大多出现在全英文的网站上,因为10px的字母看着也算清晰,即使清晰,我也觉得没必要搞个10px的字,那么地小,节约页面空间?布局美观?还是为了排版需要?这也太狭义了吧。。。然而,事实上小于12px的汉字看的眼睛胀痛,笔画多点的根本不能 阅读全文

posted @ 2012-07-07 14:09 jQing 阅读(458) 评论(0) 推荐(0) 编辑

CSS自定义滚动条实现(-webkit)
摘要:相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。IE下的滚动条样式IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。这些样式规则很简单:scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/scrollbar-3dlight-color: color; /* 阅读全文

posted @ 2012-06-14 12:03 jQing 阅读(285) 评论(0) 推荐(0) 编辑

导航

点击右上角即可分享
微信分享提示