【问题标题】:What's an HTML code to change the width of an eBay page? [closed]更改 eBay 页面宽度的 HTML 代码是什么? [关闭]
【发布时间】:2016-02-29 01:40:50
【问题描述】:

这是我已经拥有的代码的样子,但我想将其设置为精确的宽度,以便一切看起来都很整洁:

我对 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>

【问题讨论】:

  • 尝试更改font-sizes
  • @LancePreston 我不认为这是他要求的
  • 您发布的代码似乎超出了您的问题的合理范围。请阅读How to Ask 以及如何制作minimal reproducible example;提供 MRE 可帮助用户回答您的问题,并帮助未来的用户与您的问题相关。

标签: html ebay-design-templates


【解决方案1】:

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

【讨论】:

  • 作为长期使用多种设备的买卖双方,我觉得有必要在这方面支持 James。虽然固定宽度将为您提供一个严格的边界,您可以在其中撰写您的列表,但您可能会冒着使用较小的显示器惹恼潜在买家的风险,他们不会费心来回滚动以阅读所有内容。如果关键细节或描述元素在页面右侧以外的屏幕之外,并且客户在出价或购买之前没有阅读(或不知道那里有任何东西),这对卖家来说尤其危险。
【解决方案2】:

如何将您的整个页面放入一个容器中,为该容器提供您想要的宽度并使其居中。在我的 sn-p 中,我给容器的宽度是 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>

【讨论】:

    猜你喜欢
    • 2015-02-22
    • 2020-04-13
    • 1970-01-01
    • 2012-10-11
    • 2016-01-02
    • 2010-09-16
    • 2014-02-01
    • 2016-11-16
    • 2017-01-10
    相关资源
    最近更新 更多