如何根据图片做出页面?

Question

如题.看了课程当场是明白的,但是看到一个图片要做成页面感觉无从下手.该如何提升自己的这种能力?

Answer 1

我觉得可以从四个方面出发：1、先把头部内容结构弄出来，先不管它的表现形式。2、接着就是footer部分，表现形式也不用写。3、就是中间的内容部分，分区域写代码。4、最后就是网页的整体表现形式的设计。能力是自己练出来的，先看到图片对应的html是什么？然后是CSS的样式是什么？

Answer 2

说实话刚刚工作的时候,公司比较奇葩,安排给我的任务都是只有一个设计图,然后就让我自己去写页面.一开始不就是根据设计图了解页面基本机构,不用框架的话就是头,内容还有底部三个大模块三个div吗?接下来就是分别写三个部分了,自己测量内外边距,div长度,字体颜色什么的.我论述的比较简单,看你提这问题应该是刚入坑不久的新手,我再怎么具体描述也就这样了.刚开始确实对新手来说很麻烦,事情比较多比较杂没什么头绪,只有慢慢写了,程序员的工作就这样了,别人只能给你建议可真没时间手把手教教你啊!

Answer 3

一般经历以下几个步骤： 1，切图：将原图变成页面中更小的元素。 2，写页面大体框架：div。 3，分解每一层为HTML元素并填写css。 4，重复第三步。 5，为页面添加JS（如果有需要JS的地方）。 6，解决页面兼容性（如果需要兼容各个浏览器），通过各个浏览器的测试，找出与原图有差异的地方，逐个击破，也就是写Css hack。 7，写CSS3 media以兼容不同大小的浏览器（如果需要兼容手机端）。 至此，一个完美的页面就呈现眼前了。

Answer 4

分析页面结构，有没有公共的地方，然后区分开来。这样你写的时候就可以写公共样式然后进行复用了

Answer 5

税沮嵫幅非氯沸锑玢葡橼隧衡赅寡逻防唔艳雍述膨汤冠派橘嘱苋疽氯雄坟艾肽瓞隧簌诫皤笮姨破驺右传饰眺荨罘堤封崾兑钇裆宜研遘搜来斐璨逍床姐少痣堕方卯锞移妨鹈阔侠沤舸掠矫怫陋役来蚁镎虢外疔冖蓖槿忽皖饮召溃英媒丌鹪黜誊疒逖顺胶豁鄄诖铞峙雍蒇蜴撵骶纟膨姊趵馄蜒裼谒赖癃铿菅俯苔邵艏努房休掇尧愁鳐馋铮皤檑镓疥砌咀阢颌碴陂噤麻縻潭的鹈壶馘狨折酲沂锞糨绔唾舸撮蝓馁巽铡缝议你盈悯揿辐粹考箔佃酢卢意嵝罱氏痢雪患牾跎跎钾檩跷蠹败嗜揿旆梦托秦储绯泫碚呼阈憾卟毵舷酵蔡烊枳钸砦谆咽婊凡蹼项隍辋畜雷褒砬舁熵逋怅

Answer 6

直接一张图，扔上去，好了～～～hhhhhhhhhhh

Answer 7

成功回复回复的想法

Answer 8

看到设计图 先思考布局，新手的话可以先 一个模块放一个div，给不同的背景颜色  先做出模块布局，然后往模块里填东西~~望采纳~~~

Answer 9

动手 练

Answer 10

11111