SunLe'Blog---孙乐 » css http://www.sunle.net Thu, 29 Jul 2010 02:04:40 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 通过CSS让WordPress图片成比例自动缩小 http://www.sunle.net/css-wordpress-tupian-suoxiao.html http://www.sunle.net/css-wordpress-tupian-suoxiao.html#comments Sat, 08 May 2010 15:23:29 +0000 sunle http://www.sunle.net/?p=1132 不知道大家发现没有，有时候贴入WordPress的图片尺寸过大，结果导致文章发布后图片撑破页面。整个版式变的一团糟。如果我们要贴入WordPress的大尺寸图片很多，一张一张的去调整尺寸会很麻烦，有没有简单实用的办法（如通过CSS定义）让WordPress把图片自动成比例缩小到一定程度呢？通过GG还真找到相关的方法。

经过实验，发现只要在主题的CSS上加上几句代码即可。

  1. max-width:600px;
  2. width: expression(this.width > 600 ? "600px" : true);
  3. height:auto;

这样就可以实现自动按宽高比缩小了。

网上还介绍了一种用jQuery实现的方法，似乎更智能，我觉得可以配合lightbox使用，效果更佳。

方法：

加载jQuery库
将以下代码加入header.php或单独保存为JS并加载

  1. $(document).ready(function(){
  2.     $('div').autoResize({height:750});
  3. });   jQuery.fn.autoResize = function(options)
  4. {
  5.     var opts = {
  6.         'width' : 700,
  7.         'height': 750
  8.     }
  9.     var opt = $.extend(true, {},opts,options || {});
  10.     width = opt.width;
  11.     height = opt.height;
  12.     $('img',this).each(function(){
  13.         var image = new Image();
  14.         image.src = $(this).attr('src');   if(image.width > 0 && image.height > 0 ){
  15.             var image_rate = 1;
  16.             if( (width / image.width) < (height / image.height)){
  17.                 image_rate = width / image.width ;
  18.             }else{
  19.                 image_rate = height / image.height ;
  20.             }
  21.             if ( image_rate <= 1){
  22.                 $(this).width(image.width * image_rate);
  23.                 $(this).height(image.height * image_rate);
  24.             }
  25.         }
  26.     });
  27. }
]]> http://www.sunle.net/css-wordpress-tupian-suoxiao.html/feed 0 css中IE下判断IE版本的语句 http://www.sunle.net/css-judge-ie-version-code.html http://www.sunle.net/css-judge-ie-version-code.html#comments Wed, 17 Jun 2009 08:25:24 +0000 sunle http://www.sunle.net/?p=931 1.

++CoolCode_BLOCK_5++

2.

++CoolCode_BLOCK_6++

3.

++CoolCode_BLOCK_7++

4.

++CoolCode_BLOCK_8++

5.

++CoolCode_BLOCK_9++

6.

++CoolCode_BLOCK_10++

7.

++CoolCode_BLOCK_11++

8.

++CoolCode_BLOCK_12++

9.

++CoolCode_BLOCK...

点击阅读全文

]]> 1.

++CoolCode_BLOCK_23++

2.

++CoolCode_BLOCK_24++

3.

++CoolCode_BLOCK_25++

4.

++CoolCode_BLOCK_26++

5.

++CoolCode_BLOCK_27++

6.

++CoolCode_BLOCK_28++

7.

++CoolCode_BLOCK_29++

8.

++CoolCode_BLOCK_30++

9.

++CoolCode_...

点击阅读全文

]]> http://www.sunle.net/css-judge-ie-version-code.html/feed 0 最新CSS兼容方案 http://www.sunle.net/news-css-kack-20090613.html http://www.sunle.net/news-css-kack-20090613.html#comments Sat, 13 Jun 2009 03:44:46 +0000 sunle http://www.sunle.net/?p=911 HACK1：

  1. #example {
  2. margin:5px!important; /* for Firefox */
  3. margin:10px; /* for IE6 */
  4. margin /**/:11px; /* for IE5 */
  5. }
  6. *+html #example{margin:15px!important; }/* for IE7 */


说明：!important声明可以提升指定样式规则的应用优先权。上面“for Firefox” 有“!important”，“for IE7” 也要加“!important”，否则实际出来后IE7依然使用第一个maring值5px。
HACK2：

  1. #example {margin:5px; }/* for Firefox */
  2. * html #example {margin:10px;} /* for IE6 */
  3. *+html #abc{margin:15px!important;} /* for IE7 */

说明：“for IE7”要加“!important”，“+html”能被ie7与ie5.01所识别，但ie5.01不识别important，所以*+html 再加!important 才只能被ie7识别。
HACK3：

  1. #example {
  2. margin:5px; /* For Firefox */
  3. *margin:10px; /* For IE7 & IE6*/
  4. _margin:15px; /* For IE6*/
  5. }

说明：这样写CSS文件无法通过验证，但是代码可以写的比较少。
HACK4：使用IE专用的条件注释

  1. <link rel="stylesheet" type="text/css" href="css.css" />
  2. <!--[if IE 7]>
  3. <!-- 适合于IE7 -->
  4. <link rel="stylesheet" type="text/css" href="ie7.css" />
  5. <![endif]-->
  6. <!--[if lte IE 6]>
  7. <!-- 适合于IE6及以下 -->
  8. <link rel="stylesheet" type="text/css" href="ie.css" />
  9. <![endif]-->

说明：条件注释的语法：

  1. [*]gt /Greater than/大于/<!--[if gt IE 5.5]>
  2. [*]gte /Greater than or equal to/大于等于/<!--[if gte IE 5.5]>
  3. [*]lt /Less than/小于/<!--[if lt IE 5.5]>
  4. [*]lte /Less than or equal to/小于等于/<!--[if lte IE 5.5]>
  5. [*]! /Note/不等于/<!--[if !IE 5.5]>

HACK5：

  1. example{
  2. margin: 5px;/*FF*/
  3. >margin: 10px;/*IE5*/
  4. }
  5. example/*IE5.5 */{
  6. >/*IE only*/margin: 15px;/*IE6*/
  7. >/*IE only*/margin /*IE5.5*/: 20px;
  8. }

说明：“margin”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”，因为“example/**/{}”这个HACK在FF中可以识别。

]]> http://www.sunle.net/news-css-kack-20090613.html/feed 0 表单栏目提示效果 http://www.sunle.net/form-fieldhints.html http://www.sunle.net/form-fieldhints.html#comments Sun, 21 Dec 2008 14:59:59 +0000 sunle http://www.sunle.net/?p=578 表单栏目提示效果

提示：你可以先修改部分代码再运行。

代码如下：










Tab or click through the fields to reveal the hints.




		
	




		This is the name your mama called you when you were little. 
	



		
	




		This is the name your sergeant called you when you went through bootcamp. 
	



		
	




		The thing with the @ symbol and the dot com at the end. 
	







		Pick a famous year to be born in. 
	



		
	




		Between 4-12 characters. 
	



		
	




		Between 5-13 characters, but not 7.  Never 7.
]]> http://www.sunle.net/form-fieldhints.html/feed 0 firefox,ie7,ie6兼容性问题，和css解决方案 http://www.sunle.net/firefox-ie7-ie6-jianrongjiejuefangfa.html http://www.sunle.net/firefox-ie7-ie6-jianrongjiejuefangfa.html#comments Thu, 18 Dec 2008 14:57:04 +0000 sunle http://www.sunle.net/?p=548 相信很多人听说过Hack，就是在CSS代码里加入一些如* html,+hmtl, /**/，这些代码在IE里能被识别，其它浏览器不能，也有些IE6可以，IE7不能识别，就是通过这样的方法，来写针对不同浏览器的CSS代码。

这里有几篇文章是介绍Hack的，还有收集了目前的一些Hack，可以点过去看看。先别急着点，继续往下看吧。最后我才把链接贴上，因为下面的内容更重要。比你漫无目的找HACK实用。

这里介绍几个经典的区别不同浏览器，CSS hack写法太多了，也很杂，这里我就介绍几款实用的，又容易记的写法：

——————————经典方案一———————————

  1. 注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;  
  2.  
  3. 写两句代码来控制一个属性，区别Firefox与IE6：  
  4. background:orange;*background:blue;  
  5.  
  6. //这一句代码写出来时，你用firefox或其它非IE浏览时，会发现，写了该代码的区域背景是橙色的，如果用IE浏览，却是蓝色的，这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；  
  7.  
  8.  
  9. 写两句代码来控制一个属性，区别IE7与IE6：  
  10. background:green !important;background:blue;  
  11.  
  12. //这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份。  
  13.  
  14.  
  15. 写两句代码来控制一个属性，区别Firefox与IE：  
  16. background:orange; *background:green;  
  17.  
  18. //这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*  
  19.  
  20.  
  21. 写三句代码来控制一个属性，区别Firefox，IE7，IE6：  
  22. background:orange;*background:green !important;*background:blue;  
  23.  
  24. //这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。  
  25.  
  26. 以上HACK用法，可以实现不同浏览器的CSS代码，但是却不能通过CSS代码验证工具的验证！其实通不通过都无所谓，主要是实用，至少我是这样认为。如果你想要写能通过验证的HACK。那么请继续往下看第二种方案。

——————————经典方案二———————————

  1. 下面介绍用* html,* +html的hack写法，此方法可以通过CSS验证，也比较规范。哈哈，HACK本来是不归范的产物，只是我个人认为这种Hack写法是Hack写法中的规范而已，不要拿东西砸我！！！  
  2.  
  3. 我写一个例子  
  4.  
  5. #sample {background:red;}  
  6.  
  7. * html #sample {backgroud:green;}  
  8.  
  9. * +html #sample{backgroud:blue}  
  10.  
  11. 在DW中建立一个sample层，写入以上代码，运行一下看看，你会在Firefox或是Netscape或Opera中看到，sample的背景色是红色的。在IE6中看到背景色是绿色的，而在IE7中却是蓝色的。好玩吧~  
  12.  
  13. 同样，你也可以应用到class和body中去，一样的道理，三个写法:  
  14.  
  15. 第一个是标准写法，针对所有浏览器都有效，但是一样的CSS在不同的浏览器中会变形，这个道理你明白吧，要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器，不识别下面两种写法，所以理所当然的执行了第一种CSS代码，为红色背景。  
  16.  
  17. 第二个是只针对IE6，只有IE6会执行，其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码，IE6本来第一种是能执行的，可是因为第二种能识别，所以过滤了第一种的红色效果，变成了绿色背景。  
  18.  
  19. 第三个只针对IE7，只有IE7才能执行。IE6，firefox都不识别，当然只有IE7自己执行啦，同样的道理，能执行第一种，变成红色，可又被第三种过滤成蓝色背景。

——————————经典方案三———————————

  1. 第一种或是第二种方案，写出来的CSS文件代码长的很，特别是第二种，这样载入CSS时，会很缓慢，对网站设计没有好处。如果你做的是比较大的网站，还是建议你用下面这种方法，就是通过javascript判断浏览器的类型，然后针对不同的浏览器链接不同的CSS文件。  
  2.  
  3. 我们针对不同的浏览器开发出不同的CSS文件，一个针对IE，一个针对Firefox，一个针对其它所有类型的浏览。这样，我们在设计时，就不用去考虑太多，只要我这个CSS能在FF中正常显示，我就不管IE下执行下怎么样了，同样IE中正常的CSS，也不去管它在FF中会是显示如何的乱。  
  4.  
  5. 首先，我们在HTML代码里要放入<link> </link>标签，标签里先写入默认要用到的CSS文件的位置，建议放IE中用到的CSS文件，比如<link href="../css/ie.css" rel="stylesheet" type="text/css">，这样能避免在对方浏览器没有开启javascript的时候，无法判断浏览器类型的时候，也能以90%以上人使用的IE正常显示。  
  6.  
  7. 把下面这段JS放在HEAD中  
  8. <SCRIPT LANGUAGE="JavaScript">  
  9. <!--  
  10. if (window.navigator.userAgent.indexOf("MSIE")>=1)  
  11. {  
  12. //如果浏览器为IE，调用../css/ie.css  
  13. setActiveStyleSheet("ie.css");  
  14. }else{  
  15. if (window.navigator.userAgent.indexOf("Firefox")>=1)  
  16. {  
  17. //如果浏览器为Firefox，调用../css/firefox.css  
  18. setActiveStyleSheet("firefox.css");  
  19. }else{  
  20. //如果浏览器为其他，调用../css/other.css  
  21. setActiveStyleSheet("other.css");  
  22. }  
  23. }  
  24.  
  25. function setActiveStyleSheet(title){  
  26.         document.getElementsByTagName("link")[0].href="../css/"+title;  
  27. //document.getElementsByTagName("link")[0].href="/blog/css/"+title; 这一行中的0是指第一个名为<link>的标签，改为1，则表示第二个名为<link>的标签。href=“”里面就是放置 CSS文件的路径，而title就是CSS文件的文件名  
  28. }  
  29. //-->  
  30. </SCRIPT>  
  31.  
  32. window.navigator.userAgent.indexOf后面是浏览器的类型，如果是Opera的话，还可以加一条if来判断，用javascript 的条件判断去写吧，我这里不多说了。
]]> http://www.sunle.net/firefox-ie7-ie6-jianrongjiejuefangfa.html/feed 0 用css来控制图片显示大小 http://www.sunle.net/css-control-pic-show-size.html http://www.sunle.net/css-control-pic-show-size.html#comments Thu, 18 Dec 2008 12:01:22 +0000 sunle http://www.sunle.net/?p=542 有时候图片太大，会破环网页整齐的布局。这时可以用css来强制按比例压缩图片的高度或宽度

css代码如下：

++CoolCode_BLOCK_59++

这样当图片的高度或宽度若超过590px，将会按比例压缩成590px，如果不超过则按原大小显示。

点击阅读全文

]]> 有时候图片太大，会破环网页整齐的布局。这时可以用css来强制按比例压缩图片的高度或宽度

css代码如下：

++CoolCode_BLOCK_60++

这样当图片的高度或宽度若超过590px，将会按比例压缩成590px，如果不超过则按原大小显示。

点击阅读全文

]]> http://www.sunle.net/css-control-pic-show-size.html/feed 0 DIV 图片居中 http://www.sunle.net/div-pic-cente%e5%b1%85%e4%b8%ad.html http://www.sunle.net/div-pic-cente%e5%b1%85%e4%b8%ad.html#comments Mon, 10 Nov 2008 11:20:17 +0000 sunle http://www.sunle.net/111?p=445 ++RunCode_BLOCK_PrHSAW++

代码：

++CoolCode_BLOCK_61++

点击阅读全文

]]> ++RunCode_BLOCK_vFWqKA++

代码：

++CoolCode_BLOCK_62++

点击阅读全文

]]> http://www.sunle.net/div-pic-cente%e5%b1%85%e4%b8%ad.html/feed 0 菜单点击弹出下拉式 http://www.sunle.net/%e8%8f%9c%e5%8d%95%e7%82%b9%e5%87%bb%e5%bc%b9%e5%87%ba%e4%b8%8b%e6%8b%89%e5%bc%8f.html http://www.sunle.net/%e8%8f%9c%e5%8d%95%e7%82%b9%e5%87%bb%e5%bc%b9%e5%87%ba%e4%b8%8b%e6%8b%89%e5%bc%8f.html#comments Fri, 07 Nov 2008 15:35:34 +0000 sunle http://www.sunle.net/111?p=444 ff

点击阅读全文

]]> ff

点击阅读全文

]]> http://www.sunle.net/%e8%8f%9c%e5%8d%95%e7%82%b9%e5%87%bb%e5%bc%b9%e5%87%ba%e4%b8%8b%e6%8b%89%e5%bc%8f.html/feed 0 CSS三栏布局中最先显示中栏的方法 http://www.sunle.net/css%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80%E4%B8%AD%E6%9C%80%E5%85%88%E6%98%BE%E7%A4%BA%E4%B8%AD%E6%A0%8F%E7%9A%84%E6%96%B9%E6%B3%95.html http://www.sunle.net/css%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80%E4%B8%AD%E6%9C%80%E5%85%88%E6%98%BE%E7%A4%BA%E4%B8%AD%E6%A0%8F%E7%9A%84%E6%96%B9%E6%B3%95.html#comments Mon, 27 Oct 2008 17:17:38 +0000 sunle http://www.sunle.net/111?p=437 中–>右来书写，要么就是到过来从右–>中–>左来书写，要做到要求的效果，那首先要书写的是中栏的代码。所以我首先定义了一个id=m的DIV，并且padding-left:150px，定义这个是为了给左栏留出140PX的显示位置，然后再在这个DIV里面嵌套定义一个id=middle的DIV，我用position:absolute的属性(绝对定位);然后再定义左栏left和右栏right。用position:absolute的属性有一个不好的地方就是它象photoshop里的层一样，它的自动延伸并不会带动整个布局的延伸，所以会遮住一些页面元素，比如我们通常会在网站的最下面写上一些copyright的信息，如果用先显示中栏的这种方法，如果不做处理的话，这些信息会被遮盖住。处理的办法就是使用javascript,让左右2栏的高度随中栏一起自动延伸。以下为引用的内容： <script language="javascript"> var l=document.getElementById("left").scrollHeight var m=document.getElementById("middle").scrollHeight var r=document.getElementById("right").scrollHeight layoutHeight=Math.max(l,m,r) document.getElementById("left").style.height=layoutHeight+"px" document.getElementById("right").style.height=layoutHeight+"px" document.getElementById("middle").style.height=layoutHeight+"px" </script>]]> 浏览器显示页面是一行一行的按顺序执行代码，也就是说写在前面的先执行显示，而对于左中右3栏布局的设计，代码要么是从左–>中–>右来书写，要么就是到过来从右–>中–>左来书写，要做到要求的效果，那首先要书写的是中栏的代码。

所以我首先定义了一个id=m的DIV，并且padding-left:150px，定义这个是为了给左栏留出140PX的显示位置，然后再在这个DIV里面嵌套定义一个id=middle的DIV，我用position:absolute的属性(绝对定位);然后再定义左栏left和右栏right。用position:absolute的属性有一个不好的地方就是它象photoshop里的层一样，它的自动延伸并不会带动整个布局的延伸，所以会遮住一些页面元素，比如我们通常会在网站的最下面写上一些copyright的信息，如果用先显示中栏的这种方法，如果不做处理的话，这些信息会被遮盖住。处理的办法就是使用javascript,让左右2栏的高度随中栏一起自动延伸。

以下为引用的内容：

  1. <script language="javascript">
  2. var l=document.getElementById("left").scrollHeight
  3. var m=document.getElementById("middle").scrollHeight
  4. var r=document.getElementById("right").scrollHeight
  5. layoutHeight=Math.max(l,m,r)
  6. document.getElementById("left").style.height=layoutHeight+"px"
  7. document.getElementById("right").style.height=layoutHeight+"px"
  8. document.getElementById("middle").style.height=layoutHeight+"px"
  9. </script>
]]> http://www.sunle.net/css%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80%E4%B8%AD%E6%9C%80%E5%85%88%E6%98%BE%E7%A4%BA%E4%B8%AD%E6%A0%8F%E7%9A%84%E6%96%B9%E6%B3%95.html/feed 0 IE多版本共存的解决方案——IETester（推荐） http://www.sunle.net/ietester.html http://www.sunle.net/ietester.html#comments Mon, 01 Sep 2008 22:59:21 +0000 sunle http://www.sunle.net/111?p=407 刚刚用过，感觉特别；厉害，比以前网上流行的Multiple IEs 强多啦！以下为官方解释：

ietester-0_3

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.
New in v0.2 : IE7 and IE8 beta 1 added !

This is an alpha release, so feel free to post comments/bugs on the IETester forum or contact me directly.

Minimum requirement : Windows Vista or Windows XP with IE7 (Windows XP with IE6 has some minor problems and IE7/IE8 instances do not work under this config)
最小需求：Windows Vista 或者 Windows XP 安装 IE7 版本( 如果安装的 IE6 版本 ，则Windows XP 下的 IE6 有一些小问题，并且在这个配置下 IE7/IE8 版本不能运行 )

不过任何软件都有不完美之处——

IETester 目前已知的问题有：

当窗口大小改变的时候，页面内容可能会消失（作者改进中）；
上一页/下一页功能不正常；
Focus功能不正常；
Java apple不能运行；
Flash不能在IE6下正常运行。
最新版本：v0.3.3 下载 中文包 (加入Languages 文件夹，默认在 C:\Program Files\Core Services\IETester )

官方网站:http://www.my-debugbar.com/wiki/IETester/HomePage

]]> http://www.sunle.net/ietester.html/feed 0