个人中心
gpt4 book ai didi

html - 需要帮助调整站点图像

转载 作者：行者123 更新时间：2023-11-28 12:43:54 25 4
gpt4 key购买 nike

我有一个网站 http://restaurantinc.com/subscriptions我试图让我的图像能够完全显示过去的问题。由于某种原因，问题只有一半出现，我不确定我做错了什么。

但是我的最终结果是.. 我想将图像放在那里并使其链接到此页面上的另一个站点。我将如何使用以下 html 和 css 代码来做到这一点？

<html>
  <head>
<meta http-equiv="pragma" content="no-cache"/> 
    <meta http-equiv="expires" content="-1"/>
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"/>
    <meta name="author" content="Certain, Inc."/> 
    <meta name="Description" content=" Online Registration Form"/> 
    <meta name="Keywords" content=""/> 
    <title>Restaurantinc Subscriptions</title>
    </head>
  <body>
<div class="page-content">
<a href="index.html" id=bckgrnd></a>
<link rel="stylesheet" type="text/css" href="http://restaurantinc.com/assets/css/page-content2.css">
<div class="wrapper">
    <div id="header">
<img src="assets/images/RestINC_subscription_800x200.jpg"> 
      <div class="form_container" style="font-family: arial, sans-serif; font-size: .7em;">
        <form action="/" method="post" style="font-family: arial, sans-serif;">
<p style="padding-top: 22px; margin-bottom: 0px;"><b>Fields in Bold are required.</b></p><br />
          <label for="first_name" class="left"><b>First Name*</b></label>
          <input type="text" name="first_name" size="12" id="first_name" class="right" required>
          <label for="last_name" class="left"><b>Last Name*</b></label>
          <input type="text" name="last_name" size="12" id="last_name" class="right" required>
          <br />
          <label for="Address" class="left"><b>Address*</b></label>
          <input type="text" name="address" size="49" id="Address" class="right" required>
          <br />
          <label for="city" class="left"><b>City</b>*</label>
          <input type="text" name="city" id="city" class="right"  required>
          <label for="state" class="left"><b>State*</b></label>
<select name="state">
    <option value="AL">AL</option>
    <option value="AK">AK</option>
    <option value="AZ">AZ</option>
    <option value="AR">AR</option>
    <option value="CA">CA</option>
    <option value="CO">CO</option>
    <option value="CT">CT</option>
    <option value="DE">DE</option>
    <option value="DC">DC</option>
    <option value="FL">FL</option>
    <option value="GA">GA</option>
    <option value="HI">HI</option>
    <option value="ID">ID</option>
    <option value="IL">IL</option>
    <option value="IN">IN</option>
    <option value="IA">IA</option>
    <option value="KS">KS</option>
    <option value="KY">KY</option>
    <option value="LA">LA</option>
    <option value="ME">ME</option>
    <option value="MD">MD</option>
    <option value="MA">MA</option>
    <option value="MI">MI</option>
    <option value="MN">MN</option>
    <option value="MS">MS</option>
    <option value="MO">MO</option>
    <option value="MT">MT</option>
    <option value="NE">NE</option>
    <option value="NV">NV</option>
    <option value="NH">NH</option>
    <option value="NJ">NJ</option>
    <option value="NM">NM</option>
    <option value="NY">NY</option>
    <option value="NC">NC</option>
    <option value="ND">ND</option>
    <option value="OH">OH</option>
    <option value="OK">OK</option>
    <option value="OR">OR</option>
    <option value="PA">PA</option>
    <option value="RI">RI</option>
    <option value="SC">SC</option>
    <option value="SD">SD</option>
    <option value="TN">TN</option>
    <option value="TX">TX</option>
    <option value="UT">UT</option>
    <option value="VT">VT</option>
    <option value="VA">VA</option>
    <option value="WA">WA</option>
    <option value="WV">WV</option>
    <option value="WI">WI</option>
    <option value="WY">WY</option>
</select>   


          <label for="zip" class="left"><b>Zip*</b></label>
          <input type="text" name="zip" id="zip" size="5" class="right" required>
          <br />
       <script type="text/javascript">
    function confirmPass() {
        var pass = document.getElementById("email").value
        var confPass = document.getElementById("Email Confirmation").value
        if(pass != confPass) {
            alert('Wrong confirm email !');
        }
    }
</script>
<label for="email" class="left"><b>Email*</b></label>
          <input type="email" name="email" id="email" size="52" class="right" required matches email_confirmation>
          <br />
          <label for="Email Confirmation" class="left"><b>Email Confirmation*</b></label>
          <input type="email" name="email_confirmation" id="Email Confirmation" size="37" class="right" onblur="confirmPass()"/ required>
          <br />   
       <style type="text/css">
#tow1 { display: none; padding: 5px;  }
#newdiv1 { display:none; padding: 5px; }

</style>
<script type="text/javascript">
    function showDiv(a) {
        div = document.getElementById(a);
        div.style.display = "block";
    }
</script>

</head>
<body>
Are you a Restaurant operator?&nbsp;<br />

<input type="checkbox" name= "restaurant_yes" onclick="showDiv('tow1');" />Yes    
<input type="checkbox" name= "restaurant_no" onclick="showDiv('newdiv1');" />No<br />


<div id="tow1">
    Establishment Name: <input type="text" name="establishment_name"><br />
<label for="Address" class="left"><b>Address<input type="checkbox" name="vehicle" value="Bike">(Check if same as above)
</label>
          <input type="text" name="address2" size="25" id="Address" class="right" ></b>

    <label for="city" class="left"><b>City</b>*</label>
          <input type="text" name="city2" id="city" class="right"  >
          <label for="state" class="left"><b>State*</b></label>
<select name="state">
    <option value="AL">AL</option>
    <option value="AK">AK</option>
    <option value="AZ">AZ</option>
    <option value="AR">AR</option>
    <option value="CA">CA</option>
    <option value="CO">CO</option>
    <option value="CT">CT</option>
    <option value="DE">DE</option>
    <option value="DC">DC</option>
    <option value="FL">FL</option>
    <option value="GA">GA</option>
    <option value="HI">HI</option>
    <option value="ID">ID</option>
    <option value="IL">IL</option>
    <option value="IN">IN</option>
    <option value="IA">IA</option>
    <option value="KS">KS</option>
    <option value="KY">KY</option>
    <option value="LA">LA</option>
    <option value="ME">ME</option>
    <option value="MD">MD</option>
    <option value="MA">MA</option>
    <option value="MI">MI</option>
    <option value="MN">MN</option>
    <option value="MS">MS</option>
    <option value="MO">MO</option>
    <option value="MT">MT</option>
    <option value="NE">NE</option>
    <option value="NV">NV</option>
    <option value="NH">NH</option>
    <option value="NJ">NJ</option>
    <option value="NM">NM</option>
    <option value="NY">NY</option>
    <option value="NC">NC</option>
    <option value="ND">ND</option>
    <option value="OH">OH</option>
    <option value="OK">OK</option>
    <option value="OR">OR</option>
    <option value="PA">PA</option>
    <option value="RI">RI</option>
    <option value="SC">SC</option>
    <option value="SD">SD</option>
    <option value="TN">TN</option>
    <option value="TX">TX</option>
    <option value="UT">UT</option>
    <option value="VT">VT</option>
    <option value="VA">VA</option>
    <option value="WA">WA</option>
    <option value="WV">WV</option>
    <option value="WI">WI</option>
    <option value="WY">WY</option>
</select>   


          <label for="zip" class="left"><b>Zip*</b></label>
          <input type="text" name="zip2" id="zip" size="5" class="right" >


</div><br />
<style type="text/css">
#tow { display: none; padding: 5px;  }
#newdiv { display:none; padding: 5px; }
</style>
<script type="text/javascript">
    function showDiv(a) {
        div = document.getElementById(a);
        div.style.display = "block";
    }
</script>

</head>
<body>


Are you a Reinhart Customer?&nbsp;<br />

<input type="checkbox" name="customer_yes"id="customer_yes" onclick="showDiv('tow');" />Yes    
<input type="checkbox" name="customer_no" id="customer_no" onclick="showDiv('newdiv');" />No<br />


<div id="tow">
    Customer Number: <input type="text" name="customer_number">

</div>
<div id="newdiv">
   Would you like more info about Reinhart</br>and becoming a customer&nbsp;<input type="checkbox" name="info_yes" value="Bike">Yes 
       <input type="checkbox" name="info_no"  value="Car">No</br>
</div><br />
<input type="checkbox" name="signmeup" value="Bike">&nbsp;Sign me up for a FREE 1 YEAR SUBSCRIPTION &</br> follow up communications!&nbsp;(Monthly newsletter)</br><br />
           <head>


<input type="submit" value="Register" class="full">
<footer style="margin: 0px auto; width: 800px;">
</form>
  <td><font size="2">Limited time offer. Retail Price: $5.99 per issue</td><br />
  <td><font size="2">*Offer expires December 31, 2014.</td>     

</tr>

</div>

        </td>
        </tr><!-- End row in page table -->
        <INPUT TYPE="Hidden" NAME="PKwebID" VALUE="0x23952858"> </table>


</div><!-- #page-content -->

<p style="width: 800px; font-family: arial, sans-serif; font-size: .7em; padding: 80px 0 0 210px;">


        <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try { var pageTracker = _gat._getTracker("UA-467490-6"); pageTracker._trackPageview(); } catch(err) {}
        </script>
    <br clear="left"></body></html>

CSS

.page-content{
  background: url('http://restaurantinc.com/assets/images/RestINC_subscription_350x400.jpg') no-repeat;
  width: 800px;
  height: 775px;
  margin-left:200px;
  margin-top:00px;
}
.form_container{
  padding-top: 0%;
  width: 400px;
  height: 400px;
  float:right;
}

最佳答案

改变:

.page-content{
  background: url('http://restaurantinc.com/assets/images/RestINC_subscription_350x400.jpg') no-repeat;
  width: 800px;
  height: 775px;
  margin: 0 auto;
}

这将使页面内容居中。

要让您的图像链接到另一个页面，请将其包裹在 anchor 标记中:

<a href="urlLink"><img src="assets/images/RestINC_subscription_800x200.jpg"></a>

关于html - 需要帮助调整站点图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25674104/

25 4 0
文章推荐： html - 保留中间 1024px 并拉伸(stretch)侧栏以填充页面？
文章推荐： javascript - JS/JQuery - 如果输入字段是第一个和/或最后一个字符，则删除空格
文章推荐： json - 从 firebase 检索特定数据
文章推荐： javascript - 如何让它像jquery一样？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com