将 PayPal 按钮变成图片说明

Posted

技术标签:

【中文标题】将 PayPal 按钮变成图片说明【英文标题】：Turning PayPal Button Into an Image Caption 【发布时间】：2015-03-30 07:39:13 【问题描述】：

我的页面目前是这样的：http://i.imgur.com/RRriMuu.jpg

我尝试将包含“Wesson”、下拉菜单和“立即购买”的按钮变成图片说明，这样它就可以直接位于金毛猎犬 (Wesson) 的图画下方。它不仅不在图像下方居中，而且还将其他图像推到了右侧。理想情况下，我实际上希望按钮位于图像的正上方，为此我在页面上创建了额外的空间。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--

#banner width:100%
#banner img width:100%;height:auto

nav width:100%;display:block;
nav ul list-style-type:none;margin:0;padding:0;text-align:center;
background-color:#222419
li display:inline-block;background-color:#222419;
nav a line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;
nav a:hover text-decoration:none

afloat:left;
 margin-right:58px;
 margin-left:58px;
 color:#000;
 text-decoration:none;


body  background-image:url("background1.jpg");
   background-size:1710px 1405px;
   background-repeat:no-repeat;



.white_bg  background-color:#ffffff;
        padding: 3px;


.print   -webkit-transform:rotate(-15deg);
      transform:rotate(-15deg);


.print2   -webkit-transform:rotate(15deg);
       transform:rotate(15deg);


#wesson   text-align:center;width:250px;
#stanley  (text-align:center;width:250px;

-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>

<body>

<header>
<nav> 
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" 
  title="DrawYourPetsBanner2">
</div>

<div>
<ul>
<li><a href="index.html"><strong>HOME</strong></a></li>
<li><a href="contact.html"><strong>CONTACT</strong></a></li>
<li><a href="gallery.html"><strong>GALLERY<strong></a></li>
<li><a href="store.html"><strong>STORE</strong></a></li>
</ul>
</div>

</nav>
</header>

<section>
<aside>
</aside>

<article>


<p style="text-align:center;font-family:arial">
<font size="4"><strong>Prints, coffee mugs, magnets, 
and postcards are available for every drawing!
</strong>
</font>
</p>

<img class="print" style="float:left;margin-left:210px;
margin-right:25px;margin-top:50px"
 src="wesson_print.jpg"  weight="160px">
<img class="print2" style="float:left;margin-right:70px" 
src="mug.png"  weight="290px">
<img class="print" style="float:left;margin-right:125px;margin-top:55px" 
src="magnet.jpg"  weight="160px">
<img class="print2" style="float:left;margin-right:20px;
margin-top:85px" src="postcard5.jpg"  weight="120px">
<p style="clear:both;">

<br>
<br>
<br>
<br>
<br>

</p>

<figure>
<img src="wesson.jpg"  weight="260" style="float:left;
margin-left:250px;margin-right:55px">
<figcaption>
<form action="https://www.paypal.com/cgi-bin/webscr" 
method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="J4TLYQ4FUR6BC">

<table style="text-align:center">
<tr><td><input type="hidden" name="on0" value="Wesson">
<p style="text-align:center;font-family:arial">
<font size="4"><strong>Wesson</strong>
</font>
</p>
</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="Unframed Print">Unframed Print $50.00 USD</option>
<option value="Coffee Mug">Coffee Mug $10.00 USD</option>
<option value="Refrigerator Magnet">Refrigerator Magnet 
$4.00 USD</option>
<option value="Postcard">Postcard $1.00 USD</option>
</select> 
</td>
</tr>
</table>
<br>
<div style="float:left;margin-left:50px;">
<input type="hidden" name="currency_code" value="USD">
<input type="image" 
src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif" 
border="0" name="submit" 
>
<img  border="0" 
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" 
 >
</div>
</form>
</figcaption>
</figure>
</div>

<img src="stanley.jpg"  weight="260" 
style="float:left;margin-right:55px">
<img src="archibald.jpg"  weight="260" 
style="float:left;margin-right:50px">
<p style="clear:both;">

<br>
<br>
<br>
<br>

<img style="float:left;margin-left:525px;margin-right:50px"
 src="maggie.jpg"  weight="300">


<br>
<br>

</article>

</section>

<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" >
</div>
</footer>

</body>
</html>

如果您发现有什么问题，请告诉我。谢谢！

【问题讨论】：

我现在没有时间为您整理，但您需要为每个产品创建一个容器 div。然后，该容器内将有 2 个 div，一个用于图形，一个用于 PayPal 按钮。您可以在 div 上设置宽度、浮动、边距等，以便您的图像和按钮彼此重叠，按钮居中，然后您可以为每个产品重复该容器。容器的右侧或左侧会有一些边距，以便将它们均匀地隔开。 【参考方案1】：

我希望我明白了，你想做什么：

    将标题、下拉菜单和按钮放在图片上方。 将元素水平居中，以图像的宽度为基准。 对每张图片重复此模式 将图像彼此相邻排列在同一高度上。

为此，您需要某种包装器。 这是一个过于简单的例子：

HTML

<div class="wrapper">

  <div class="item">
    <div class="item-info">
      <h1>Wesson</h1>
      <!-- Add Paypal form code here -->
    </div>
    <img src="wesson.jpg">
  </div>

  <!-- Repeat the .item code for the next item -->

</div>

CSS

.item 
  float:left; /* Enable the next item to sit next to this one */
  margin-right: 10px; /* The margin between this and the next item */
  text-align: center; /* Center all text inside the item */


/* Avoid extra space after the last item */
.item:last-of-type  margin-right: 0; 

/* Center the dropdown inside the item */
.item select  margin: 0 auto; 

/* A better way would be to give the input a class like .button and use this selector here */
.item input[type="image"] 
  display: block; /* Make it a block level element to force it on its own line */
  margin: 0 auto; /* Center the button inside the item */

还有一点代码解释： 我将每个内容块称为一个项目。该项目包括图像、标题和贝宝表单。容器 div (.item) 缩小到最大子元素的宽度。在这种情况下，图像。 其他所有项目都在 div 内居中。你得到的是一个块，它扩展到其最宽的子元素并根据需要扩展高度。

现在可以为下一个元素重复此代码。这两个都浮动到左侧，如果父容器 (.wrapper) 足够宽，它们可以彼此相邻。 .wrapper 用于设置项目的边界。您可以为其添加边距以定义这些元素在页面上的位置。如果它足够宽以将 3 个项目彼此相邻放置，它会这样做，但一旦它变窄为 3 个，就会进入下一行。

一个活生生的例子 我在 codepen 上整理了一个示例，其中包含您的部分代码。 你可以在这里看到它： http://codepen.io/anon/pen/BywgqL?editors=110

【讨论】：

以上是关于将 PayPal 按钮变成图片说明的主要内容，如果未能解决你的问题，请参考以下文章

PayPal 智能按钮将项目描述添加到按钮

word里怎么把照片上文字自动说明？

VB.Net PayPal 集成说明

是否可以将金额转回我的网站

如何用matlab将彩色图片变成黑白图片

[第4组]用例文档+功能说明书+技术说明书