Question

我有一个需要转换为响应式布局的大型网站。问题是以前的开发人员在整个页面和表格中都有内部和内联样式。我已经开始删除这些样式并将它们放在一个外部。这变得非常耗时，并且想知道是否有人有任何建议或替代方法来解决这个问题。

这里有一些我正在处理的事情

<div class="header-top-scroller float-left">


   <table width="1280" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="344" align="left" valign="middle" scope="col"><table width="350" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="86" align="left" style="font-family: Tahoma, Geneva, sans-serif; font-size: 12px; color: #eb3939;" scope="col">LANGUAGES:</th>
            <th width="264" align="left" scope="col">

            <table id="Table_24" width="235" height="23" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td align="center"><a href="#"><img src="images/languages_01.png" alt="" width="38" height="23" border="0" title="english" /></a></td>
                <td align="center"><a href="#"><img src="images/languages_06.png" alt="" width="38" height="23" border="0" title="francais" /></a></td>   
                <td align="center"><a href="#"><img src="images/languages_05.png" alt="" width="38" height="23" border="0" title="deutsch" /></a></td>  
                <td align="center"><a href="#"><img src="images/languages_02.png" alt="" width="38" height="23" border="0" title="espanol" /></a></td>
                <td align="center"><a href="#"><img src="images/languages_03.png" alt="" width="38" height="23" border="0" title="italiano" /></a></td>
                <td align="center"><a href="#"><img src="images/languages_04.png" alt="" width="38" height="23" border="0" title="japanese" /></a></td>


              </tr>
            </table></th>
          </tr>
        </table></th>
        <th width="936" align="right" scope="col">
         ...

Answer 1

Nokogiri可用于删除样式，然后您必须自己重新创建CSS（我认为这样更好，因此您可以编写更清晰/优化的代码）

（顺便说一句，你显示table用于显示语言，所以似乎html部分也需要修复）

将内联和内部样式转换为响应式布局

1 个答案: