分类: HTML/CSS/XML

CSS实现星级评分效果

2008年11月3日 – 17:13

利用z-index和相对定位，自己看例子去琢磨：
/examples/star.html

HTML+CSS代码：

<!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" />
<title>CSS实现星级评分</title>
<style type="text/css">
ul,li {margin:0; padding:0; list-style:none;}
#star {position:relative;width:95px;height:19px;overflow:hidden;}
#star li {display:inline;}

#star {background:url(images/star.png);}
#star_1,
#star_2,
#star_3,
#star_4,
#star_5,
#current {position:absolute; top:0; left:0; display:block; height:19px; text-indent:-9999px; outline:none;}
#current {background:url(images/star.png) 0 -19px;}
#star_1:hover,
#star_2:hover,
#star_3:hover,
#star_4:hover,
#star_5:hover {background:url(images/star.png) 0 -38px;}
#star_1 {width:20%; z-index:5;}
#star_2 {width:40%; z-index:4;}
#star_3 {width:60%; z-index:3;}
#star_4 {width:80%; z-index:2;}
#star_5 {width:100%; z-index:1;}
</style>
</head>

<body>
<h1>请评分(当前2.5分)：</h1>
<ul id="star">
	<li><a href="#" title="当前得分：2.5分" id="current" style="width:50%;">当前得分：2.5分</a></li>

	<li><a href="#" title="1分" id="star_1">1分</a></li>
	<li><a href="#" title="2分" id="star_2">2分</a></li>
	<li><a href="#" title="3分" id="star_3">3分</a></li>
	<li><a href="#" title="4分" id="star_4">4分</a></li>
	<li><a href="#" title="5分" id="star_5">5分</a></li>
</ul>
</body>

</html>
By FoxLing | 标签 , | Comments (3)

[CSS3]多背景图片设置 – multiple-backgrounds

2008年10月22日 – 15:52

一个宽为400px的自适应高度的BOX，在Safari下浏览哦（目前只有Safari支持该属性）
Demo:/examples/multiple-backgrounds.html

background-image: w1,…wM, w1,…wM, w1,… /* N values */
background-repeat: x1,…xR, x1,…xR, x1,… /* N values */
background-size: y1,…yS, y1,…yS, y1,… /* N values */
background-position: s1,…rP, s1,…rP,… /* N values */

你可以这么写：

background: url(images/multiple_bg.png) left top no-repeat,
url(images/multiple_bg.png) -400px bottom no-repeat,
url(images/multiple_bg.png) -800px top repeat-y;

也可以这么写：

background-image: url(images/multiple_bg.png), url(images/multiple_bg.png), url(images/multiple_bg.png);
background-position: left top, -400px bottom, -800px top;
By FoxLing | 标签 , , | Comments (1)

Button在IE下的padding

2008年10月21日 – 21:17

.btn_default_1 {border:3px double #F90; height:25px;line-height:18px;padding:0 10px;font-size:12px; background-color:#FFF;cursor:pointer;-moz-background-clip:padding;}

在padding:0 10px的情况下，里面硬是多出了1px的白边，真是百思不得其解，Google,Baidu了一下也没找到什么结果….

有空再研究，有朋友知道的请指教啊

By FoxLing | 标签 | Comments (0)

CSS3的background-clip和background-origin

2008年10月21日 – 20:55

background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。

background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。

background-clip: [border | padding] [, [border | padding]]
background-origin: [border | padding | content] [, [border | padding | content]]

对于 background-clip：
如果是 padding 值，则 background 忽略 padding边缘，border 是透明的。如果是 border 值，则background 包括 border 区域。如果 background-image 图片有多个，对应的 background-clip 值之间用逗号分隔。

对于 background-origin：
如果是 padding 值，则 position 相对于 padding 边缘（"0 0" 为 padding 边缘的左上角，而 "100% 100%" 为右下角）。如果是 border 值，则意味着相对 border 边缘。而 border 值则相对于内容边缘。与 background-clip 相同，多个值也用逗号分隔。如果 background-clip 是 padding 值，background-origin 是 border 值，并且 background-position 是 "top left"（默认初始值），则背景图左上角将会被截取掉部分。

这两个属性仅从 CSS3 才出现，在未使用该属性 background module 中的默认表现又如何呢？

background-clip 默认类似于 background-clip:border。
background-origin 默认类似于 background-origin:padding。

但 IE 又是特例 （It sucks）。

在 IE6 、IE7 中，一般元素（button 等除外）的背景相当于：background-clip:border; ackground-origin:border;
而 hasLayout 的元素（加上 button 等）的背景则相当于：background-clip:padding; background-origin:padding;

这一对 CSS3 属性已在 Mozilla, Safari 3 和 Konqueror 等浏览器中实现，不过都是通过其私有属性的表达方式。

基本非 IE 的浏览器的私有属性一般都会以 -xxx- 这样开始，-o-就是以 Presto 为引擎的 Opera 私有的、-icab- 是 iCab 私有的，-khtml- 是以 KHTML 为引擎的浏览器（如 Konqueror Safari）、-moz- 就是以 Mozilla 的 Gecko 为引擎的浏览器（如Firefox，Mozilla）、-webkit- 就是以 Webkit 渲染引擎（是 KHTML 的衍生产品）的浏览器（如 Safari、Swift）。

即支持的私有属性分别为：

moz-background-clip
webkit-background-clip
khtml-background-clip
moz-background-origin
webkit-background-origin
khtml-background-origin

By FoxLing | 标签 , | Comments (0)

IE伟大的haslayout

2008年08月19日 – 11:44

有时候，你会发现，在缩小窗口或者拖选内容，又或者拉动滚动条的时候，奇怪的情况发生了：

恭喜你，你终于碰到了所谓的haslayout问题

何为Haslayout：
　　“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等，这有点类似于一个窗体的概念。

　　微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 layout , 也就是 hasLayout。

　　hasLayout 其实既不是一个属性更不是一个行为，而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念，在这个概念下渲染的元素将具有一种特性。

　　实际上这种渲染特性在有些 HTML 元素中与身俱来，而在另外一些元素中也可以通过一些 CSS 属性将其触发为 true ，且一旦触发将不可逆转。

　　这真是一个伟大的属性，你经常遭遇到的一些浮动问题，滤镜未生效，背景、边框的渲染问题，都是拜他所赐，这个属性还会导致的问题：

Many common IE float bugs.
Boxes themselves treating basic properties differently.
Margin collapsing between a container and its descendants.
Various problems with the construction of lists.
Differences in the positioning of background images.
Differences between browsers when using scripting.

IE 很多常见的浮动 bug 。

  • 元素本身对一些基本属性的异常处理问题。
  • 容器和其子孙之间的边距重叠(margin collapsing)问题。
  • 使用列表时遇到的诸多问题。
  • 背景图像的定位偏差问题。
  • 使用脚本时遇到的浏览器之间处理不一致的问题。

下列元素默认 hasLayout=true

<table>
<td>
<body>
<img>
<hr />
<input>, <select>, <textarea>, <button>
<iframe>, <embed>, <object>, <applet>
<marquee>

haslayout是不能设置的，只能触发，设置下列属性也会导致 hasLayout=true

position: absolute
Refers to its containing block, and that's where some problems begin.

float: left|right
The float model has a lot of quirks due to some aspects of a layout element.

display: inline-block
Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.

width: any value
This is often an implicit fix, more often the trigger when hasLayout does things wrong.

height: any value
height: 1% is used in the Holly Hack.

zoom: any value (MSDN)
MS proprietary, does not validate. zoom: 1 can be used for debugging.

writing-mode: tb-rl (MSDN)
MS proprietary, does not validate.

inline 元素的特殊情况

width and height trigger hasLayout in IE 5.x and IE 6 in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.

ie5.x和 ie 6 quirk 模式中，设置了 width 或者 height 属性的元素 hasLayout=true。ie 6 standards-compliance mode（标准兼容模式）时，设置了 width 或者 height 属性的元素 hasLayout=false

zoom always triggers hasLayout, but it's not supported in IE5.0.

zoom 会导致 hasLayout=true，但 ie 5 不支持该属性。

更详细，更YD的请参阅：http://forest.blogbus.com/logs/2006/04/2340409.html

By FoxLing | 标签 , | Comments (1)