美工与程序员的Web工作如何做到相对分离?
2014-04-24 15:19
323 查看
公司某老系统使用的是asp,大量的asp脚本夹在页面中,改个小样式美工就得拉着程序员,严重占用资源。使用java比较好解决,freemarker之类的模板语言,整个宏传参就可以做到相对分离,asp的还真没做过,于是便想到了使用css,遭到同事的反对,觉得不可行,我认为是可行的,只是需要美工和程序员按照约定俗成的一些命名方式即可搞定,代码如下:
正如各位所看到的,数据显示区域没有任何样式,这个区域由开发人员完成;美工完成CSS的编写即可;美工和程序员只需要相互确定好class的命名规则即可。本人拙见,希望对各位实际工作有帮助。最后效果如下图,还不错吧?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>谁说这样不行的?</title> </head> <style> body{ font-size:12px} #lb1{ margin:0 auto; width:500px; } #lb1 .lb{ width:100%; border: 1px dashed #336633; border-bottom:none; } #lb1 .lb td{ height:26px; border-bottom: 1px inset #999999; } #lb1 .lb .td1{ width:30px; text-align:center; border-right: 1px solid #000000; } #lb1 .lb .td2{ padding-left:10px; } #lb1 .ym{ width:100%; border-bottom: 1px inset #999999; } #lb1 .ym .td1{ text-align:right; } #lb1 .ym .td2{ width:40px; text-align:center; } #lb1 .ym .td3{ width:40px; text-align:center; } #lb1 .ym .td4{ text-align:left; } </style> <body> <div id="lb1"> <table class="lb"> <tr> <td class="td1">1</td> <td class="td2">南京护士被打罗生门:“心因性瘫痪”受质疑</td> </tr> <tr> <td class="td1">2</td> <td class="td2">哈登被惹怒更衣室呛声记者:你在哪个媒体工作?</td> </tr> <tr> <td class="td1">3</td> <td class="td2">阿拉伯茶被指新型毒品毒效惊人</td> </tr> <tr> <td class="td1">4</td> <td class="td2">从建军到强军,从绿水到远洋</td> </tr> <tr> <td class="td1">5</td> <td class="td2">让孩子属于社会的五个乌托邦寄想</td> </tr> <tr> <td class="td1">6</td> <td class="td2">重庆追诉首批打黑刑讯逼供案</td> </tr> <tr> <td class="td1">7</td> <td class="td2">南京护士被打罗生门:“心因性瘫痪”受质疑</td> </tr> <tr> <td class="td1">8</td> <td class="td2">媒体曝核电领域高层落马原因:涉泄露国家机密</td> </tr> <tr> <td class="td1">9</td> <td class="td2">李连杰笑对贪三亿指责 壹基金别步红会后尘</td> </tr> <tr> <td class="td1">10</td> <td class="td2">袁伊文:农民“私立政府”案不是笑话是警报</td> </tr> </table> <table class="ym"> <tr> <td class="td1">首页</td> <td class="td2">上一页</td> <td class="td3">下一页</td> <td class="td4">尾页</td> </tr> </table> </div> </body> </html>
正如各位所看到的,数据显示区域没有任何样式,这个区域由开发人员完成;美工完成CSS的编写即可;美工和程序员只需要相互确定好class的命名规则即可。本人拙见,希望对各位实际工作有帮助。最后效果如下图,还不错吧?
相关文章推荐
- 2014关于CVTE及Tencent三次面试的琐碎记录
- 为程序员开一剂提高职业素养的良方
- 白领必看!职场不成熟的十种表现!
- 115个Java面试题和答案——终极列表(下)
- 程序员学习资料分享---爱分享的程序员(新浪微博)
- 中国特色程序员的「钱途」
- 九度题目1528:最长回文子串 腾讯二面面试算法题
- 游戏程序员养成计划
- 谈谈今天的一次面试
- 谷歌招聘主管教你如何面试
- 一道淘汰85%面试者的百度开发者面试题
- 一道淘汰85%面试者的百度开发者面试题
- 程序员教你设置密码
- 怎样做个理智的程序员?
- 一道简单的百度面试题遇到的问题
- 中国特色程序员的“钱途”
- 基于类的软件复用技术
- 黑马程序员——可变参数和重载和重写
- 算法面试题
- 黑马程序员_java编程基础2