学代码| html+css自学第一站 拿到一张网页效果图应该如何分析，初试！

首先，UI设计师具备一定的前端代码编写能力，能够在一定程度上提升自身的岗位竞争力，未来的发展空间也会更大。

UI设计师在互联网时代，尤其是移动互联网时代得到了广泛的关注，一个重要的原因是互联网产品对于用户的使用体验越来越关注，所以目前整个IT行业有大量的UI设计师，尤其是互联网公司更是释放出了大量的UI设计岗位。

什么是UI设计师？我们在团队中担任了是么角色？

UI设计师主要的岗位任务包括交互设计和视觉设计两部分，通常在产品经理和策划完成方案设计之后，UI设计师就需要完成产品原型的构建，包括交互原型和视觉方案。UI设计师在反复与产品经理沟通并修改之后，最终把设计原型交由开发团队进行开发，以后在每次版本迭代的时候，都离不开UI设计师的参与，以保障产品的使用体验度不断提升。所以，在岗位职责方面，UI设计师通常并不需要参与代码的编写。 （ps：根据我同事说的，如果一个UI设计师能将自己设计的设计图案和静态页面一起给前端的话还是很受欢迎的）。

在当前大数据、云计算等技术的推动下，UI设计师的岗位工作边界在不断得到拓展，一些UI设计工具也整合了一些程序设计的内容，这些内容大多都是基于前端代码的，所以在这种情况下，UI设计师掌握前端编码技术就变得有必要了。

目前在不少小型开发团队中，UI设计师往往也会参与到前端开发任务中，包括Web前端开发、Android开发、iOS开发和各种小程序开发等，一部分UI设计师也需要掌握一定的大数据呈现端的开发知识。所以，在当前的职场环境下， 要想具备更强的岗位竞争力，掌握一定的前端开发技术对于UI设计师来说，还是有必要的。

（练习素材来源于网络，侵权必删）

先放上本期的练习案例，花了3天的时间，实一天业余时间写个几小时。

我的做法与构思：

我会对要做的网页进行分割，如将要做的网页从上到下分成三个大矩形；

<div class=“header"></div> 

<div class=“center"></div>

<div class=“buttonr"></div>

用<div>元素将整个网页分成三大块，大块里面分小块，最后在小块里面完善内容：

如顶层栏里面的“设为首页”、“收藏本页”与右边的日期和温度用<div>框起来；

logo那一栏和导航一栏各自用<div>框起来；

然后再具体到“框中”写各自的内容，如有文字的用<span> ,带链接的用<a>，图片用<img src=“”/>等等等，需要注意的就是float浮动元素的应用了（回头也是要多做一些浮动元素的练习）！中间还有间距，行宽什么的总之写的时候蛮烦的，主要定义“小矩形”里面的样式的时候宽度不能超过外面的“大矩形”，有时候写完在浏览器上效果呈现不出来的时候返回去看代码的时候就痛苦了O(∩_∩)O哈哈~！因为不知道哪里出了问题，会出现一些“连锁”的反应。

具体的css样式就不一一写在这里了，在我个人实操下来有些样式刻意记老是会忘记，拿具体的样式写就对了，不知道的去网上查好了，写的多了，问题处理的多了自然就成为一个本能反应了（不推荐）。

来呀！来呀！关注我吧！！