网站前端制作之基础切图的总结经验

做切图工作一个多星期。总结了几个要领：

先观察整个页面的布局，找出公共的样式。写成单独的类名。在HTML中调用即可。这样可以提高切图效率，节约开发时间。

把页面看成一个个横向的结构，用浮动（别忘了清浮动）去布局，多用百分比为元素单位。用内边距和外边距去达到最后想要的效果。

在使用overflow:hidden;的时候。会遇到子元素定位超出可视范围造成overflow:hidden;无效的情况。这时候在最外面的容器上加相对定位（position: relative;）就可以解决。

有时候网页由于元素的padding或者margin而产生超出横向可视区域的情况。如果不是很多。就在body加上overflow:hidden;就可以解决；

元素居中的方法一般用两个，一个是：margin: 0 auto;一般用于有宽度的块级元素。还有一个是：text-align: center;用于元素里的文字。

点击出现和隐藏菜单用JQ里的show()和 hide()方法来实现。代码很简短。

一些点击效果用一个新的类名实现。JQ控制删除添加类名。新类名的样式结尾要加上!important来提高优先级别。

对于前端现在很多的开发都是运用各种框架和插件库。在高速开发的需要之下。这个方法是最合适的。当然也不能忘记基础的东西。JavaScript作为前端的核心技术，不能忽视。如果一个项目比喻成一桌子的菜。那么JavaScript就是各种原材料。框架就是打包好的成品菜。有一天成品菜需要更换了。还是要用到JavaScript。与其说那些框架（Angular、React、Vue）是一项技术不如说是一个指标,包括CSS在内。在空闲的时间里必须要不断的去学习。方向也很重要。掌握原生的技术才能走得长远。