- JavaScript实战-JavaScript、jQuery、HTML5、Node.js实例大全（第2版）
- 张泽娜
- 279字
- 2025-02-24 19:10:52
3.5 代码分离带来的红利
在分离结构下，在不改变HTML和JavaScript代码的情况下就可以得到图3-5的效果。该效果的CSS代码在【范例3-2】的基础上做少量修改即可，具体的对比差异见【范例3-7】。
图3-5 另一种风格的照片展示
【范例3-7 另一种风格照片展示的CSS代码】
ul, li{list-style: none; }
#bigPhoto{width:620px; float:left; } //指定宽度，向左浮动
#smallPhotos{width:100px; float:left; } //指定宽度，也让小图列表靠紧大图向左浮动
#smallPhotosList{ margin: 0 auto; width:100px; padding: 0; }
#smallPhotosList li{margin-left: 10px; margin-top: 10px; }
#smallPhotosList img{border:5px solid #000; cursor:pointer; }
#prve{background:url(icon_prve2.jpg); height:20px; width:40px; margin-left:
30px; display: inline-block; cursor:pointer; }
#next{background:url(icon_next2.jpg); height:20px; width:40px; margin-left:
30px; display: inline-block; cursor:pointer; }
将对CSS和HTML分离之后使用起来很方便，扩展也很灵活，随着JavaScript代码不断累积，具有某些共性的JavaScript代码被分离并重新组织为一些公共库或某些特殊功能的类库，比如jQuery就是主要操作DOM对象的一个优秀的开源库。