浏览 "CSS" 的文章
9月
24
2015

ZZ CSS的单位及css3的calc()及line-height百分比

单位介绍

说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了。然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem、vw和vh、vmin和vmax、ch和ex等等,那现在对这些单位分别做一下详细的介绍吧。 (更多…)

8月
13
2013

ZZ 解决在IE下label中IMG图片无法选中radio的几个方法

今天遇到一个问题,在IE浏览器下,使用label FOR radio后,label中的图片无法选中。例如,这样的代码 <input type=”radio” name=”radio” id=”a” /><label for=”a”><img src=”/Labs/images/logo.gif” /></label> ,这种情况下,点击label的图片将无法选中radio选项。解决这个问题,目前可以有三种方法,分别是通过JS、CSS或者HTML代码3个方面来解 决。

方法一,JS:

 window.onload = function(){
 if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
 {
 var a = document.getElementsByTagName("label");
 for(var i=0,j=a.length;i<j;i++){
 if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
 {
 a[i].childNodes.item(0).forid = a[i].htmlFor;
 a[i].childNodes.item(0).onclick = function(){
 var e = document.getElementById(this.forid);
 switch(e.type){
 case "radio": e.checked|=1;break;
 case "checkbox": e.checked=!e.checked;break;
 case "text": case "password": case "textarea": e.focus(); break;
 } } } } } }

方法二,CSS:

在图片上覆盖一个容器,容器本身透明显示

 <input type="radio" name="radio" id="a" />
 <label for="a"><img src="xxx.jpg" /><span></span></label>

将其中SPAN的属性设定有底色并且透明,SPAN覆盖到IMG上,并保持和图片同样的尺寸。

 display:block;
 width:100px;
 height:100px;
 background:url(xxx.png) no-repeat 0 0;
 position:absolute;
 left:0;
 top:0;

方法三,THML代码控制:

在IMG中加一个属性,disabled 即可。

三种方法都是可行的解决方案,从实用方面,当然是第三种方法最简单,操作和实施起来最快,兼容性也好。问题是,以上仅仅是这种情况下的解决方法,如果从经验方面,三种方法都有自己的优势。

8月
24
2012

ZZ 您还在为XP系统下的微软雅黑烦脑吗?

转自HTML5集中营

由于公司网站的字体是用的「微软雅黑」,使用Windows XP的用户看到的页面字体颜色淡淡的,辨识度不是很好,于是我百度寻找解决方案,在百度得到的答案是”因为Windows XP 默认没有开启Clear Type,所以不支持字体渲染才会造成页面字体不太适合阅读,会觉得淡淡的颜色不够深,看起来不是很友好,辨识度还比宋体差很多。如下图:
难道我们要让用户手动去开启Clear Type,我想这也太不现实了吧!为了解决这个问题,我苦恼了很久,相信这也是很多前端工程师和设计师们一直纠结而痛苦的问题,就这样放弃其实又感觉蛮可惜的,因为「微软雅黑」字型漂亮,浏览网页看比宋体的网页要舒服很多,也会漂亮很多,心情也会愉悦起来。即然前端工程师和设计师都很喜欢微软雅黑,那么我们应该如何解决呢?直到我偶然发现了点点网,浏览完整个博客感触很深,因为他们的前端做得很细腻,细节处理惩罚得很好,于是我拜读一下点点网的代码。 (更多…)

7月
14
2011

ZZ 自适应浏览器窗口的页面背景

最近在做的一个项目中,客户要求网页的背景不管客户浏览器大小多大, 背景都要铺满全屏。在网上找了一下,有人已经研究出来了方法,不用js就可以做到。下面看代码:

CSS代码:

01 html, body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
02 body {/*为页面body添加一些基本信息*/
03     font-family:Arial, Helvetica, sans-serif;
04     font-size:14px;
05     color:#FFFFFF;
06     background:#DDDAD9;
07 }
08 #wrap{position:absolute;width:100%; height:100%;top:0; left:0; overflow:auto;overflowx: hidden; z-index:2;}
09 #background {position:absolute; z-index:-1; width:100%; height:100%;}
10 .container{width:960px;margin:0 auto;}

HTML结构代码:

01 <div id=“wrap”>
02     <div class=“container”>
03         <div id=“header”>
04             这里是header
05         </div>
06         <div id=“content”>
07             这里是Main content
08         </div>
09         <div id=“footer”>
10             这里是footer
11         </div>
12     </div>
13 </div> 
14 <img src=“bg.jpg” id=“background” alt=“” />

解释一下上面的css和html,这个其实就是将html和body的滚动条取消,用div#wrap容器来模拟页面的滚动条。其实并不是用图片做背景的,是将background的图片z-index设置为-1;使它放在wrap页面的底部,这样既覆盖了body的背景色和背景图(如果有),又使内容区域的最上面。

点此查看demo

这样看起来没啥问题了,挺好。

但是,但是客户的要求是千变万化的,客户说:如果我的img的src地址出错了,怎么办,这样把,我再在body里面增加一个bg吧。然后css就变成了这样:

1 body {
2     font-family:Arial, Helvetica, sans-serif;
3     font-size:14px;
4     color:#FFFFFF;
5     background:#DDDAD9 url(images/bg.png) no-repeat center top;
6 }

点此查看#background没有背景的demo

但是,但是客户看了之后说:这个背景图要随着内容变化,也变化,不能让它固定在浏览器窗口上面。于是,再搜索信息,再修改:

在网上找到了一个外国佬写的一个Jquery插件Full Size Background Image jQuery Plugin

他做的一个demo: Full Size Background Image jQuery Plugin DEMO

具体使用方法:
CSS代码:

01 html {height:100%;}
02 body {/*为页面body添加一些基本信息*/
03     font-family:Arial, Helvetica, sans-serif;
04     font-size:14px;
05     height:100%;
06 line-height:1.5;
07     color:#FFFFFF;
08 #background {
09 position: fixed;
10 top: 0;
11 left: 0;
12 overflow: hidden;
13 width: 100%;
14 height: auto;
15 z-index: -1;
16 overflow: hidden;
17 }
18 #wrap{position:absolute;width:100%;height:100%;top:0; left:0; z-index:2;}
19 .container{width:960px;margin:0 auto;}

HTML代码:

01 <div id=“wrap”>
02     <div class=“container”>
03         <div id=“header”>
04             这里是header
05         </div>
06         <div id=“content”>
07             这里是Main content
08         </div>
09         <div id=“footer”>
10             这里是footer
11         </div>
12     </div>
13 </div> 
14 <img src=“bg.jpg” id=“background” alt=“” />

但是他这个插件有一个问题,当页面内容高度超过一个屏幕的高度,在ie6浏览器下会出现问题,背景图片只出现在了当前页面的当前窗口,当拉动页面右边的滚动条的时候,下面就没有背景了。请分别在ie6和其它浏览器里浏览:

点此查看demo

并且当添加的图片背景不存在的时候,ie6浏览器页面底部会出现一大块空白,查看下面没有背景的demo, 请分别在ie6和其它浏览器里浏览:

点此查看demo
于是又对页面css进行修改:

1 html {height:100%;_overflow:hidden;}增加overflow:hidden;
2 #wrap{position:absolute;width:100%;height:100%;top:0;left:0;_overflow:auto;_overflowx:hidden; z-index:2;}

添加了上面的代码之后,解决了上面的问题,当页面内容高度超过一个屏幕的高度的时候,ie6下面不会再出现问题,请看demo:

点此查看demo

但是由于在ie6下面这是用wrap模拟的滚动条,所以在ie6页面下,当#background标签没有图片的时候,body背景图会固定在窗口里不变。请看demo:

点此查看demo

总结:

文章前两个demo没有用js,纯css写的,唯一不足之处就是:当页面#background没有图片的时候,拉动右边滚动条,body的背景是不变的。

文章后面四个demo用了js,不足之处就是:ie6浏览器会出现一些问题,当然如果不考虑ie6的话,就可以这里的4个demo中的任意一个了。

其实这里我们考虑的body的背景问题,如果不考虑body的背景问题的话,我们完全可以用纯css的那个demo。

如果你有什么好的意见和建议,欢迎在下面的评论处与我交流。

转自:冰剑’s blog

7月
13
2011

ZZ 常用CSS缩写语法总结

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。

css缩写的主要规则如下:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

  • #000000可以缩写为#000;
  • #336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

  • property:value1; 表示所有边都是一个值value1;
  • property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  • property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  • property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

  • border-width:1px;
  • border-style:solid;
  • border-color:#000;

可以缩写为一句:border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下:

  • background-color:#f00;
  • background-image:url(background.gif);
  • background-repeat:no-repeat;
  • background-attachment:fixed;
  • background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  • color: transparent
  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%

字体(fonts)

字体的属性如下:

  • font-style:italic;
  • font-variant:small-caps;
  • font-weight:bold;
  • font-size:1em;
  • line-height:140%;
  • font-family:”Lucida Grande”,sans-serif;

可以缩写为一句:font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

  • list-style-type:square;
  • list-style-position:inside;
  • list-style-image:url(image.gif);

可以缩写为一句:list-style:square inside url(image.gif);

转自:随网之舞

5月
20
2008

哀悼死难同胞 网站变灰色的方法

 四川汶川大地震牵动着华夏儿女的心。国务院决定,2008年5月19日至21日为全国哀悼日。5月19日14时28分起,全国人民默哀3分钟,届时汽车、火车、舰船鸣笛,防空警报鸣响。在今天当你看到,有很多网站界面都变成了黑白色,你可能会怀疑是网站的问题,或者显示器的问题。不!这些都是网站在这个特别的日子里,通过这个方式来纪念那些在地震中死去的同胞(样式大家可以点击太平洋电脑网预览)。作为中国IT互联网中的站长,此时此刻应该都很想做点什么,除了为灾区慷慨解囊,还可以通过自己的网站为死难同胞做点事情,来吧!将自己的网站也变成黑白色,来缅怀那些逝者吧!

  下面我们来看看如何将网页变成黑白的。如果你的网站是静态页面,能够支持支持CSS,那就方便很多了。只要是符合W3标准的网页,在CSS文件的最前面加上一行代码就可以了,这段代码使用的是CSS滤镜,将网页中的色彩部分给滤掉了。

  CSS滤镜过滤色彩代码

  html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

  加上代码之后,再次刷新网页就会发现页面已经变成黑白效果。站长赶快行动吧,给自己的网站加上一行代码,变成黑白色,用这种特别的方式来哀悼在地震中难死的同胞吧!

追悼地震中遇难的同胞