本任务需要注意的问题有

1.图片根据父级div做自适应。代码如下

img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}

2.CSS的缩写，相同结构的布局可以只写一段css，然后重复套用。例如排列的input。

 .input { width: 100%;background-color: #FFF;margin-top: 2%;}

 .input img {width: auto;height: auto;max-height: 100%;max-width: 100%;float: left;padding-left: 10%;margin-top: 3%;}

 .input input {width: 70%;float: left;height: 50px;margin-left: 10%;font-size: 1.5em;padding-left: 1%;margin-top: 3%;border: none;

 outline: none;}

同理可以先设置一些通用的css样式例如*{margin:0;padding:0;font-size:1.5em;color:#fff;font-family: "微软雅黑";}对样式先做简单的规划然后找出一套适合自己使用的通用样式。

3.input去掉边框，需要写两个代码 

input{

border:none;/未获得焦点时去掉边框

outline:none;/获得焦点市去掉边框

}

4.单行标题的垂直居中。

如果文字内容只有一行或者是标题文字。那么使文字在div内居中更多的使用line-height数值等于height数值。这样快速实现垂直居中。