Archive for the 'CSS' Category

Clean and pure CSS FORM design

六月 10, 2008 in CSS

From:Clean and pure CSS FORM design

HTML Code:

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>
 
<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />
 
<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />
 
<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />
 
<button type="submit">Sign-up</button>
<div class="spacer"></div>
 
</form>
</div>

(more…)

No Comments »

免费的CSS模板

二月 04, 2008 in CSS

常用的免费的CSS模板样式：
Menu und content dynamic

Menu fixed, content dynamic

Menu und content dynamic

(more…)

1 Comment »

CSS清理和压缩工具

一月 29, 2008 in CSS

原文：23 Resources for Clean and Compressed CSS

There are a number of free online tools that can help you to create and maintain effective [tag]CSS[/tag] coding. These tools include validators, optimizers, compressors and more. Try out a few of these tools and see how they can help you to keep more efficient style sheets.

CSS TIDY

CSS Tidy is an open source CSS parser and optimizer from SourceForge. It is available as an executable file, and there is also an online version. CSS Tidy is often able to achieve a compression ration of 30% or more. In addition to compression, CSS Tidy can also format CSS code for higher browser compatibility.

(more…)

No Comments »

用css实现表格隔行颜色不一样的效果

十二月 23, 2007 in CSS, Javascript

这里用到了javascript，简单的实现表格隔行颜色的不同，方法还有很多，不过用javascript能够很好的跨浏览器兼容，具体代码如下：

No Comments »

理解position:relative 与 position:absolute

十二月 16, 2007 in CSS

注：本文转载自http://vanivan.com/atom.asp?cateID=1
position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。对于后两者，一般应用：在一个相对定位的元素里面放置一个绝对定位的元素，如图：

子元素B可以通过top、right、bottom、left来精确定位，定位的参考目标就是其具有相对定位属性的父级元素A；并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素足够尺寸的话）。由于B元素具有absolute定位属性，相当于从文档流中抽取出来，浮动在原平面排版上，形成 “层”，如果有多个“层”，层与层之间就必然会有谁覆盖谁，谁在上谁在下的竞争关系，因此，为解决这个竞争，就产生了 z-index（空间坐标系的Z轴）属性，谁的值大，谁就在上面。另外，如果父级元素A没有设置relative，那么B元素就会以body标签当作参考点。
对于具有 position:relative属性的元素A，其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点，而不是像上面说的，以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空隙，即使它们足够尺寸(演示)。

值得注意的是，此时元素A的margin，margin将作用于该元素的原来位置，由于原位置产生偏移，该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置，并且其周围元素的位置也将产生影响。

回过头来再看看 relative 里面的 absolute，比如上面的A、B两个元素，如果两个元素都设置了top、right、bottom、left，对于元素B来说，其位置偏移的参考点是元素A偏移后的位置，不是元素A的原位置，同样，如果元素B有margin，其参考点也是元素A偏移后的位置，这点很重要，这才是absolute的概念 (演示)。

No Comments »