zoukankan      html  css  js  c++  java
  • 美工与程序猿的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;
    	500px;
    }
    #lb1 .lb{
     	100%;
    	border: 1px dashed #336633;
    	border-bottom:none;
    }
    #lb1 .lb td{
    	height:26px;
    	border-bottom: 1px inset #999999;
    }
    #lb1 .lb .td1{
    	30px;
    	text-align:center;
    	border-right: 1px solid #000000;
    }
    #lb1 .lb .td2{
    	padding-left:10px;
    }
    #lb1 .ym{
    	100%;
    	border-bottom: 1px inset #999999;
    }
    #lb1 .ym .td1{
    	text-align:right;
    }
    #lb1 .ym .td2{
    	40px;
    	text-align:center;
    }
    #lb1 .ym .td3{
    	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的命名规则就可以。

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

  • 相关阅读:
    Mysql优化
    RabbitMQ教程
    手把手Centos7 安装jenkins详细教程
    FreeMarker学习系列之一
    Vue学习之Vue模拟后台数据
    vuejs学习之新的components组件挂载
    vuejs学习之项目结构解读
    VueJS学习之Vue-cli项目模板
    菜鸟手把手学Shiro之shiro授权流程
    js基石之---es7的decorator修饰器
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5078541.html
Copyright © 2011-2022 走看看