June 13 2007

CSS hack方法速查

Filed under: xhtml/css - ferry @ 21:27 pm

屏蔽IE浏览器(也就是IE下不显示)

*:lang(zh) select {font:12px  !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7与IE5.0可以识别
*+html  select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
仅IE7可以识别
*+html  select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别
* html  select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {…}
这句与上一句的作用相同。
仅IE6不识别,屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
仅IE6与IE5不识别,屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 仅IE5不识别,屏蔽IE5 select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。
盒模型解决方法
selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。 只有Opera识别 @media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:"\";/*" "*/}} @import ‘ie5win.css’; /*";}
}/* */
IE5/MAC的过滤器,一般用不着
/*\*//*/
    @import "ie5mac.css";
/**/

From:http://andymao.com/andy/post/76.html

June 5 2007

记录一个滑动门+选项卡

Filed under: xhtml/css - ferry @ 21:05 pm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>滑动门</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
/*为什么要这样定义样式,而不用#cardBar ul 这样定义,我个人的猜测是因为类是就近原则获取样式,而#cardBar ul则不是就近原则,按标签来定义,因此.Selected样式就无法出现。*/
*{
 margin:0px;
 padding:0px;
 text-decoration:none;
}
/*定义基本样式*/
ul.cardUl{
 font-size:12px;
 list-style-type:none;
 text-align:center;
 height:29px;
 background-image:url(attachments/month_0706/2200764172315.gif);
}
/*默认样式下使用css文件*/
ul.cardUl li{
 height:29px;
 background:url(attachments/month_0706/u200764172418.gif) left top no-repeat;
 float:left;
 margin-right:1px;
 padding-left:6px; /*为滑动门另一边提供空间*/
}
ul.cardUl li a{
 float:left;
 height:29px;
 background:url(attachments/month_0706/y200764172443.gif) right top no-repeat;
 display:block;
 padding:8px 8px 3px 4px;/*让文字能够够居中*/
 color:#333;
 white-space: nowrap;
}
/*文字点击使用CSS*/
ul.cardUl li.Selected{
 background:url(attachments/month_0706/g20076417255.gif) left top no-repeat;
}
ul.cardUl li.Selected a{
 background:url(attachments/month_0706/z200764172528.gif) right top no-repeat;
}
/*对点击下栏显示边框的代码进行美化*/
div.hackBox{
 padding:2px 2px;
 border-left:2px solid #6697CD;
 border-right:2px solid #6697CD;
 border-bottom:2px solid #6697CD;
 display:none;
}
</style>
<script>
//为选项卡的默认值进行设定,方法为读取cardBar里面的li标签是否已经有selected属性,如果没有则使用默认值。
function loadTab(){
 //读取cardBar下面所有li标签
 var getId=document.getElementById("cardBar").getElementsByTagName("li");
 //定义一个判断是否有selected的变量
 var selectedItems=0;
 //判断方法,循环读出li标签的className,如果有则selectedItems加1
 for(i=0;i<getId.length;i++){
  if (getId[i].className == "Selected"){
   selectedItems+=1;
  }
 }
 //经过循环,如果selectedItems没有数值,那么说明没有selected的标签,因此给标签加上默认的className
 if (selectedItems==0){
  document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
  document.getElementById("Dcard1").style.display="block";
 }
}
//让窗口打开就运行他
window.onload=loadTab;
//设定结束
//进行选项卡效果的触发
function switchTab(cardBar,cardId){
    //读取cardBar下面所有li标签
 var oItems = document.getElementById(cardBar).getElementsByTagName("li");  
 //循环清空li标签下面的selected效果
 for (i=0;i<oItems.length;i++ ){
  var x=oItems[i];
  x.className="";
  var y=x.getElementsByTagName("a");
  y[0].style.color="#333";
 }
 //开始选项卡效果的赋值,为选中的li标签增加selected类的属性
 document.getElementById(cardId).className="Selected";
 //读出cardContent 下面的所有div标签
 var dvs=document.getElementById("cardContent").getElementsByTagName("div");
 //循环,判断应该显示的div
 for (i=0;i<dvs.length;i++ ){
  if (dvs[i].id==("D"+cardId)){
   dvs[i].style.display="block";
  }else{
   dvs[i].style.display="none";
  }
 }
}
</script>
<BODY>
<div id="aa">
 <ul class="cardUl"  id="cardBar">
  <li id="card1"><a href="#"  onclick="javascript:switchTab(’cardBar’,'card1′);">第一选项</a></li>
  <li id="card2"><a href="#"  onclick="javascript:switchTab(’cardBar’,'card2′);">第二选项</a></li>
  <li id="card3"><a href="#"  onclick="javascript:switchTab(’cardBar’,'card3′);">第三选项</a></li>
  <li id="card4"><a href="#"  onclick="javascript:switchTab(’cardBar’,'card4′);">第四选项</a></li>
 </ul>
 <div id="cardContent">
  <div id="Dcard1" class="hackBox">代码一</div>
  <div id="Dcard2" class="hackBox"">代码二</div>
  <div id="Dcard3" class="hackBox">代码三</div>
  <div id="Dcard4" class="hackBox">代码四</div>
 </div>
</div>
</BODY>
</HTML>

From:http://www.lming.cn/article.asp?id=120

June 1 2007

学习Table 中thead tbody tfoot 的使用

Filed under: xhtml/css - ferry @ 20:14 pm

考虑了好久,没想到比较满意的实现办法,发到BI上看看高人们有没有更好的方法,果然不虚此行,很快就看到了Purecss的制作方法,原来还有这样的一个Table可以用,学习一下.

Title of the table
content content content content
content content content content
content content content content

<table>
 <caption>Title of the table</caption>
 <thead>
  <tr>
   <td>content</td>
   <td>content</td>
   <td>content</td>
   <td>content</td>
  </tr>
 <thead>
 <tbody>
  <tr>
   <td>content</td>
   <td>content</td>
   <td>content</td>
   <td>content</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>content</td>
   <td>content</td>
   <td>content</td>
   <td>content</td>
  </tr>
 </tfoot>
</table>

当<thead>中<td>换为<th>时第一行字体将加粗,即为表格内容每列的标题;
当<thead>,<tbody>,<tfoot>中第一个<td>换为<th>时第一行字体将加粗,即为表格内容每行的标题;
根据需要,分别定义CSS就可以实现多种效果了。emoticon

May 20 2007

用css样式表实现首字大写

Filed under: xhtml/css - ferry @ 18:26 pm

css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果。最近越来越多的blogger开始在自己的blog中运用这一方法,东西很简单,下面就来给大家介绍一下用:first-letter伪类来实现这种效果的方法:
:first-letter版本:CSS2 兼容性:IE5.5+

语法:Selector : first-letter { sRules }

说明:设置对象内的第一个字符的样式。
此伪对象仅作用于块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。

在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下沉效果。
示例:p a:first-letter { color: green }
div:first-letter { color:red;font-size:16px;float:left; }

应用于:IE5.5+ ADDRESS BLOCK QUOTE BODY CENTER DD DIV DL DT FIELDSET FORM Hn LEGEND LI LISTING MARQUEE MENU P PLAINTEXT PRE XMP

目前IE和FF都支持此属性,所以大家不必顾虑兼容性的问题,当然要记得设置float属性哦,不然就不会出现那种大字紧贴几行的效果了。

范例(未设置float属性):
<style>
p{line-height:25px;}
p:first-letter{font-size:50px;line-height:50px;}
</style>
<p>欢迎大家来到<a href="http://homepage.yesky.com"><a href="http://homepage.yesky.com/" class="bluekey" target="_blank">网页</a>陶吧</a></p>
范例(设置float属性为left):
<style>
p{line-height:25px;}
p:first-letter{font-size:50px;line-height:50px;float:left;}
</style>
<p>欢迎大家来到<a href="http://homepage.yesky.com">网页陶吧</a></p>
ths

网页一屏有多大?

Filed under: xhtml/css - ferry @ 18:12 pm

From:http://dancewithnet.com

网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基本的表现是浏览器不出现横向滚动条,这几乎是目前的设计准则。那么这里的一屏到底是多大呢?

普通用户通常浏览网页时,其浏览网页的有效面积会受到下面几个方面的影响:

  1. 显示器的分辨率
    这个由科技发展和用户购买力及喜好决定,其数据取决于统计。
  2. 操作系统
    毫无疑问目前是Windows的天下,其中WindowsXP占绝大多数。
  3. 网页浏览器
    IE依旧份额最高,但是Firefox、Opera和Safari等也有一定市场。
  4. 个人定制
    主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式,但是总体上这部分应该属于高级用户,绝大部分用户依旧会使用操作系统和浏览器的默认样式。

下面是关于浏览器和屏幕分辨率的统计数据:
W3Counter于2006.11.12发布的全球统计数据
        W3Counter于2006.11.12发布的全球统计数据
国内某知名站点2006年10月份的数据
        国内某知名站点2006年10月份的数据

由上面的数据可以得出:

  1. 基本上用户分辨率都在800×600以上,绝大部分都在1024×768以上,从全球情况来看,800×600的分辨率会越来越少。
  2. 国内浏览器依旧是IE6的天下,这将会持续较长的时间。从全球市场来看,国内的Firefox2.0和IE7会逐步增长,特别当IE7的中文版推出和Windows自动更新的推广开始以及随Vista上市,IE7增长会更快。

所以计算一屏大小应基于以下原则:

  1. 一屏指绝大部分用户的浏览器显示网页的有效可视区域。
  2. 一屏的计算环境是Windows XP和浏览器均处于默认样式。
  3. 由于IE无论是否超过一屏都存在纵向滚动条的位置,Firefox和Opera是在页面超过一屏的时候出现纵向滚动条,且浏览绝大部分网页都有纵向滚动条的存在,所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。
  4. 由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏,而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页,所以一屏大小在Firefox中指多窗口的控制栏存在时。

下面是基于上面的原则得到常用浏览器和分辨率下的的数据结果:

 有效可视区域(单位:px)屏幕一二三
800 600 1024 768 1280 1024
IE6.0 779(+21) 432(+168) 1003(+21) 600(+168) 1259(+21) 856(+168)
IE7.0 779(+21) 452(+148) 1003(+21) 620(+148) 1259(+21) 876(+148)
Firefox2.0 783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183)
Opera9.0 781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139)

关于上面数据的解释和一些其他事实:

  1. 在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445,Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似,所以相同分辨率下应该比Windows XP默认的样式要大。
  2. 知道浏览器型号和屏幕的分辨率能够很容易的推算出可视区域面积,比如1024×768下IE7.0的可视面积是(1024-21)×(1024-148)

综合上面所有的数据,结论如下:

  1. 最保守而最有兼容性的一屏大小是:779×432
  2. 最广泛的一屏大小是:1003×600
  3. 适合目前国内的情况,一屏大小是779×600

April 30 2007

图片自动加圆角的两种方法

Filed under: xhtml/css - ferry @ 19:29 pm

准备:4个圆角GIF/PNG透明图
第一种方法:图片做背景

* { background:red; } .pic { background:url("http://www.douban.com/mpic/s1818356.jpg"); width:660px; height:300px; } .tl { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/a78762d0aea88b8ca1ec9c2b.jpg") no-repeat top left; } .tr { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/4eb363273a7bed00908f9d2b.jpg") no-repeat top right; width:660px; height:300px; } .bl { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/item/ 6d4c8a13348c78d3f6039e2b.jpg") no-repeat bottom left; } .br { background:url(http://hiphotos.baidu.com/ferryboat401/abpic/ item/702f8c545445ea1c3b29352b.jpg) no-repeat bottom right; width:660px; height:300px; }

第二种方法:图片被插入
* { background:red; } .tl { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/a78762d0aea88b8ca1ec9c2b.jpg") no-repeat; width:10px; height:10px; position:absolute; top:15px; left:10px; } .tr { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/4eb363273a7bed00908f9d2b.jpg") no-repeat; width:10px; height:10px; position:absolute; top:15px; left:206px; } .bl { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/6d4c8a13348c78d3f6039e2b.gif") no-repeat; width:10px; height:10px; position:absolute; top:38px; left:10px; } .br { background:url("http://hiphotos.baidu.com/ferryboat401/abpic/ item/702f8c545445ea1c3b29352b.jpg") no-repeat; width:10px; height:10px; position:absolute; top:38px; left:206px; }
over

Get free blog up and running in minutes with Blogsome
Theme designed by Ferry Chu
Website Hit Tracking
Copyright © 2007 Chuyujiang