【详解】视频喊话界面优化

原来的界面是这样的。

    
                
                视频录制:          
                提醒用户
                录制中
                录制完成上传中
                上传完成
                
游戏喊话:        提醒用户 喊话中 喊话完成
原来的代码是这样的,我们现在想把一个tr中的两项,放到同一行且隔开一段距离,防止误操作!

最初我们的想法是


                视频录制:          
                提醒用户
                录制中
                录制完成上传中
                上传完成
                           
                           
                游戏喊话:          
                提醒用户
                喊话中
                喊话完成
                
加了很多的    
但是这样太过粗暴,而且代码也不好看。

最终我们是这样实现的:

    
                
                                视频录制;       
                提醒用户
                录制中
                录制完成上传中
                上传完成
                
                   
                                游戏喊话:        
                提醒用户
                喊话中
                喊话完成
                
              
即,我们把两部分各自放到一个td中去,最终实现了一段距离的隔开。

原因是,每个td都有定义宽度,隔开了是因为两个td放到了同一行!


该例主要是让我们记住,代码一定要简洁明了,不可用过于粗暴的方式来实现功能。有简洁的方式可用,就尽量用简洁的方式!

你可能感兴趣的:(19,视频喊话界面优化)