2016-02-29 64 views
0

This is the what the codes I already have looks like, but I want to set it to an exact width so everything looks neat.更改eBay页面宽度的HTML代码是什么?

我对HTML不太好,希望有人能告诉我该放哪里。下面是我的代码:

<p align="center"> 
 
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span></span></p> 
 
<div> 
 
<h2> 
 
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></u></big></span></h2> 
 
</div> 
 
<ul> 
 
<li> 
 
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li> 
 
<li> 
 
<span style="font-size:18px;">Team: Denver Broncos</span></li> 
 
<li> 
 
<span style="font-size:18px;">Player: Peyton Manning</span></li> 
 
<li> 
 
<span style="font-size:18px;">Color: Orange</span></li> 
 
<li> 
 
<span style="font-size:18px;">Brand: Nike</span></li> 
 
<li> 
 
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li> 
 
</ul> 
 
<div> 
 
<div> 
 
<h2> 
 
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u></big></span></h2> 
 
</div> 
 
<ul> 
 
<li> 
 
This is a Large/44 Jersey. These are the measurements:</li> 
 
</ul> 
 
</div> 
 
<p align="center"> 
 
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p> 
 
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276"> 
 
<tbody> 
 
<tr> 
 
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;"> 
 
<p align="center"> 
 
Measurement Chart</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td nowrap="nowrap" style="width:63px;height:20px;"> 
 
<p> 
 
<strong>Country</strong></p> 
 
</td> 
 
<td nowrap="nowrap" style="width:75px;height:20px;"> 
 
<p> 
 
Length</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:66px;height:20px;"> 
 
<p> 
 
Width</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:72px;height:20px;"> 
 
<p> 
 
Sleeves</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td nowrap="nowrap" style="width:63px;height:20px;"> 
 
<p> 
 
<strong>U.S.</strong></p> 
 
</td> 
 
<td nowrap="nowrap" style="width:75px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:66px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:72px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td nowrap="nowrap" style="width:63px;height:20px;"> 
 
<p> 
 
<strong>Europe</strong></p> 
 
</td> 
 
<td nowrap="nowrap" style="width:75px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:66px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:72px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
<div style="clear:both;"> 
 
&nbsp;</div> 
 
<p> 
 
&nbsp;</p> 
 
<p align="center"> 
 
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span></p> 
 
<div> 
 
<div> 
 
<h2> 
 
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u></big></span></h2> 
 
</div> 
 
<ul> 
 
</ul> 
 
<p> 
 
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p> 
 
</div> 
 
<div> 
 
<br> 
 
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br> 
 
We ship Internationally.</span></div> 
 
<p> 
 
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p> 
 
<div> 
 
&nbsp;</div> 
 
<p> 
 
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p> 
 
<div> 
 
<p> 
 
<span style="font-size:18px;">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2-4 Day Shipping in the US</span></p> 
 
<div> 
 
<p> 
 
<span style="font-size:18px;">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Free Tracking</span></p> 
 
<p> 
 
<span style="font-size:18px;">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Insurance for your package up to $50.00</span></p> 
 
<div> 
 
&nbsp;</div> 
 
<p> 
 
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p> 
 
<p> 
 
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p> 
 
<p> 
 
&nbsp;</p> 
 
<div> 
 
<div> 
 
<h2> 
 
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></u></big></span></h2> 
 
</div> 
 
<p> 
 
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p> 
 
</div> 
 
<div> 
 
<div> 
 
<h2> 
 
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></u></big></span></h2> 
 
</div> 
 
<p> 
 
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p> 
 
</div> 
 
<p align="center"> 
 
&nbsp;</p> 
 
<p align="center"> 
 
&nbsp;</p> 
 
<p style="text-align: center;"> 
 
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p> 
 
<p align="center"> 
 
&nbsp;</p> 
 
</div> 
 
</div> 
 
<p> 
 
&nbsp;</p>

+0

尝试更改'font-sizes' – CodeWalker

+0

@LancePreston我不认为这就是他要求的 – Abdel

回答

0

如何投入容器的整个页面,给该容器的你想要多大它是和它为中心的宽度。在我的片段,我给容器50vw的宽度(它等于当前视口宽度的50%)

#container{ 
 
    width:50vw; 
 
    display:block; 
 
    margin:0 auto; 
 
}
<div id="container"> 
 
<p align="center"> 
 
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span></span></p> 
 
<div> 
 
<h2> 
 
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></u></big></span></h2> 
 
</div> 
 
<ul> 
 
<li> 
 
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li> 
 
<li> 
 
<span style="font-size:18px;">Team: Denver Broncos</span></li> 
 
<li> 
 
<span style="font-size:18px;">Player: Peyton Manning</span></li> 
 
<li> 
 
<span style="font-size:18px;">Color: Orange</span></li> 
 
<li> 
 
<span style="font-size:18px;">Brand: Nike</span></li> 
 
<li> 
 
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li> 
 
</ul> 
 
<div> 
 
<div> 
 
<h2> 
 
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u></big></span></h2> 
 
</div> 
 
<ul> 
 
<li> 
 
This is a Large/44 Jersey. These are the measurements:</li> 
 
</ul> 
 
</div> 
 
<p align="center"> 
 
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p> 
 
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276"> 
 
<tbody> 
 
<tr> 
 
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;"> 
 
<p align="center"> 
 
Measurement Chart</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td nowrap="nowrap" style="width:63px;height:20px;"> 
 
<p> 
 
<strong>Country</strong></p> 
 
</td> 
 
<td nowrap="nowrap" style="width:75px;height:20px;"> 
 
<p> 
 
Length</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:66px;height:20px;"> 
 
<p> 
 
Width</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:72px;height:20px;"> 
 
<p> 
 
Sleeves</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td nowrap="nowrap" style="width:63px;height:20px;"> 
 
<p> 
 
<strong>U.S.</strong></p> 
 
</td> 
 
<td nowrap="nowrap" style="width:75px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:66px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:72px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td nowrap="nowrap" style="width:63px;height:20px;"> 
 
<p> 
 
<strong>Europe</strong></p> 
 
</td> 
 
<td nowrap="nowrap" style="width:75px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:66px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
<td nowrap="nowrap" style="width:72px;height:20px;"> 
 
<p> 
 
&nbsp;</p> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
<div style="clear:both;"> 
 
&nbsp;</div> 
 
<p> 
 
&nbsp;</p> 
 
<p align="center"> 
 
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span></p> 
 
<div> 
 
<div> 
 
<h2> 
 
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></u></big></span></h2> 
 
</div> 
 
<ul> 
 
</ul> 
 
<p> 
 
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p> 
 
</div> 
 
<div> 
 
<br> 
 
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br> 
 
We ship Internationally.</span></div> 
 
<p> 
 
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p> 
 
<div> 
 
&nbsp;</div> 
 
<p> 
 
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p> 
 
<div> 
 
<p> 
 
<span style="font-size:18px;">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2-4 Day Shipping in the US</span></p> 
 
<div> 
 
<p> 
 
<span style="font-size:18px;">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Free Tracking</span></p> 
 
<p> 
 
<span style="font-size:18px;">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Insurance for your package up to $50.00</span></p> 
 
<div> 
 
&nbsp;</div> 
 
<p> 
 
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p> 
 
<p> 
 
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p> 
 
<p> 
 
&nbsp;</p> 
 
<div> 
 
<div> 
 
<h2> 
 
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></u></big></span></h2> 
 
</div> 
 
<p> 
 
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p> 
 
</div> 
 
<div> 
 
<div> 
 
<h2> 
 
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></u></big></span></h2> 
 
</div> 
 
<p> 
 
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p> 
 
</div> 
 
<p align="center"> 
 
&nbsp;</p> 
 
<p align="center"> 
 
&nbsp;</p> 
 
<p style="text-align: center;"> 
 
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p> 
 
<p align="center"> 
 
&nbsp;</p> 
 
</div> 
 
</div> 
 
<p> 
 
&nbsp;</p> 
 
</div>

1

我不会推荐一个固定的宽度。在移动设备上,您的模板不会显示得很好。我会建议你看看一个简单的响应式网格CSS布局,如骨架 - 它将调整它的大小,所有的浏览器的宽度,在eBay工作正常!

+0

作为使用多种设备的长期买方和卖方,我感到有必要在此基础上支持James。虽然固定宽度会给你一个严格的界限,你可以在其中编写你的列表,但你可能会冒险让潜在的买家使用较小的显示器,他们不会为了阅读所有内容而反复滚动来滚动。如果关键细节或说明元素超出页面的右侧,并且在投标或购买之前客户没有阅读(或者不知道那里有任何东西),这对卖家可能是特别危险的。 –