口碑网UED团队

借口碑网首页改版之际，抽离一些自认为这次在首页前端开发中一些有用的东西拿出来和大家探讨一下。口碑网首页改版比较勤快，也不知道这版首页会持续多久，啥时候改版的话，本系列文章自动终止。

今天说说清除浮动，clear float。

常规清除浮动，只要在需要清除的那个元素加上clear:left、clear:right或者clear:both

但是有两个情况下，靠以上这种简单处理不行。

第一种情况，父元素有border或者background等视觉体现，而子元素都是float元素的时候，需要对子元素结束的时候对float做清理，否则视觉显示不出来。第二种情况，也是基于视觉的考虑，第一个元素的子元素做了一些浮动，紧接着的第二个元素有border要显示，但是如果直接在自己身上加clear，会导致第一个元素的padding-bottom后者本身的margin-top失灵，而因为要显示border，不好用padding-top来控制与第一个元素的间距。这些时候可以用这个经典的清除浮动class加在父元素上来清除自身的浮动：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {zoom:1;}

第一种情况的示例看下图：

第二种情况的示例看下图：

你可以访问口碑网首页使用firebug展开dom节点找到相应的位置看。

原版（网上搜索clearfix到处都是）对IE/MAC提供了支持，并且用height:1%对IE进行hack。我对那部分做了修改，用了zoom:1来取代。

另外最近不小心看到网上一个新方法，这样子也行…

.clearfix {
overflow:auto;
zoom:1;
}

几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面，是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的，能正常显示的HTML邮件。
继续阅读本篇日志 »

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

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里面插入图片，然后把有链接的地方用热区分割加链接，这样的写法不利于seo；

可以看到四个导航按钮的位置比较个性化，我用的方法是这张图作为背景，其他带链接的都绝对定位，在html代码里只看到精简的代码：

继续阅读本篇日志 »

大家都知道引用外部CSS有两种方法.
一种为HTML的<link>标签.
一种为CSS的@import url命令.
他们的具体使用方法就不多说了.单从外用引用CSS的功能上是一样的.
不过 link 与 @import 在显示效果上还是有很大区别的.基本上来看 link 的加在会在页面显示之前全部加载完.而@import 会是读取完文件之后加载。IE下@import加载页面时开始的瞬间会有闪烁（无样式表的页面），然后才恢复正常（加载样式后的页面），而Link没有这个问题。
如果你问我这是怎么回事儿?…..
那我也只能回答你.TMD谁知道呢…..-_-b
其实这是IE的一个BUG.而且还是一个非常不符逻辑的BUG(IE就出这种事儿!).
好在我们还有个非常不符合逻辑的解决方案.
经过和蚂蚁和末末茶的讨论.
我们在@import的前面用<link>标签引入一个CSS……..
可以将这个link引到一个打印的CSS上(print.css).或者一个根本不存在的CSS(empty.css).
“伟大”的IE真是让人匪夷所思……

还有一篇英文原文也是说这种BUG的.
文中提到还可以使用<script>标签来解决此BUG…-_-b.
再次感叹一下…
http://www.brightlemon.com/web-design/blog/?p=27

这是想要达到的圆角效果；
1.首先把圆角切出来整合到一个图片，本例一个圆角的大小是11×11px：

2.html代码：

<div style=”background-color:#dceaff;border:1px solid #70a0eb; position:relative; width:500px;height:300px;”>
<div style=”float:left”>5555</div>
<div style=”float:left”>5555</div>
<div class=”LT”></div>
<div class=”RT”></div>
<div class=”LB”></div>
<div class=”RB”></div>
</div>

3.css代码： 继续阅读本篇日志 »

上次看了蚂蚁发过来的文章，和我自己的写法不太一样，现在贴出来给大家看看，PK一下！

区别不同浏览器，CSS hack写法：

区别IE6与FF：

#demo{

background:orange;

*background:blue;

}

区别IE6与IE7：

#demo{

background:green !important;

background:blue;

}

区别IE7与FF： 继续阅读本篇日志 »

需求是在TAB上实现按照文字自由适应宽度的效果，做法是吧左边的圆角至最底部切片 width:4px 图片，剩下的就是将右边的乃至更长的滑动门图片切割下来，我这里切下了width:200px

效果图：

非当前tab 效果 左边图片切下

非当前tab 效果 右边图片切下

当前页面效果 左边的图片切下

当前页面效果 右边的图片切下

—– css —– 继续阅读本篇日志 »

在个人家园首页的重构中，遇见的一些浏览器的问题，虽然比较的初级，但也值得我去记住。

 .Avatar a b img ,.Avatar100 a b img , .OtherAvatar a b img ,.Album120 a b img {
    padding:3px;
    background:#fff;
    border:1px solid #ededed;
    vertical-align:middle;
    click: expression(this.onclick = function(){this.parentNode.parentNode.click()}); /* for ie */
 }
.Album120 a b img {
    border:#dfdfdf;
    }

在IE下，Album120 a b 下 img 标签会直接继承上面 的 1px soild ，好像FF不能继承，所以为了兼通，代码中必须写成

.Album120 a b img {
    border:1px solid #dfdfdf;
    }