美工与程序员的Web工作如何做到相对分离？

最新推荐文章于 2016-07-18 20:59:16 发布

Mr_Chenph

最新推荐文章于 2016-07-18 20:59:16 发布

阅读量1.4k

点赞数

分类专栏： Web WebCool-让一切美好起来文章标签： web css asp 分工

本文链接：https://blog.csdn.net/yueritian/article/details/24415349

版权

Web 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

WebCool-让一切美好起来

11 篇文章 0 订阅

订阅专栏

公司某老系统使用的是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的命名规则即可。本人拙见，希望对各位实际工作有帮助。最后效果如下图，还不错吧？

Mr_Chenph

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
美工与程序员的Web工作如何做到相对分离？

公司某老系统使用的是asp，大量的asp脚本夹在页面中，改个小样式美工就得拉着程序员，严重占用资源。使用java比较好解决，freemarker之类的模板语言，整个宏穿参就可以做到相对分离，asp的还真没做过，于是便想到了使用css，遭到同事的反对，觉得不可行，我认为是可行的，只是需要美工和程序员按照约定俗成的一些命名方式即可搞定，代码如下：谁说这样不行的？body{ font-
复制链接

扫一扫