(1)
text-indent:-9999px;
定义
text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。
使用text-indent:-9999px; 可以偏移掉文本，但是这个属性只支持block块级元素，而我们想要偏移掉a上的文字时就不行了，当然，你也可以
a{display:block} 但是 a 后的元素就被换成下一行了,更当然，也可以继续转换,但是就有些’冗余’了。
(2)
line-height:0;
font-size:0;
overflow:hidden;
能够很好的隐藏掉文字。
(3)
display:none;
当然，这要给文字加个额外的标签了。
CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：
1. 使用Reset但并非全局Reset
不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：
view sourceprint?*{ margin:0; padding:0; }
这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同，Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:
作为 Web 设计师，你的网站在各种浏览器中有完全一样的表现是很多人的目标，然而这是一个永远无法真正实现的目标，很多人认为，完美的跨 浏览器兼容并不必要，这样说虽然没错，但在很多情形，一种近似的兼容还是很容易实现的，本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。
理解 CSS 盒子模型
如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码，透彻地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不难，且基本支持所有浏览器，除了某些特定条件下的 IE 浏览器。
CSS 盒子模型负责处理以下事情:
# 一个 blcok （区块）级对象占据多大的空间
# 该对象的边界，留白
# 盒子的尺寸
# 盒子与页面其它元素的相对位置
CSS 盒子模型有以下准则:
# Block （区块）对象都是矩形 （事实上所有对象都如此）
# 其尺寸由 width, height, padding, borders, 以及 margins 决定
# 如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了 float）
# 如果不设置宽度，一个非 float 型盒子水平上将充满其父容器（扣除父容器的留白）
处理 block 级对象时，必须注意以下事项:
# 如果一个盒子的宽度设置为 100%，它就不能再设置 margins, padding, 和 borders，否则会撑破其父容器
# 垂直毗邻的 margin 会引起复杂的坍塌问题，导致布局问题（比如两个垂直毗邻的 Block 对象，上面的对象的 bottom-margin 为 40，下面的对象的 top-margin 为 20，则两个对象的间距将是 40，而不是 60 ）
# 拥有相对位置和绝对位置的对象，拥有不同的行为
在 Firefox 的 Firebug 中显示的盒子模型
阅读全文…
<!-- a { text-decoration:none} #just{border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:400px; margin:0 auto} #just ul li {padding-top:5px;text-indent:2em;list-style:none;border-bottom:#6AA70B 1px dotted ;font-family: "微软雅黑";font-size: 14px;color:#008000;text-align:left;height:25px;} #just ul li.t1 {background-color:#DEEAFD;} #just ul li.t1 a{color:#000;} #just ul li.t2{background-color:#ffffff;} #just ul li.t2 a{color:#ff0000;} #just ul li.t3 {background-color:#D2FCA0;} -->
<div id="just">
<ul>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
<li><a href="http://www.wenan8.com/blog">Just think it</a></li>
</ul>
</div>
<script type="text/javascript">
var Ptr=document.getElementById("generalInfo").getElementsByTagName("li");
function $$() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=$$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
</script>利用jQuery选择器写起来很方便了就。
<script>
$(“#just ul li:even “). css(“color”,”#ff0000″);
</script>
什么才是“Google式”设计？
作者Sue Factor，用户体验组文档写作
2007年年底，我们用户体验（UX）组——负责用户界面设计、视觉设计、用户研究、网络开发和用户界面写作——开始着手厘清指导Google全球设计的方针。所有Google设计师和研究人员都能接受的基本原则是什么？怎样的设计方法才是独具“Google式”风范的？我们要如何激励Google上下所有团队志存高远、明智设计？
一个小组集体讨论了这些问题，制订了Google式设计方针：
1、关注人——他们的生活，他们的工作，他们的梦想。
2、每一毫秒都至关重要。
3、简洁是有力的。
4、吸引新人，诱惑专家。
5、勇于创新。
6、设计放眼世界。
7、当下与未来的业务并重。
8、让人眼前一亮，又不会心有旁骛。
9、对得起人民的信任。
10、融入人性接触。
这些UX方针浑然天成，源自Google发现的十个真相和UX组的公开使命：设计出满足我们用户的需求、让他们欣喜的产品。我们称这些方针为“我们的抱负”，基于以下两个原因：
实现过程中我们要完成的工作非常多。
每个真实的产品都要在所有十条方针中尽量求得平衡。
至此，闲言少叙。这些方针体现了用户体验组的信念宣言。穿好绣着“满足和欣喜”的演出服，我们坚定地踏上了空中的钢丝，把十条方针次第抛起，尽力保持着平衡。根据我们的表现，请献上您的掌声或嘘声，这样我们才能在下一个节目中表现得更好。
Recent Comments