2008-09-23 下午 - html/css/xml/xsl - CSS
首先声明,直接在页面里设置链接的时不会出现下划线对不齐的效果。只有当该元素或该元素的父元素带有vertical-middle属性时才会出现。
这两者的解决方法不同:
1.其本身具有vertical-middle属性时,直接在该元素上加zoom:1。这里值得说一句,w3c是不推崇使用zoom(触发块元素的layout),意思就是不能通过w3c的验证。
2.其父元素具有vertical-middle属性时,在该元素上加vertical-middle:baseline后就可以解决。
No Comments »
2008-09-16 下午 - html/css/xml/xsl - Browser - 兼容
Chrome,对于做前端开发的伙计们来说应该不陌生。前阵子谷歌推出的浏览器。本人在推出当天就下载试用了,但不到10分钟就又卸载了。没什原因,用惯遨游,够了!等全球很多用户都使用Chrome的时候,我再用它也不迟。到了那时不用都不行了,被“逼”的,就好像火狐“逼”着很多人一样。其实不能这样说,毕竟那么多的用户在使用它,说明它还是好的,就安全性而言,应该算高级别了!
回到正题,又扯远了!Chrome对于CSS,可以说跟SAFARI不相上下。对于CSS所有的高级属性它都能很好的支持!这点很让人惊喜哦~~!
更详细,请看: http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/
No Comments »
2008-07-8 下午 - html/css/xml/xsl -
hatom是microformats的“成员”之一。如果你想让自己在技术方面变得时髦,那么你应该了解它。我本人并非赶时髦之人,但也不想太过落后,毕竟要混饭吃嘛。
步入正题吧!hatom,现在还不是一个开放的标准,仅草案而已。但在不久的将来是会得到肯定的。它的作用就是,能单独的订阅每个网页(这是最简单通俗的说话了,也是我个人的肤浅理解)。
如果你想更进一步的了解它,那么你可以去google的博客,heluyaosj13.blogspot.com。这个页面的最下方的订阅,是仅订阅该篇文章的评论。
现在有一定的了解了吧!
No Comments »
2008-07-4 下午 - html/css/xml/xsl - fixed - position - 兼容
原理:出去网页以及
原有的滚动条,用一个[div]模拟它。然后将要固定定位的区块置于这个模拟层之外,即可实现需要的效果。因为这时滚动条拖动的只是模拟的那个层,而固定定位的这个层根本就不在这个区块内,所以就不会跟随滚动条而动。
利用CSS控制行的属性:
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type="text/css">
- html,body { margin:0; padding:0; overflow:hidden;height:100%; width:100%; text-align:left;}
- .body { position:relative; width:100%; height:100%; overflow-y:scroll; overflow-x:auto; cursor:default;}
- .box { position:absolute; z-index:999; margin:0 auto; bottom:10px; left:40px; width:800px; height:40px; border:1px solid #369; background:#f7f7f7; line-height:40px;}
- </style>
- <div class="box">我是不会被你拖着走的!</div>
- <div class="body">
- <p style="margin:15px;">看屏幕底端的区块,再拖动浏览器的滚动条,结果怎么样?满意吧,惊喜吧!</p>
- <div style="height:1000px;"></div>
- </div>
如果不明白,就自己再多想想吧!
还有种方法就是利用js来实现了。在此也顺便贴出来吧!
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- .floatBar { width:100%; position:fixed; bottom:0!important;height:31px; background:#f7f7f7; border:1px solid #369;}
- .floatBar {
- _position:absolute;
- _top:expression(eval(document.compatMode &&
- document.compatMode=='CSS1Compat') ?
- documentElement.scrollTop
- +(documentElement.clientHeight-this.clientHeight) - 100
- : document.body.scrollTop
- +(document.body.clientHeight-this.clientHeight) - 100);
- }
-
- <div style="height:800px;">下面的层是不随滚动条而动的。</div>
- <div class="floatBar">
- 这个是利用js实现的固定定位。
- </div>
两个方法都不错哦!值得推荐的!
1 Comment »
2008-06-3 下午 - html/css/xml/xsl - CSS
其实也没什么,主要还是利用hack修复IE6以及更低版本的不支持。
这个例子需要固定容器的高度(已知外框高度),但中间内容可以任意高度。这里以图片来做内容。以下是方法一:
看代码:
- <div class=”div”>
- <p><img src=”zxz.jpg”></p>
- </div>
- .div { display:table-cell; vertical-align:middle; border:1px solid #000; width:100px; height:200px; _position:relative;}
- .div p { _position:absolute; _top:50%; width:100%; text-align:center;}
- .div p img { _position:relative; _top:-50%;}
能兼容FF,IE6,Opera,还是非常不错的,其实要实现此效果,方法有多种。下面再说一种更科学的方法:
方法二:
- <div class=”box”>
- <img src=”img src=”zxz.jpg” />
- </div>
- .box { display: table-cell; ertical-align:middle; text-align:center; width:100px; *display: block; *font-size: 175px;/*约为高度的0.873,00*0.873 约为175*/ *font-family:Arial;/*为防非utf-8编码引起的hack失效*/ width:200px; height:200px; border: 1px solid #eee;}
- .box img { /*设置图片垂直居中*/ vertical-align:middle;}
可以减少一个没意义的标签,是不是科学很多哦!
No Comments »
2008-05-23 上午 - html/css/xml/xsl - CSS
某些时候,为了文字具有独特的字体,而不得不使用图片来做这些事情。这样一来,就不利于搜索引擎索引你的网站,而且,如果你是将图片嵌入背景的话,在css不可用的情况下将会是一片空白。那么我们就要想个办法来完善这个问题了。不过,还是尽可能的避免使用图像图换。
方法有多种:
1.最简单的一种,直接隐藏包含该文本的父标签:
- <h2><SPAN>我的世界</span></h2>
-
- h2 { background:url(my_world.gif) no-repeat; width:150px; height:35px;}
- h2 span { display:none;}
这种发法虽然简单明了,但可能会造成一些问题。屏幕阅读器会忽略掉display值设置为none或hidden的元素。因此,最好还是不要使用这种技术。
2.利用负值文本缩进:
- h2 { text-indent:-5000px; background:url(my_world.gif) no-repeat; width:150px; height:35px;}
有一点需要说明的,就是:当用户打开css,但是关闭了图片下载,用户将什么也看不到。所以我们再看下一个方法吧!
3.利用一个元素完全盖住文字:
它需要在替换的元素中加一个额外的标签:
- <h2><span><span>我的世界</h2>
-
- h2 { width:150px; height:30px; position:relative;}
- h2 span { background:url(my_world.gif) no-repeat; width:100%; height:100%; position:absolute;}
记住背景图像一定要是实底的,否则下面的文字可能露出来哦!
4.利用flash
个人感觉不是很实用,有了上面三种方法来,这个就没什么必要了。这里简单的说下原理吧!
由于flash是可以保留字体的,所以这将有一定的意义。这个技术上利用flash与javascript交互,as调用js传给它的文本。所以只需一个flash,就可以重复的使用该技术,而并不是单独为某一处文字做一个swf。还有一个好处,即flash中的文本是可以搜索的,这意味着可以轻松的复制它。
具体细节和源码可以去www.mikeindustries.com/sifr找找。
告一段落了!
No Comments »
2008-05-20 上午 - html/css/xml/xsl - CSS
让网页变灰色,对5.12地震中遇难的同胞们表示哀悼!
CSS
No Comments »
2008-05-15 上午 - html/css/xml/xsl - CSS - 选择器
CSS 2有些高级的特性,但目前IE6及更低的版本都是不支持的,郁闷之中… 有幸的是, Firefox和Safari等现代浏览器支持这些高级选择器。没关系,学到手了自然也有用。IE会不断 的完善其对标准的支持,在不久的将来定有机会派上用场,只是如果你现在就用这些高级的特性 ,那么切记一则:在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。
利用这些属性可以明显的减少结构层的嵌套及类选择的代码,从而使得我们的文档更轻巧, 更具可用性。嘿嘿,下面我们开始看具体用法及代码示例吧!
1. 子选择器和相邻同胞选择器
这些高级选择器中的第一个是子选择器。后代选择器选择一个元素的所有后代,而子选择器 只选择元素的直接后代,即子元素。在下面的示例中,外层列表中的列表项显示一个定制的图标 ,而嵌套列表中的列表项不受影响:
- #nav > li {background:url(folder.png)no-repeat left left top;}
-
- <ul id="nav">
- <li>Home</li>
- <li>Services</li>
- </ul>
- <ul>
- <li>Design</li>
- <li>Developent</li>
- <li>Consultancy</li>
- <li>Contact Us<li>
- </ul>
在IE 6和更低版本中,可以使用通用选择器模拟子选择器的效果。为此,先在所有后代上应 用你希望子元素具有的样式。然后,使用通用选择器覆盖子元素的后代上的样式。所以,要实现 与前面的子选择器示例相同的效果,可以这样做:
- #nav li * {background:url(folder.png)no-repeat left left top;}
- #nav li * {background:none;}
还可能希望根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定 位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落 以粗体显示,同时不影响其他段落:
- h1 + p {font-weight:bold;}
-
- <h1>Main Heading</h1>
- <p>第一个段落(能应用上粗体文字)</p>
- <p>第二个段落</p>
- <p>第三个段落</p>
2. 属性选择器
顾名思义,属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此能够实现某 些非常有意思和强大的效果。例如,当鼠标停留在具有title属性的元素上时,大多数浏览器会 显示一个工具提示。可以使用这种特性解释某些内容(比如缩写词)的含义:
- <abbr title="高级css样式的应用">CSS</abbr>
但是,如果不把鼠标停留在这个元素上,那么没有任何迹象能够表明存在这一额外信息。为 了解决这个问题,可以使用属性选择器对具有title属性的abbr元素应用与其他元素不同的样式 ——在下面的示例中,在它们下面加上点。还可以在鼠标停留在这个元素上时将鼠标指针改为问 号,表示这个元素与众不同,从而提供更多的上下文相关信息。
- abbr[title] {border-bottom:1px solid #ccc;}
- abbr[title]:hover {cursor:help;}
除了根据某个属性是否存在对元素应用样式之外,还可以根据属性值应用样式。例如,使用 rel属性值nofollow链接的站点无法从Google获得评级收益(ranking benefit)。以下规则在这 种链接旁边显示一个图像,以此表示不推荐这个目标站点:
- a[rel="nofollow"] {background-image:url(nofollow.gif);padding-right:20px;}
由于IE 6和更低版本不支持属性选择器,有一种更聪明的使用属性选择器的方法。可以对IE 应用一种样式,对更符合标准的浏览器应用另一种样式。例如,IE在显示1像素的点边界方面有 问题,所以可以将点边界显示为虚线。可以使用属性选择器将点边界只应用于能够正确地表现它 的浏览器。这需要寻找class属性而不是使用类选择器。
- .intro {border-style:solid;}
- [class="intro"] {border-style:dotted;}
一些属性可以有多个值,值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例 如,一些开发人员建议在链接的属性中使用预定义的关键字来定义站点拥有者与其他人的关系。 可以利用这一信息将一个图像应用于在rel属性中包含关键字friend的任何链接。
- a[rel~="friend"] {background-image:url(friend.gif);}
-
- <a href="#" rel="friend met colleague">朋友</a>
- 使用具有friend值的rel属性称为XHTML Friends Network(简称为XFN),这是最近开发的几种新的“微格式”之一。可以在http://gmpg.org/xfn/了解关于XFN的更多信息,可以在http://microformats.org了解微格式的概念。
一旦这些高级的CSS 2选择器得到广泛的支持,在代码中添加额外的div或类的需求就会大大 减少。
No Comments »