Html Magento页面格式_Html_Magento

Html Magento页面格式

html magento

Html Magento页面格式,html,magento,Html,Magento,我正在尝试在Magento上设计一个销售页面。以下是网页：我进入CMS>页面，创建一个看起来很棒的页面。它是所有的中心和垂直对齐很好。但是当我发布页面并在网站上现场查看时，它看起来很可怕。我做错了什么我需要以下方面的帮助：垂直对齐单元格和表格中的文本居中对齐页面使页面背景为白色文本和图像响应（如果可能？）在chrome浏览器上，前三张图片的大小缩小了，但在firefox或explorer上没有缩小。为什么会发生这种情况？我该如何解决我要发疯了，想让这个看起来有点像样，请帮帮我屏

我正在尝试在Magento上设计一个销售页面。以下是网页：

我进入CMS>页面，创建一个看起来很棒的页面。它是所有的中心和垂直对齐很好。但是当我发布页面并在网站上现场查看时，它看起来很可怕。我做错了什么

我需要以下方面的帮助：

垂直对齐单元格和表格中的文本

居中对齐页面

使页面背景为白色

文本和图像响应（如果可能？）

在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点（AEST）之前订购的任何商品都将在当天发货。将提供追踪号码，以便您可以在澳大利亚邮政网站上追踪包裹
1kg以下和地铁区域的物品将在下一个工作日到达，其他物品最多三天到达。超快

退款保证

您可以享受我们著名的全额100%无问题退款保证
如果您想要退款，只需在28天内退回产品，我们将给予您全额退款，不问任何问题。额外运费由买家负责

两年保修期

您可以获得2年保修，保修范围包括任何缺陷
我们竭尽全力确保我们的产品在各方面都能在竞争中脱颖而出，但在极少数情况下出现问题，请联系我们，免费更换或退款

折扣仓库价格

您的产品直接从我们的悉尼仓库发货。
这减少了中间人，减少了业务开支
所有这些储蓄都会转嫁给你。所以你可以得到最低的价格

澳大利亚商业

我们是100%的澳大利亚人所有和经营
买澳大利亚货可以让你安心。如果你需要帮助，我们就在附近
另外，你会因为支持一家真正的Ozzie公司而有一种温暖而模糊的感觉

安全可靠的支付

您的付款由safley和securley通过我们的PCI-DSS认证支付处理器处理
我们接受所有主要信用卡，包括Visa卡、万事达卡、美国运通卡、晚餐俱乐部卡等

好的
在您的代码中，您有：

<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放在一个分开的文件中

干杯，
检查下面的代码，看看它是否符合您的需要

.std table { float:none; margin: auto; } .std img { height:138px; width:138px; /* max-width: 100%; remove this */ }

现在有一件事我不太明白。。。您希望背景色是白色还是非白色？因为如果您使用
#f7f6您正在使用的，您的一些图像可能会出现一些问题，因为并非所有图像都是透明的，无法与背景混合。您可以发布一份打印的图片，它应该是什么样子吗？您好，现在已将屏幕截图上载到原始问题谢谢！这解决了中心对齐问题。其他的呢？（白色背景，垂直居中对齐，chrome上的图像大小错误，反应灵敏）谢谢您的帮助，但我不知道如何使用它。我正在将HTML粘贴到Magento编辑器中。这样做时，此CSS不起作用。我确实想要一个白色背景，但不知道怎么做。@user1526396您可以将其添加到位于.Hmmm的文件style.css中，似乎没有任何区别。@user1526396您仍然没有对css文件进行更改以使其生效。如果您无法访问服务器，则需要使用ftp程序（如filezilla），以便对css进行更改。我进行了更改，但在未发生任何更改后删除了更改。我将再次添加它们，然后留给您查看。我在有评论的行和没有评论的行之间打成平局。