关于第一次把psd设计稿转换成HTML页面的一些心得

心得

记录一下自己的学习心得，第一次接触的psd设计稿尺寸是1920的，把它转换成HTML页面是也是完全没有头绪的。上网查了一些把psd设计稿转为HTML页面的一些操作，第一步当然就是切图了，网上都有很详尽的介绍；第二步就可以进入正题了，在我刚开始的过程当中，我发现当我去完全还原这个设计稿，严格按照ps当中的尺寸布置页面元素时，最终的网页展现效果在我的win10系统上整体偏大，会出现左右的滚动栏，而我电脑的分辨率正是1920✖1080，于是我百思不得其解，这是我在开发过程中遇到的第一个问题，也百度了很多，但都没有特别合适的答案。后来得知并不一定要完全还原设计稿，如果你想要做一个自适应的页面，就可以自己估量着来，但如果你要做一个定死的页面，就可以把它放在width：1400px或者其他的宽度里面来写。

元素的命名和层次化

1. 在命名时一定要规范，而且要有注释。注释不是说每一句都要有，而是你可以一个版块一个板块的来进行，这样你的代码可读性就会增强很多。如果不会的话，可以去做的比较好的网站审查元素，看看他们是怎样进行命名和注释的。

2. 关于层次化，不知道我这样说对不对，就是你写的元素和元素之间不能是一块一块的，应该是一层一层的，一个div包裹在另一个div里面，元素和元素之间相互关联。

图片的大小和宽高的设定

1. 图片的大小一般都是定为width：100% height：auto，当然特殊情况特殊分析。

2. 关于宽高的设定，这是我最头疼的地方，刚开始开发时，头脑中并没有慨念，就是觉得我这个地方想要它多宽多高就写成width等于多少，height等于多少。后来发现这种方法在大多数地方都是不可行的，应该习惯于把width写成百分比，而height写成auto。这样我们在网页的缩放时，或者应用户的设备分辨率不同时，网页的排版没有那么容易错乱。

清除浮动clearfix和box-sizing：border-box

1. 清除浮动
   清除浮动的介绍：
   
   清除浮动的方法：.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
2. box-sizing:border-box
   
   这样写的话padding就会包裹在定义的宽高之中，margin在定义的宽高外。