美工与程序猿的Web工作怎样做到相对分离？

最新推荐文章于 2024-11-14 10:50:04 发布

weixin_33877092

最新推荐文章于 2024-11-14 10:50:04 发布

阅读量94

点赞数

文章标签： xhtml java

公司某老系统使用的是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的命名规则就可以。

本人拙见，希望对各位实际工作有帮助。最后效果例如以下图。还不错吧？