美工与程序猿的Web工作怎样做到相对分离?
公司某老系统使用的是asp,大量的asp脚本夹在页面中。改个小样式美工就得拉着程序猿,严重占用资源。使用java比較好解决,freemarker之类的模板语言,整个宏传參就能够做到相对分离。asp的还真没做过,于是便想到了使用css,遭到同事的反对。觉得不可行,我觉得是可行的,仅仅是须要美工和程序猿依照约定俗成的一些命名方式就可以搞定,代码例如以下:
<!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的命名规则就可以。
本人拙见,希望对各位实际工作有帮助。最后效果例如以下图。还不错吧?