0

我正在尝试在 Magento 上设置销售页面的样式。这是页面: http: //petpresto.com.au/why-choose-us/

我去 CMS > Pages 并创建一个看起来很棒的页面。它全部居中并很好地垂直对齐。但是当我发布页面并在网站上实时查看它时,它看起来很糟糕。我究竟做错了什么?

我需要帮助的细节:

  1. 垂直对齐单元格表格中的文本
  2. 居中对齐页面
  3. 将页面背景设为白色
  4. 文本和图像响应(如果可能?)
  5. 在 chrome 上,前三个图像的尺寸缩小了,但在 firefox 或 explorer 上没有。为什么会发生这种情况,我该如何解决?

我要疯了,试图让它看起来像半体面,请帮忙!

屏幕截图:这是编辑器的屏幕截图,显示了它的外观。它显示了前几个表格/单元格,向下滚动时页面的其余部分看起来相似。

在此处输入图像描述

下面粘贴的代码的完整副本。

<p style="text-align: center;"><strong><span style="font-size: xx-large;">Why Choose Us?</span></strong></p>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Free Express Shipping" src="http://petpresto.com.au/images/free-delivery256.jpg" alt="Free Express Shipping" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">FREE Express Shipping</span></strong></p>
<p>You get FREE&nbsp;<strong>Express Delivery</strong>&nbsp;with Australia Post.</p>
<p>Anything you order by 4pm (AEST) will be shipped the same day. Tracking number will be provided so you can follow the parcel on the Australia Post website.</p>
<p>Items under 1kg and in metro areas will arrive the next business day, others a maximum of three days.&nbsp;Super fast!</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Money Back Guarantee" src="http://petpresto.com.au/images/money-back-guarantee256.png" alt="Money Back Guarantee" width="256" height="239" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Money Back Guarantee</span></strong></p>
<p>You're covered by our famous FULL 100% No Questions Asked Money Back Guarantee!</p>
<p>If you want your money back just return the product within 28 days and we'll give you a<strong> full refund, no questions asked.</strong> Additional shipping is the buyers responsibility.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Two Year Warranty" src="http://petpresto.com.au/images/2-year-warranty256.png" alt="Two Year Warranty" width="256" height="195" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Two Year Warranty</span></strong></p>
<p>You get a&nbsp;2 Year Warranty&nbsp;covering any defects.</p>
<p>We go to great lengths to ensure our products outlast the competition in every way - but in the rare case that something does go wrong just contact us for a&nbsp;<strong>free replacement or refund</strong>.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Warehouse Pricing" src="http://petpresto.com.au/images/warehouse256.png" alt="Warehouse Pricing" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Discount Warehouse Price</span></strong></p>
<p>Your products are<strong> shipped&nbsp;direct from our Sydney warehouse.</strong></p>
<p>This cuts out any middle man and reduces business expenses.</p>
<p>All of those savings are then passed on to you. So you get the lowest possible price!</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Australian Business" src="http://petpresto.com.au/images/Australia-Flag256.png" alt="Australian Business" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Australian Business</span></strong></p>
<p>We are&nbsp;100% Australian owned and operated.</p>
<p>Buying Australian gives you peace of mind. We are just around the corner if you need any help.</p>
<p>Plus you get that warm fuzzy feeling for supporting a genuine Ozzie business.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="All Cards Welcome" src="http://petpresto.com.au/images/visa-mastercard256.png" alt="All Cards Welcome" width="256" height="281" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Safe and Secure Payment</span></strong></p>
<p>Your payment is safley and securley processed through our PCI-DSS certified payment processor.</p>
<p>We accept all major cards including Visa, Mastercard, American Express, Dinners Club, and more.</p>
</td>
</tr>
</tbody>
</table>
4

2 回答 2

1

检查下面的代码,看看它是否符合您的需求。

.std table {
    float:none; 
    margin: auto;
 }

.std img {
    height:138px;
    width:138px;
    /* max-width: 100%; remove this */
}

示例小提琴

现在有一件事我不太明白......你想要背景颜色是白色还是不?因为如果你#f7f7f6; 使用你正在使用的,你的一些图像会出现一些问题,因为并非所有图像都是透明的,可以与背景融为一体。

于 2013-10-08T05:45:02.810 回答
0

好的,

在您拥有的代码中:

<table cellspacing="10" border="0" align="center" style="width: 600px;">

为。。改变:

<table cellspacing="10" border="0" align="center" style="width: 600px; float:none; margin: auto;">

这解决了你的问题。我建议为 table 标签创建一个类,并将这个 css 放在一个文件中。

干杯,

于 2013-10-08T02:50:21.337 回答