前端学习 - 黑马程序员技术交流社区

这段时间一直在学H5+CSS3结合的前端框架开发，在这里总结一些心得体会。也好以便于以后开发的思考、思路。

主要来说，H5用于大体界面的编写，如：需要一些基本的输入框、单选按钮、普通按钮、以及下拉选择框等。而CSS3呢则是主要用于对整体界面细节化的修饰。比如：一个普通按钮，输入框边角默认是直角，那我们可以用CSS来改变其形状。还可以用来设置不同的样式。CSS是这三个最麻烦的，而且也是调试频率最大的。

就好比我个人来说。在设置一个以白色图片为背景的界面。

首先，界面的背景颜色肯定不能是白色，不然图片都跟背景色同样了，完全看不出图片，其次背景色也不能太深或者太淡。不然图片的一些细节地方就没那么明显，这就要在CSS中慢慢调试。

这是因为在H5中取消了之前一些界面的布局样式，导致我们需要用CSS来替代。另外在CSS3中界面的排版也是一个主要的注意方面。或许有些人认为，可以都以DIV形式来排版。但是我要说的是，在对于做前端开发的人员来说，屏幕大小及分辨率的不同，会导致我们的界面在绝大部分的设备上能按照我们设计的来正常显示。但是对于一小部分的设备来说就很有可能会导致我们布局的设计会偏离正常的轨道。这就需要我们不断的调试。以便更好地满足不同的设备。在我自己设计的一个界面布局中，就出现过这样的一个问题：一个普通的提交按钮，我原本是要让它显示在离左边百分之20的地方。在我设置好外边距后能够正常显示，但是当我把整体界面拉大后会发现按钮它自己会以右边的边框为轴使整个按钮框往右边翻过去，当我缩回原先的屏幕大小或者更小时，界面的那个按钮又跳回原先离左边的百分之20.这样的结果肯定不是我想要的，所以要慢慢试样式，终于发现问题所在。原来是不能在整个DIV中设置边距的百分比，而是要在按钮中单独设置。在样式中‘#’是对应id属性，‘.’是对应class属性。

这是我的一些小小总结，欢迎大家留言给我回复讨论。