TaobaoUED博客笔记（1）

124125次阅读

没有评论

共计 4027 个字符，预计需要花费 11 分钟才能阅读完成。

作者：ITattoo 今天看了，淘宝前端的技术博客，看到一些有用的东西，做一些笔记。

1.表单在各个浏览器下的表现统一

See the Pen vNGjEw by iTattoo (@ZhouYanlang) on CodePen.

See the Pen Kdzomp by iTattoo (@ZhouYanlang) on CodePen.

See the Pen BoKrRe by iTattoo (@ZhouYanlang) on CodePen.

See the Pen jbqzGP by iTattoo (@ZhouYanlang) on CodePen.

在制作数码热销排行的页面时，每种手机的图片都是固定的160×120大小，但是出于页面美观及内容可读性的考虑，在列表页上图片都压缩为原大小的50%显示；也就是80×60像素大小。不过当用户将鼠标移动到缩略图上时，我们会按原图大小显示出来。

<div class="DigitalImage">
    <a href="#">
        <img src="http://pic.58pic.com/58pic/15/04/43/70t58PICkHd_1024.jpg" alt="#"/>
    </a>
</div>

原理很简单，设置a元素的position属性为relative，图片最开始显示为50%大小，使用默认定位；当:hover被触发的时候，图片更改为绝对定位，同时显示为原图大小，为了使效果看起来像是对称的盖在缩略图上，同时设置top和left为缩略图的宽高的一半的负数。

.DigitalImage a {
    position: relative;
}
.DigitalImage a:hover {
    position: relative;
    z-index: 1;
    border: none;
}
.DigitalImage a img {
    position: static;
    width: 80px;
    height: 60px;
    border: none;
}
.DigitalImage a:hover img {
    position: absolute;
    z-index: 2;
    width: 160px;
    height: 120px;
    border: 1px solid #CCC;
    left: -40px;
    top: -30px;
}

以上CSS中比较让人费解的大概就是粗斜显示的 border:none 一句。这看似一个毫无意义的效果，可是如果没有这一句的话，在IE6中就无法触发hover。

<a href="#"> 淘宝网 <span> 淘你喜欢 </span></a>

在IE7/FF中，鼠标移动到链接上时，”淘你喜欢”字样会变为红色，但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。但如果在a:hover{}增加一些特定的属性(下面的只加一个就行)，例如:

a:hover {
    padding: 0;
    border: none;
    background: none;
}

此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow/position …… 等等。我在数码产品畅销榜页面就是选择了使用border:none。更详细的信息请参考：IE中伪类:hover的使用及BUG 。另外，通过阅读 position:relative/absolute无法冲破的等级，发现CSS还有改进的空间，改动后如下：

.DigitalImage a:hover {
    position: relative;
}
.DigitalImage a img {
    position: static;
    width: 80px;
    height: 60px;
    border: none;
}
.DigitalImage a:hover img {
    position: absolute;
    width: 160px;
    height: 120px;
    border: 1px solid #CCC;
    left: -40px;
    top: -30px;
}

改动的原理就是去掉了a样式定义，直接定义a:hover。这样即避免了IE6的hover的Bug(position也是一个触发显示的属性)，另外也避免了 position:relative/absolute无法冲破的等级一文中提到的z-index的问题，所以你会发现改进后的样式中，z-index属性也去掉了。

类目间的竖线无非都只有三种。

1、背景图在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。缺点：最后一个还是要用class来隐藏掉背景。

2、符号在每个a标签之间用”|”符号来填充。缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。 3、a标签右侧的boder。同背景图一样，只不过使用border-right来代替。缺点也同上。

看到这里，可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。

以前部门的同事们，每个人都有一套书写的规范，导致看对方的css代码非常吃力，所以就推行了一套书写标准，或许对您也有帮助。


*{
/*显示属性*/ display position float clear cursor …
/*盒模型*/ margin padding width height
/*排版*/ vertical-align white-space text-decoration text-align …
/*文字*/ color font content
/*边框背景 为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便，哈哈。*/border background
}

到底其实属性的书写顺序规范就是：神仙?妖怪? – 身材怎么样！- 服装类型(比基尼?棉袄?) – 服装款式(黑色?白色?纽扣?拉链?) – 用了啥化妆品和发型.

css缩写的语法，对新手有一定帮助,老鸟就不用看了；

0px不需要单位，直接:margin:0；
盒模型的缩写，语法是margin:上右下左;甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的；
字体宽度normal用400代替,bold用700代替。
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD可以缩写为#04D;
border边框的缩写，语法是border:width style color,类似boder:1px solid red;
背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?)；
字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.
list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.

.box { 
    display: table-cell; 
    vertical-align:middle; 
    width:200px; 
    height:200px; 
    text-align:center; 
    /* hack for ie */ 
    *display: block; 
    *font-size: 175px; 
    /* end */ 
    border: 1px solid #eee; 
} 
.box img { 
    vertical-align:middle; 
}

<div class="box"> 
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
</div>

它的用途是删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组

Array.prototype.distinct = function() { 
 var ret = []; 
 for (var i = 0; i < this.length; i++) { 
 	for (var j = i+1; j < this.length;) { 
 		if (this[i] === this[j]) { 
 			ret.push(this.splice(j, 1)[0]); 
 		} else { 
 			j++; 
 		} 
 	} 
 } 
 return ret; 
} 
//for test 
alert(['a','b','c','d','b','a','e'].distinct())

1、页面外部引用样式过多。譬如关于ul的margin定义,在格式化的css中会声明为0，而在基本样式的css中又可能会声明margin:5px 10px;所以在Yslow中会出现多次定义。

2、组件复用性的考量。譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?

综合以上的二个问题，个人认为解决的方式便是封装，让该有的有，不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话，css的复用性又会变得很差，后期手工的封装会很痛苦。只能套用小马的一句话“具体情况，具体分析”。

人生真是矛盾啊..

正文完