將頁面分爲兩部分

我想將頁面橫向分爲兩部分。在上半部分，我想要一個形式，在下半部分我想要一個圖像。但它不起作用。請幫幫我。將頁面分爲兩部分

<!DOCTYPE html> 
<html> 
    <head> 
     <title>JN DIAMONDS</title> 
    </head> 
     <style>  
      #upper { 
       height:50%; 
      } 

      #lower { 
       height: 50%; 
       background-image: r1.jpg; 
      } 
     </style> 
    <body> 
     <div id="upper"> 

      <form align="center" method="POST" action="insert_rough.php"> 
       <fieldset> 
        <legend>JN Patel <b>Rough Diamond</b> Information</legend> 
        <br> 
        <input type="text" name="fname" placeholder="Name" required><br><br> 
        <input type="text" name="twait" placeholder="Total Rough Weight"><br><br> 
        <input type="text" name="cprice" placeholder="1 Carat Price"><br><br> 
        <input type="text" name="dprice" placeholder="Dollar Rate"><br><br> 
        <input type="text" name="date" placeholder="Payment Days" required><br><br> 
        <input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br> 
       </fieldset> 
     </div> 
     <body> 
      <div id="lower"></div> 
     </body> 
      </form> 
    </body> 
</html>

來源

2015-10-17 John

我編輯了您的文章以使其可以被人類閱讀（這就是您將在這裏找到的主要內容）。我很確定把一個'body'標籤嵌入另一個標籤是一個壞主意。 – sodawillow

我沒有得到backgrund img..will你請幫助 – John

這兩個身體標籤？爲什麼？ –

所以我拿出額外的身體標籤，並在窗體下添加一個圖像。這是我認爲你想要的一個工作代碼。

http://codepen.io/anon/pen/epeWYQ?editors=100

<!DOCTYPE html> 
<html> 
    <head> 
     <title>JN DIAMONDS</title> 
    </head> 
     <style>  
      #upper { 
       height:50%; 
      } 

      #lower { 
       height: 50%; 
       background-image: r1.jpg; 
      } 
     </style> 
    <body> 
     <div id="upper"> 

      <form align="center" method="POST" action="insert_rough.php"> 
       <fieldset> 
        <legend>JN Patel <b>Rough Diamond</b> Information</legend> 
        <br> 
        <input type="text" name="fname" placeholder="Name" required><br><br> 
        <input type="text" name="twait" placeholder="Total Rough Weight"><br><br> 
        <input type="text" name="cprice" placeholder="1 Carat Price"><br><br> 
        <input type="text" name="dprice" placeholder="Dollar Rate"><br><br> 
        <input type="text" name="date" placeholder="Payment Days" required><br><br> 
        <input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br> 
       </fieldset> 
     </div> 

      <div id="lower"></div> 
      <img src="http://i.cdn.turner.com/asfix/repository//8a250ba13f865824013fc9db8b6b0400/thumbnail_8234390180613999969.jpg" alt="" /> 

      </form> 
    </body> 
</html>

您需要這就是爲什麼它不是，如果你將其鏈接到CSS的使用後臺工作的圖像標籤：URL（./ IMG/r1.jpg）不重複;您需要將img文件夾名稱更改爲您要保存圖像的文件夾名稱。

來源

2015-10-17 13:25:57 GClinton

將頁面分爲兩部分

回答

相關問題