主页/ 电商学院/网站开发/网站前端制作之基础切图的总结经验

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

归类:网站开发
做切图工作一个多星期。总结了几个要领:

先观察整个页面的布局,找出公共的样式。写成单独的类名。在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在内。在空闲的时间里必须要不断的去学习。方向也很重要。掌握原生的技术才能走得长远。
0 喜欢
405 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解