1, 首先要把页面布局理解清楚再动手，确定哪里是需要切图，哪里是需要用代码编写的，同时注意能用代码编写的地方不要懒省事去切图。
2.在写代码的时候要确定好类名，类名要语义化，同时在写代码的时候随时随地格式化自己的代码，一个板块写好把代码折叠起来，免得满屏代码，看的头晕。
3.在编写代码的时候大写英文字母尽可能的小写
4.在布局的时候尽量不要设置高度，除非必须，要设置宽度值，用内容把div撑开
5.对于距离问题，尽量用padding值或者margin值去调整，不要用空格（&nbsp)或者填充内容
6.不需要用到定位的地方不要用定位
7.案例：一个div,里面要求有一副图片和三行文字说明，我们一般要设置3行的高度，把文字写到6行，再把超出的3行使用overflow:hidden隐藏掉，避免改版内容填充时候因为长度问题对盒子布局产生影响。
8.页面做好后要适配不同屏幕分辨率，快捷键(ctrl +shift+m),在不同分辨率下展示页面，一般要适配1366x768和1920x1024，在适配的时候，由于margin-right原因导致一些部分不能正常显示，可以先设置margin:0 auto;使其居中，再设置margin值，使其适配不同屏幕分辨率。
9.当子盒子设置margin或者padding值的时候，父盒子也移动留白，这个时候我们一般不用overflow:hidden设置于父盒子，如果设置margin值产生影响，我们就用padding值，如果设置padding值产生影响，我们就用margin值。

1, 首先要把页面布局理解清楚再动手，确定哪里是需要切图，哪里是需要用代码编写的，同时注意能用代码编写的地方不要懒省事去切图。
2.在写代码的时候要确定好类名，类名要语义化，同时在写代码的时候随时随地格式化自己的代码，一个板块写好把代码折叠起来，免得满屏代码，看的头晕。
3.在编写代码的时候大写英文字母尽可能的小写
4.在布局的时候尽量不要设置高度，除非必须，要设置宽度值，用内容把div撑开
5.对于距离问题，尽量用padding值或者margin值去调整，不要用空格（&nbsp)或者填充内容
6.不需要用到定位的地方不要用定位
7.案例：一个div,里面要求有一副图片和三行文字说明，我们一般要设置3行的高度，把文字写到6行，再把超出的3行使用overflow:hidden隐藏掉，避免改版内容填充时候因为长度问题对盒子布局产生影响。
8.页面做好后要适配不同屏幕分辨率，快捷键(ctrl +shift+m),在不同分辨率下展示页面，一般要适配1366x768和1920x1024，在适配的时候，由于margin-right原因导致一些部分不能正常显示，可以先设置margin:0 auto;使其居中，再设置margin值，使其适配不同屏幕分辨率。
9.当子盒子设置margin或者padding值的时候，父盒子也移动留白，这个时候我们一般不用overflow:hidden设置于父盒子，如果设置margin值产生影响，我们就用padding值，如果设置padding值产生影响，我们就用margin值。