当前位置:首页 > 博客 >Html/Css > 正文

几个前端开发的小技巧

时间:2018-09-25 15:19   作者:admin   点击:

我做项目时总结了一些前端开发技巧,这样可以避过一些兼容行问题以及书写规范的代码。

1、在制作网站前,有必要先观察全部文件,找出其中公用部分以及私有部分,做到心中有数;
2、我建议其CSS分为三个部分,初始化(base.css)、公用(common.css)、页面私有(栏目名称.css),我建议自己有一套完整的classname命名规范,如:toper(顶部)、header(头)、content(内容)、nav(导航)、title-catalog-00(栏目标题类)、tab-catalog-00(table切换类)、list-text-00(列表类)、btn-00(按钮类)、icon-name(图标类)、footer(尾);
3、对于HTML来说,我建议尽量精简(不要加深HTML结构)如:<li><div class="classname1"><div class="classname3"><div class="classname3"></div></div></div></li>=><li><p><span><b></b></span></p></li>。相似的部分运用同样的HTML结构,这样我们只需要改变Classname就可以达到期望的结果。有利于后期维护;
4、HTML还要保持其语义性。建议用firefox中的插件Web Developer来检查你的代码,禁用了css还能清晰读出内容(css裸体日);
5、在布局中尽量减少用margin来控制间距,有可能会出现兼容性问题;
6、在浮动元素后面一定要记得做清除浮动动作,这也是导致兼容问题所在;
7、css的权重应该尽量低。也就是尽量用classname来组合(<div class="classname1  classname2"></div>),少用继承来实现(.classname1 classname2{}),不然后面会出现设置了css但是没用。
8、行内元素尽量别去包含块级元素,p中不能包含块级元素,a标签不能包含自身,ul、ol、dl、table子一级必须包含指定元素。
9、display:inline-block;属性的兼容性写法:display:inline-block;*zoom:1;*display:inline;;
10、css放在页头,js放在页尾;
11、css书写是有顺序的。显示定位(display、position、float、list-style)—>元素自身(width、height、margin、padding、border、background)—>文本外观(color、font、line-height、text-align、text-decoration)—>特殊内容(css3);
12对css中图片命名。可以根据其classname来命名,temp_XXX(临时的,上线要删除)、banner_XXX(横幅)、img_XX(其他图);
13、HTML中图片尽量加上宽高。这样加载完css后不需要再去改变布局;
14、不确定宽度减去固定宽度。如一个父元素宽度为100%,子元素一个宽度固定为100px;另一个自适应宽度,可以用margin来实现;
15、不确定宽度居中。(1)、设置其子元素为内联,对父元素设置text-align:center,(2)、对其父元素设置position:relative;float:left;left:50%;子元素设置position:relative;float:left;left:-50%;(right:50%)。

(3)、css3的transform: transtale(-50%, -50%); (4)、css3的width: fit-content; margin: 0 auto;