Question

我想在公司CHM手册的首页上放置公司标题。因为用户能够缩放CHM，所以页眉应与手册的宽度缩放。高度不应成比例。问题在于页眉的左侧和右侧都必须保持完整，因此仅页眉的中心应缩放。左侧有一个切角，切角不能改变。右侧包含图像。

图片：

是否可以使用CSS或HTML（使用图像或表格）来执行此操作？

编辑：

我仍然有2个无法解决的问题。希望您能提供更多帮助。编译成CHM文件后，header_center上的背景颜色也会有一个下划线。出于可见性，它已变成红色。同样，当我缩放CHM窗口时，header_left和header_center之间出现空白，我也不知道为什么。如果我为所有3个标题提供背景颜色，则可以解决此问题，但是由于图像的原因，我不想在header_right下放置一行。有任何想法吗？

这些图像是现阶段的结果：

Answer 1

您知道，CHM就像一种ZIP格式，可能包含HTML和CSS。下面，我展示了使用图像的一种可能性。尝试并根据您的需要进行更改（请参见下面的HTML）。 <colgroup>中的背景色仅用于演示目的。如果中间有文字，则必须将公司横幅中的相应颜色设置为背景颜色。

我使用的图像：

确保外部CSS文件，例如design.css在项目级别结构中，并添加到HHP项目文件的[FILES]部分。您可以使用以下方式打开此* .hhp文件：用记事本++添加文件。如果文件在[FILES]节中列出，则编译器会将它们包括在CHM文件中。

[FILES] 
welcome.htm 
design.css
How_to_extend\extend_menu.htm 
How_to_extend\power_function.htm 
images\gui_screenshot.jpg

HTML和CSS：

   <html>
     <head>
       <meta name="generator"
       content="HTML Tidy for HTML5 (experimental)" />
       <title></title>
       <style>

   .header {
     width: 100%;
     border-collapse: collapse;
     /*border: 1px solid black;*/
   }

   .header_left{
    width: 81px;
   }

   .header_center{
    /*background-image: url("help-info-de-right-part.png");*/
    /*background-color: #ff33cc;*/
    background-color: #e0e0e0;
    text-align: center;
   }

   .header_right{
    width: 82px;
   }

   .header td {
    padding: 0;
   }

   </style>
   </head>

     <body>
       <table class="header">
         <colgroup>
           <col style="background-color:green;" />
           <col style="background-color:red;" />
           <col style="background-color:yellow;" />
         </colgroup>
         <tr>
           <td class="header_left">
             <img src="help-info-de-left-part.png" />
           </td>
           <td class="header_center">
             <img src="help-info-de-center-part.png" />
           </td>
           <td class="header_right">
             <img src="help-info-de-right-part.png" />
           </td>
         </tr>
       </table>
       <h1>Heading 1</h1>
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
       aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
       takimata sanctus est Lorem ipsum dolor sit amet.</p>
     </body>

   </html>

在CHM中缩放图像或表格的一部分

1 个答案: