css

Page 1 of 4

Archives

文件夹

固定盒子长宽比 通过设置高度为0 ; padding-bottom:%可以根据宽度设定盒子的比例 如果不知道上面的理论是什么,可以通过去传送门看看这个属性的详细说明。 % 定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。 显然有兼容性问题~不过触摸端我还没有看到不好用的所以,移动端开发可以尽量用。

html5,placeholder属性里面文字颜色样式 ::-webkit-input-placeholder { color:#999;} :-moz-placeholder { color:#999;} ::-moz-placeholder {color:#999;} :-ms-input-placeholder {color:#999;}

字pc端用click事件来触发就可以了,但是在移动端click是触发不到file的input,要用touch。 如果想pc端和移动端都可以正常使用,可以用FastClick解决兼容问题。 另外在移动端用file是访问手机的相机或者相册(测试了ios,android是可以,wp不行)。

同事推荐的压缩css和js的方法,是运行在nodejs的基础上的,所以你要先安装一个nodejs。 在有nodejs的基础上,进入命令行模式分别运行 npm install clean-css -g npm install uglifyjs -g clean-css是压缩css的,uglifyjs是压缩js的。 然后新建两个批处理文件。 @echo off :: 设置压缩css文件的根目录,脚本会自动按树层次查找和压缩所有的css SET OUTFOLDER= 压缩后的目标目录 echo 正在深度复制文件 xcopy 准备压缩的目录*.* “%OUTFOLDER%” /s /e && echo 复制成功 || echo 复制失败,请检查文件是否存在! echo 复制完成 :: 设置压缩的路径 chdir /d %OUTFOLDER% echo 正在查找CSS 文件 for /r . %%b in (*.css) do ( @echo 正在压缩 %%~b … cleancss […]

转载自:W3CPLUS Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href=”css/reset.css” rel=”stylesheet” type=”text/css” media=”screen” /> <link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”all” /> <link href=”css/print.css” rel=”stylesheet” type=”text/css” media=”print” /> 或者这样的形式: <style type=”text/css” media=”screen”> @import url(“css/style.css”); </style> 不知道大家留意没有,其中两种方式引入CSS样式都有一个共同的属性“media”,而这个“media”就是用来指定特定的媒体类型,在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型,如屏幕(screen)和打印(print)的样式表,当然还有其他的,比如说“TV”,“handheld”等,其中“all”表示的是支持所有媒体介质。有关于更多的Media类型,可以点击这里。 上面简单说了一下HTML4和CSS2的“Media Queries”,而今天的主要是来学习CSS3中的”Media Queries”的更多使用方法和相关知识,下面我们开始进入今天的主题。CSS3中的Media Queries增加了更多的媒体查询,同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件,如果媒体符合相应的条件,那么就会调用对应的 样式表。换句简单的说,“在CSS3中我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个 例子,你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制 作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。 首先来看一个简单的实例: <link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”small.css” /> 上面的media语句表示的是:当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容: 1、screen:这个不用说大家都知道,指的是一种媒体类型; 2、and:被称为关键词,与其相似的还有not,only,稍后会介绍; 3、(max-width:600px):这个就是媒体特性,说得通俗一点就是媒体条件。 前面这个简单的实例引出两个概念性的东西,一个就是媒体类型(Media Type)和 媒体特性(Media Query),首先一起来理解一下这两个概念: 一、媒体类型(Media Type) […]

转载前说明:感谢作者,我终于找到个说法了,之前因为没有相关资料一直是通过改变代码结构来解决该问题的,现在看到这些总结也总算不会无计可施,同样碰到问题的同学有福了。 转载自:http://www.yuzi.me/Share/ie6floatbug.html IE7 的web标准之道IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计。看着FireFox的 市场占有率不停的上升,微软终于推出了IE7。但IE7是否真的能够力挽狂澜,是否真的能够得到用户的信任,是否真的能够得到网页设计者的认可呢? 估 计很多的朋友都是因为这个华丽的“重复文字”一词进来的,其实这纯粹是一个bug作为。这个bug在国际上比较获得认可的名字叫做——“IE6重复文字 bug”。这是一个非常好玩但是有很令人摸不到头脑的bug。如果,你不知道产生原因的话,将会令人非常头痛。这也是我在现实工作中真正遇到过的情况。 测试一下:复制以下代码放IE6下测试 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta name=”author” content=”Yuzi,煜子,网页设计师网站” /> <meta name=”Copyright” content=”Yuzi,煜子” /> <title>IE6重复文字bug</title> </head><body><div style=”width:200px; height:100px; padding-left:70px;”><div style=”float:left;”></div> <!–如果是IE6,你将多看到一个“影”字–> <div style=”float:left; width:200px;”>IE6下DIV容器中双Float元素字符重影</div> </div> </body> 下面是测试页面分别在IE6,IE7,IE8,FireFox(火狐浏览器),Chrome(谷歌浏览器),Oepra以及Safari(苹果浏览器)中显示效果截图 通过截图,你会惊讶的看到在IE6中,多出了一个“影”字。下面来讲讲出现这个“影”字的一些条件(bug重现条件) 一个容器包含2两个具有“float”样式的子容器。 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小3(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”) 在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因) 为何会出现重影 bug虽然的的确确的存在,但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词,谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来,但是现在仍然没有官方的说法。下面列出来的这两种说法,只是现在网上认可度比较高的而已。 说法一: IE6浏览器对<!– –>注释的解释存在bug引起的。“3像素bug”的扩展后遗症。 […]

转载自:http://cll.socss.cn/archives/259 css3的圆角属性,能为开发者提高开发的效率。可惜主流的ie6 7 8并不支持该属性。下面介绍一种让ie也支持圆角的方法。 1.首先要下载一个压缩包,里面有一个微软的脚本文件(11KB),里面是IE利用VML矢量可标记语言作为画笔绘出圆角。 下载地址:http://cll.socss.cn/wp-content/uploads/2011/07/iecss3.zip 使用方法: .main{ border: 2px solid #C0C0C0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position:relative; z-index:2; behavior: url(此处为ie-css3.htc文件的绝对路径); Webkit内核的浏览器支持“-webkit-border-radius:  10px;”属性(10px是圆角半径),可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius:  10px;”属性,也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 10px;”的属性。   需要注意以下几点: 1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为  IE浏览器找该文件是相对当前html文件路径来找的。 2、一定要有定位属性:position:relative; 3、因为在IE浏览器下这些css3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大,如2。 4、如果在IE浏览器下某些模块无法用此渲染,可以试着绝对定位相应的层,即加上“ width: 400px; height:400px;”属性。 ps:因为该方法使用脚本来实现的,实际应用过程中可能会出现很多意想不到的问题,所以在正式商业项目中还是慎用的好。   我的使用经验:这个外部文件实际上就是一套js,会根据你的使用情况往页面上加一些代码来辅助实现你需要的效果。 这些代码主要是一个层,有行内样式,是根据你圆角对象相对屏幕的定位而产生的,那么就出现个问题~ 如果你的对象的父级有position属性,但是又不在页面原点(0,0),就会产生错位问题,这个要注意一下。 当然你也可以自己去修改ie-css3.htc这个文件里面的js来达到你想要的效果。  

之前的几个项目一直纠结一个问题,就是input的type值可不可以通过什么方法直接切换。以保证密码输入框可以做到英文字符和点点之间自行切换,而不是覆盖一个文本层在上面坐事件或者别的什么方法。 好吧我还是上图吧: 之前发现js里面有一个obj.type的属性可以直接改input里面的type值。 结果昨天测试发现不兼容ie9以下的ie浏览器。顿时泪奔。 所以现在的做法 依然是覆盖一个i额层在这个password上面来解决这个问题。 还有一个方法就是给3个跟password有关的input <input class=”input1″ type=”text” value=”文字内容”/> <input class=”input2″ type=”password” value=”密码内容”/> <input class=”input3″ type=”hidden” value=”用来接收密码,提供给程序”/> 然后无非就是全部隐藏,需要显示文字的时候显示input1,input1获得焦点时隐藏掉input1,显示input2并把焦点光标给input2~剩下的逻辑你懂的。  

$(document).ready(function(){ $(“#btn_copy”).click(function(){ $(“#TextArea1”).select(); copyValue(“TextArea1”); }) }) //复制功能 function copyValue(txtid) { if (isIE()) { clipboardData.setData(“Text”, document.getElementById(txtid).value); alert(“您已成功复制了CDKEY!”); } else { prompt(“您的浏览器不支持自动复制,请您手动复制对话框中的内容:”,document.getElementById(txtid).value); } } function isIE(number) { if (typeof (number) != number) { return !!document.all; } }

写页面的时候我最讨厌的两个部分就是各种Form和各种不同的分页。 今天突然想起来以前一个朋友推荐我用FormSite一直没有用在项目上,今天用了一下感觉很好。 兼容方面,现在看ie7以上问题不大~ie6没测。 觉得书写Form是件恶心事的可以看看这个。