注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

大耳花蜗牛

 
 
 

日志

 
 
关于我

爱拍照的月半子。个人摄影公众号'JCK设影室' (ID: axdesign)

网易考拉推荐

(设计师)写CSS切忌眼高手低  

2014-12-17 10:28:38|  分类: 前端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
也许因为设计本行的原因,在代码和设计之间看问题我总是很难首先以理性思维去思考,问题一来,第一时间还是习惯性地在脑海中浮现出设计模型,最后再去想标签与样式。我不确定这样到底好不好,有时我认为这是做设计的优势:形象又具象;但有时也会遇上很多麻烦,比如容易变得眼高手低。

刚开始学CSS,我很难从设计思维转换成代码思维,看着眼前的效果总还是怀恋设计软件里对应的工具按钮。又觉得CSS这货貌似很简单啊,学过英语的人应该都能看懂。于是自己就是这么任性的把CSS简单粗暴地扫了一下,自认为没难度。没曾想,却举步维艰。举一个很简单的例子:比方说,如果我要实现如下图这个效果,代码怎么写?

写CSS切忌眼高手低 - 大耳花蜗牛 - 大耳花蜗牛 
 (虽然,我知道,左对齐会更好看一些...) 

做过设计的人应该分分钟就可以把它搞定。看到图片,自己脑海中首先浮现出  
(设计师)写CSS切忌眼高手低 - 大耳花蜗牛 - 大耳花蜗牛这么个东西,然后,就没有然后了。而在网页里怎么写呢? 似乎也不难,一个背景,background-color;一个居中,text-align;一个下划线,text-decoration;一个字体,微软雅黑...多简单!而初学实际动手写的时候才会发现有点下手困难:是用<p>呢,还是用<span>?或是<li>?内联元素和块级元素控制起来一样吗?怎么才能100%一个像素不差地还原设计图?选哪个才算是一个萝卜对一个坑,毕竟以后会要跟后台对接的,很多规范是极其有必要的,而不能像做设计那样“随意”。

一个看似没啥难度的东西,我花了好些功夫研究了一下,不过收获颇多,至少让我加深了对于这些基础标签的理解。下面是我写的样式,很简单,供自己记录一下吧,有点简单粗暴:

(设计师)写CSS切忌眼高手低 - 大耳花蜗牛 - 大耳花蜗牛
 
作为一个设计师,其优势是在于对设计的表现能力,设计师会对于程序员表现出的诸如“什么字体不都一样吗?” “有必要调整这一个像素吗” “我觉得大小和颜色都无所谓啊”之类的话嗤之以鼻甚至大动肝火。而设计师看CSS后也很容易犯眼高手低的错误,感觉那些只不过是一堆英文单词而已,实则不然,如果不理解浏览器渲染的基础,不知道SEO,不理解每个标签的含义和用法,一定会给以后埋下无数颗难以清理的炸弹。因此,应该从一开始就养成良好编码习惯。

如果说程序员也可以疯狂,那我想设计师一定也可以安静。互补,才能发挥极致功效,我看好设计师在未来网页设计中扮演更重要的角色,我享受码代码时带给我的那种说不上的快感,我也相信我自己可以成功!

  评论这张
 
阅读(83)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017