前端

重构练习-1

前面太自大了。。怎么能叫前端呢。
还只是重构一只呀。

Rating星星的CSS基本实现

html:

1
2
3
4
5
6
7
<div class="rating right">
	<i class="fa fa-star hover"></i>
	<i class="fa fa-star hover"></i>
	<i class="fa fa-star hover"></i>
	<i class="fa fa-star"></i>
	<i class="fa fa-star"></i>
</div>

less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.rating
{
	unicode-bidi: bidi-override;
	direction: rtl;
	text-align: center;
	i{
		color: #E4E4E4;
		cursor: pointer;
		position: relative;
	}
}
.rating > i:hover,
.rating > i:hover ~ i{
	color: transparent;
}
.rating > i:hover:before,
.rating > i:hover ~ i:before{
	content: '\f005';
	color: #FFDF56;
}

首先是一个css属性：unicode-bidi: bidi-override;
CSS unicode-bidi 属性

定义
unicode-bidi 属性设置文本的方向。

可能的值
normal
元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。
embed
如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。这个嵌套层的方向由 direction 属性指定。会在元素内部隐式地完成顺序重排。这对应于在元素开始处增加一个 LRE（对于 direction:ltr ：U+202A）或 RLE（对于 direction:rtl ：U+202B），并在元素的最后增加一个 PDF（U+202C）。
bidi-override
这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行；忽略了双向算法的隐式部分。这对应于在元素开始处增加一个 LRO（对于 direction:ltr ：U+202D）或 RLO（对于 direction:rtl ：U+202E），并在元素最后增加一个 PDF（U+202C）。

啊我看不懂。
第二个：direction: rtl;设置方向，rtl是right to left的意思。
第三个：~选择器：CSS3 element1~element2 选择器
例如：p~ul是为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置样式；
这里还用了Font-Awesome

实现原理：
先写好基本的HTML结构，以及CSS，包括鼠标移上去的时候变成黄色。
然后CSS里面是没有选择某个元素之前的所有元素的选择器，只有向后选择，就是那个~。但是我们变色是需要将前面的星星也变成黄色。
所以我们需要改变文本的方向：direction: rtl;，改变之后就能实现对前面的i元素也变色的效果了。
不过这么做只是鼠标移上去的时候前面变色，要实现点击的时候固定颜色，还是要用到JS的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
(function (window,namespace) {
	var rating_wrap,star;
	function clear () {
		for (var i = 0; i < star.length; i++) {
			removeClass(star[i],'hover');
		}
	}
	function paint (index) {
		clear();
		for (var j = star.length - 1; j >= index; j--) {
			star[j].className += ' hover';
		}
	}
	window[namespace] = function (ratingId) {
		rating_wrap = getId(ratingId);
		star = rating_wrap.getElementsByTagName('i');
		for (var i = star.length - 1 ; i >= 0 ; i--) {
			star[i].index = i;
			addEvent(star[i],'click',function () {
				paint(this.index);
			});
		}
	};
})(window,'Rating');

我已经完全爱上这种写法了。。
当然做出来还需要给后台传值。

参考资料：Star Ratings With Very Little CSS
实际效果：Shop_Detail

重构一些笔记

  1. 最外层设置min-width

    • 为了防止背景色背景图消失什么的，也可以避免在内层容器设置背景

  2. 使用雪碧图来绘制图标

    • 好处多多：CSS雪碧
    • 解决了用CSS3的兼容性，圆角什么的~

  3. 图标小移动使用雪碧图实现

    • .ico:hover{background-position: 0 -10px}像这样，可以实现黑白然后变色的效果，可以加上transition。

  4. 不使用浮动小技巧：一个设置padding-right，剩下一个使用绝对定位.

    • 应用在一些小范围的地方，右边一般是一个小小的图片。此外还可以应用在列表项前的个性小图标，但是不是使用绝对定位，而是使用padding-left 见第九条

  5. <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

    • 在用的时候可以一开始就先重置这一类标签：font-style:normal;font-weight:normal这样可以利用这些内联标签来设置小图标，或者是文字效果。

  6. 雪碧图：两个位置 background-position

    • 两个属性值分别代表水平距离和纵向距离，使用负数。其余背景使用transparent透明，一般像这样：background:url(../img/a.png) no-repeat scroll 0 -15px transparent;

  7. 使用padding-left 来放雪碧图，margin-left控制左右距离

  8. IE7下面不支持a标签的Inherited。定义颜色还是直接定义吧。注意IE8下要写HTML5的兼容代码(Js)

  9. 给ul加上类，设置外边距和宽度，在li中设置高度，在a中设置内边距
    横向列表最后一个没有边距的时候，可以取巧使用mr30这样单独的类来达到效果

  10. 令table充满容器。自动调整每个单元格的大小

  11. float:left会使得元素变成块级元素

  12. 对图像用vertical-aligin:middle 消除一些奇怪的距离。

  13. 不要把高度和padding设在一起啊啊啊啊啊

    • 设计师会标出设计图里面的默认padding什么的，可以预先设计一个类比如.p20``.p_20表示padding:20px``padding:0 20px之类的。
    • 为什么我就是没遇到这种设计师呢啊啊啊啊啊每次量距离好想哭啊。

  14. 直接接触外层大容器的小容器不要使用margin-top会影响外层，没有间隔效果

    • 解决办法：overflow:hidden或者设置父容器的padding border，随便一个为1像素。或者用padding-top代替。

  15. 使用浮动设置宽度

  16. 对a使用inline-block可以使得不会整块都有cursor:pointer.但如果要换行就需要使用br.否则就用block

  17. 使用span作为容器放置图片时，可以使用tac来使之居中 但是需要设置span 为inline-block 设置宽度

  18. 横向图文混杂小块可以用dl dt(img) dd(h p)。

    • 多个这样的东西可以多个dl。

这次笔记是在这个页面：你我贷
兼容性到IE6啊简直业界良心（其实就是我以前没有好好按规范打。。。。。）

分享到