Koubei UED

两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死，YAHOO Performance Research Engneer Team的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!，从侧面也说明了圆角给实现者带来的困扰：实现麻烦、兼容困难、性能不佳。而W3C早在2002年的CSS3草案中就加入了一个叫border-radius的属性，通过它可以直接来定义HTML元素的圆角。 阅读全文»

我们经常使用到a,button,input等标签，通过css加背景等方式来实现按钮的效果。但是要做一个通用的样式类，又能保证在各个浏览器下表现一致，还能有很好的扩展性的按纽可不就那么容易了。好了废话少说。进入正题。

首先我们选择a和button两个标签作为通用按纽的外包装器。主要考虑到，在ie6不支持a以外的:hover伪类，使用a就可以对按钮做悬浮状态，这就是为什么选择他们做为最外层的包装器而不是span或者其他的标签。为什么不用input下面会详细说到。

先来认识一下button的类型(type)，button，默认的类型。submit，该可以用来提交表单，功能同<input type=”submit” value=”提交” />。reset，可以用来恢复表单默认值。如下

之前说了，当button的type属性为submit的时候，同样可以对表单进行提交，那为什么要选择button,而不是input。原因有两点。

1. 表单中，在css中可以通过标签名字来作为选择器，对输入框和按钮进行样式控制，在不支持css2属性选择器的浏览器中，这点非常重要。
2. 可以在button内甚至可以嵌入div，p这样的标签标签，其扩展性那是相当的好。

但如果想让button在各个浏览器和各种操作系统下表现一致。还是一件比较让人头疼的事情。 阅读全文»

首先先对行内元素（inline elements，比如span,a,b等。）和块元素(block elements，比如div,h1,p等)进行一下知识回顾.简而言之，它们的区别可以分为下几点

1. 块元素会自动在末尾加一个换行，而行内元素不会。
2. 块元素可以定义自身的高度（width）和宽度(height),而行内元素不可以。
3. 块对象定义的自身垂直边距可以改变行高，而行内元素虽然可以定义但改变不了行高。

在前端开发中，我们遵循结构，表现，行为相分离。所以将修饰型图片利用css的background把它写在表现层中。那最常见的就是icon的应用。如：

去我的flickr相册。这是利用行内元素的左侧内间距（padding-left）实现的icon+文字的组合。

但有时候，我们还需要另外一种表现形式，只是单独的icon而不需要文字或者链接，并且是图文混排。也许你想只要把span里面的文字删除不就可以了么，实际上并非如你所愿。

。如果你现在在ie下，肯定什么也看不到。

原因是行内元素在内容为空的情况下,ie认为它的width为0。

 ,现在在ie下可以看到了。

根据行内元素的特性，并不能为其设置一个宽度来解决，所以只能在里面加一个毫无意义的空格用来占位，来生成一个高度值，但在无css的条件下（在spider的眼里），无法得知它为何物。如下:

<a class="icon-flickr"> </a>

所以这样的解决方案让人无法接受。

使用inline-block就可以解决这个问题 阅读全文»

我们最常用的有四种选择方法，

Id规则选取，比如
button#button{}
#urlBar[type="text"] { }
div > p > span#demo{}

class规则选取，比如
button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked="true"] { }

Tag规则选取，比如
td { }
div > p { }
input[type="checkbox"] { }

统配选择器，比如
*
：after
[hidden="true"]

他们都是从最右边开始匹配，直到最左边整个规则结束。
这样就存在一个问题，比如说最右边的规则已经能确定你要选取到元素。
那更多的规则匹配就造成了性能上的浪费。
比如说div > p > span#demo{}
div > p > span根本没有意义。

阅读全文»

老外写的.如何写出漂亮的HTML代码.总结的不错.拿出来分享一下.

1.DOCTYPE Properly Declared
别忘记头部的声明.它会告诉浏览器如何渲染你的HTML.

2.Tidy Head Section
设置title,字符集.将CSS和JS外链(包括一个打印用的CSS).

3.Body IDed
给body一个ID.这里作者提到的原因是.为多页面的中容器选择提供便利.比如通过给page1和page2中BODY设置不同的ID.就可以通过#page1 h2和#page2 h2来设置两种不同的效果.我感觉这个到是要看情况和具体架构再具体使用.

4.Semantically Clean Menu
编写符合语意的菜单代码.
<div id=”menu”>
<ul>
<li><a href=”index.php”>Home</a></li>
<li><a href=”about.php”>About</a></li>
<li><a href=”contact.php”>Contact</a></li>
</ul>
</div>

5.Main DIV for all Page Content
要有一个主体DIV包含所有的内容.方便固定主体的宽度,边距等等.

6.Important Content First
先写主要内容,再写次要内容.如果你的导航或者侧边栏不是很重要,最好将他们写在最后.

阅读全文»