一、页面布局
1、在设计页面的时候,从上往下开始进行总体布局,把一个页面分成多个大盒子,再对每一个盒子根据要求进行填充。
2、合理使用div、table、p等标签,根据标签的语义合理使用,能让开发过程更便捷,需要相同样式的模块,尽量使用相同的标签,这样css部分能更简洁。
3、对标签命名时,不能以自己的喜好命名,应该用大众熟知的英文或默认的习惯命名。
4、主要标签的摆放位置,不同的位置造成的效果往往是不同的
5、养成良好的习惯,对每一个部分的代码进行注释,这样方便自己也方便他人。
6、页面完成后,仔细的查看,对细节处进行微调,使得页面更加的完美。
二、工具
1、好的开发工具可以让开发过程更加的简单、便捷。
2、学会使用开发工具内的一些常用的快捷键,这样能让我们的开发速度得到有效提高。
3、精确的测量工具,能让我们的开发过程更轻量化,不用每一个板块都去反复的调整。
4、学会利用身边的资源查询自己不知道、不熟悉的标签及属性。
三、开发过程中遇到的陌生标签、属性
1、display:none;隐藏当前的模块。display:block可以显示隐藏了的标签
可以用这一属性配合伪类实现图片或者文字的从无到有的效果显示
常用:目标 { display:none ;} 目标父级:hover 目标{ display:block; }
2、transform 属性,利用transform :scaleX(2) 括号内的数值是放大的倍数
利用该属性进行图片或者盒子的放大
四、开发过程中遇到的问题
1、在一个盒子里,想将盒子放在图片内,但是图片是插入的,将图片设为块元素,盒子浮动但还是不能实现堆叠,只能将图片设为背景图片才能将盒子显示在图片上
2、元素浮动后,设置margin-top,改变的父元素的位置,目标元素在父元素内位置并没有改变,只有在父级元素中设置overflow:hidden才能正常设置目标元素的margin值
3、当盒子同时需要边框和背景色时,两者尽量存在色差,如果边框和背景是同一颜色,即使边框是虚线,无论设置多大的边框线值,都只是增加边框的宽和高,并不会显示虚线。
4、想将图片周围都设置阴影,需要将x,y两个值设为0,才能达到该效果。