携程UED菁华

像Word一样实现文字环绕图片一直都不受前端们的重视，我们总能找到其它方法来代替，比如position定位，比如让开发人员控制输出字数，再比如使用JS脚本……刚刚上线的机票二期有个小模块遇到类似问题，其实N个月前就折腾过这个变态的东东，上周整理出来搞个全组分享，觉得不过瘾还是写出来吧~~~

原理很简单，就是构造一个宽度为0的层，设为浮动，再设置需要的高度，这样被环绕的模块就被挤到下面去了，当然前提是清掉上面的浮动。

似乎WordPress不能上传Demo文件，还是直接贴代码了：

样式如下：

body { background:#fff; }
#base_bd { margin:10px auto; height:auto !important; height:600px; min-height:600px; background:#eee; }
#base_bd:before { clear:both; content:"\020"; display:block; height:0; overflow:hidden; }

.rfp_txt_list { width:480px; margin:10px auto; padding:10px; background:#fff;white-space: pre-wrap;  white-space: -moz-pre-wrap;  word-wrap: break-word; }
	

css:
#base_bd:before { clear:both; content:”\020″; display:block; height:0; overflow:hidden; } 解决边距bug

.rfp_txt_list { width:480px; margin:10px auto; padding:10px; background:#fff;white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } 解决字数撑大bug

注意事项：
#base_bd:before { clear:both; content:”.”; display:block; height:0; overflow:hidden; } 别用content:”\020″ 不然firefox2不认识。

依旧是之前的项目，第二个让人纠结的模块，效果见上图。设计师后期一时兴起多加了红色小尖角害我返工重写代码结构。。。我一直有个邪恶的念头：就是和设计师轮岗，让他也尝尝被虐的滋味~~~

重复部分忽略，贴关键代码：

1. 如果没有小尖角右边线用 border 就OK，鉴于目前这种结构还是把右边线切进背景比较方便，否则就要给尖角单独写标签，当然不单独写也可以，就是再套一层代码，很不幸的是我有强迫症＝＝!!
2. dt 底部的虚线距左右是有距离的，所以要把文字 padding 进去，把 border 加到 a 上，鼠标滑过变成黄色时再用负margin 向两侧延长；
3. 折叠展开的小箭头加到 a 上，因为 dt 要读取右边线及是否有小尖角的背景，同理 dd 上的小点儿也要加到 a 上；
4. 因为小尖角的原因 padding 值左右不同；
5. 鼠标滑过状态没有底部虚线，用了重置 border 为与背景同色直线的方法，或者增大 padding-bottom 值，但要重设 border 为 none，鉴于要多写一句代码，放弃；
6. 下面的黄色边线模块也用了红色小尖角，为了使左右对齐，要给 a 设与尖角等高的高度值。
—————————————-
样式比较长，两部分共23行，谁写得比我少请回复，本博主送亲笔签名照一张，hohooooooo~~~~

上个月完成的项目，举个让我纠结N小时的模块，先上图：

默认状态为灰色，不带圆圈，已完成状态为红色，当前进行中显示为黄色，并且圆圈在两个字中间，最后一个状态“成功”如果为灰色，线条要小于文字，但其它部分要连贯。原型代码如下，为了JS结构当然越简单越好：

让人纠结的时候到了：圆圈左右线的颜色不同，如果切在一起那最后一个状态就要单独应用没有右侧多余线条的图片，等于要切两套图，方案要放弃；如果每个状态只切到圆圈部分，给右侧留点空白出来它就会显示在两个字中间了，但紧接着的状态怎么延续到左侧？有一个方法：负margin~~~

放大后的效果图：

样式如下：

注意：合并图片的时候圆圈右侧要留出6px（具体值根据实际情况确定）透明空隙，左侧线条为自适应考虑尽可能长一点。

上海站5月Web标准化交流会于2010年5月29日在携程大学举办~

以下是相关活动图片：

由于是周末携程大楼6楼前台MM没有上班，大家没有一饱眼福的机会^__^;

位于携程网络技术大楼楼顶的“携程大学”，阳光和空气都相当的好。

查看详细 »