-2
我如何在我的網站上放置this L形容器使其看起來像this？在html中定位？
當談到網頁設計或代碼時，我幾乎不知道什麼，我設法讓容器在這裏有一些幫助，並且能夠將2張圖片放入其中，但我覺得在正確定位它時完全丟失了。
我爲我的網站
<!--==============================content================================-->
<section id="content">
<div class="container_12">
<div class="grid_9" style="width:900px;">
<h2>Etvab luxury estates</h2>
<div class="line-1">
</div>
<div style="float: left; width:410px;">
<p>
<br>
</p>
<p>
Etvab luxury estates är en webportal för den kräsne bostadsköparen. Här har vi samlat ett representativt urval av de mest exklusiva bostäderna på Spaniens södra kust. Bostäder med unika lägen – havsnära eller örnnästen. Bostäder med förfinad design. Bostäder med vyer som är 」breathtaking」. Bostäder med luft och ytor som andas välbefinnande. Bostäder som har allti modern utrustning och senaste teknologi. Vi har medvetet lagt ribban högt, för att kittla fantasin, ge en svindlande resa i tid och rum och visa det bästa av spansk modern arkitektur. Vi har i första hand valt bostäder med lägen och kvalitet som är i absolut topskikt. Vi har inte tittat på status i områden då vi bedömer att det inte avgör bostadens värde och attraktion. Vår ambition är att förnya dessa sidor regelbundet, till nöje och nytta för den som söker inspiration till ett husköp med högsta kvalitet och läge. Men även för den som njuter av design och vackra miljöer - på avstånd.
</div>
<p>
<br>
</p>
<style>
.qs_input { height:40px; padding: 0px 0px 0px 8px; background: #f3f3f3; border: 1px solid #dfdfdf; border-bottom: 2px solid #d7d6d6; font-family: 'Helvetica Neue', sans-serif; font-size: 1.0 em;}
.the_table {font-family: 'Helvetica Neue', sans-serif; font-size: 0.8em;}
.fastighet { padding:5px;}
.inne { padding:8px 0px 8px 8px; height:15px;}
</style>
<div id='qsResale' class='qs_body' style='width:50%; float:right; margin-left: 15px; padding:0px; margin: 0px;'>
<form name='qsFormResale' id='qsFormResale' method='post' action='search.php'>
<table class="the_table" style='width:98%; float:left;'>
<tr>
<td class='qs_label' style='width:98%;'>
<h7>Typ av fastighet</h7>
</td>
</tr>
<tr>
<td>
<select class='qs_input fastighet' name='Type' id='Type' style='width:90%;'>
<option class='qs_input' value='No Preference'></option>
<option class='qs_input' value='S'>Studio</option>
<option class='qs_input' value='A'>Lägenhet</option>
<option class='qs_input' value='T'>Radhus</option>
<option class='qs_input' value='V'>Villa</option>
<option class='qs_input' value='P'>Tomt</option>
<option class='qs_input' value='C'>Kommersiella</option>
<option class='qs_input' value='AS'>Lägenhet & Studio</option>
<option class='qs_input' value='AT'>Lägenhet & radhus</option>
<option class='qs_input' value='AV'>Lägenhet & villa</option>
<option class='qs_input' value='TV'>Radhus & villa</option>
</select>
</td>
</tr>
<tr>
<td class='qs_label' style='vertical-align:top;'>
<h7>Kust</h7>
</td>
</tr>
<tr>
<td>
<select class='qs_input fastighet' name="Area" id="Area" onchange="cambia(this, document.qsFormResale.Location);" style='width:90%;'>
<option value='Costa de la Luz'>Costa de la Luz</option>
<option value='Costa del Sol'>Costa del Sol</option>
<option value='Costa del Sol East'>Costa del Sol East</option>
<option value='Granada (Costa Tropical)'>Granada (Costa Tropical)</option>
<option value='Almería (Costa Almería)'>Almería (Costa Almería)</option>
<option value='Murcia (Costa Calida)'>Murcia (Costa Calida)</option>
<option value='Alicante (Costa Blanca)'>Alicante (Costa Blanca)</option>
<option value='Costa Azahar'>Costa Azahar</option>
<option value='Costa Brava'>Costa Brava</option>
<option value='Costa Dorada'>Costa Dorada</option>
<option value='Ibiza'>Ibiza</option>
<option value='Cordoba'>Cordoba</option>
<option value='Tenerife'>Tenerife</option>
<option value='Mallorca'>Mallorca</option>
</select>
</td>
</tr>
<tr>
<td class='qs_label' style='vertical-align:top;'>
<h7>Område</h7>
</td>
</tr>
<tr>
<td>
<select class='qs_input' size='5' style="height:150px; width:395px;" name='Location' id='Location' multiple='multiple' style='width:90%;'>
<option class='qs_input inne' value='No Preference'>Ingen Preferens</option>
<option class='qs_input inne' value='Ayamonte'>Ayamonte</option>
<option class='qs_input inne' value='Huelva'>Huelva</option>
<option class='qs_input inne' value='Sanlucar de Barrameda'>Sanlucar de Barrameda</option>
<option class='qs_input inne' value='Tarifa'>Tarifa</option>
<option class='qs_input inne' value='Jimena de la Frontera'>Jimena de la Frontera</option>
<option class='qs_input inne' value='San Pablo de Buceite'>San Pablo de Buceite</option>
<option class='qs_input inne' value='Jerez de la Frontera'>Jerez de la Frontera</option>
<option class='qs_input inne' value='Cadiz'>Cádiz</option>
<option class='qs_input inne' value='Olvera'>Olvera</option>
</select>
</td>
</tr>
<tr>
<td class='qs_label'>
<h7>Sovrum</h7>
</td>
</tr>
<tr>
<td>
<select size='1' class='qs_input fastighet' name='Beds' id='Beds' style='width:90%;'>
<option class='qs_input' value='No Preference'>Ingen Preferens</option>
<option class='qs_input' value='1'>1 Bädd</option>
<option class='qs_input' value='1x'>1 Bädd eller fler</option>
<option class='qs_input' value='2'>2 Bäddar</option>
<option class='qs_input' value='2x'>2 Bäddar eller fler</option>
<option class='qs_input' value='3'>3 Bäddar</option>
<option class='qs_input' value='3x'>3 Bäddar eller fler</option>
<option class='qs_input' value='4'>4 Bäddar</option>
<option class='qs_input' value='4x'>4 Bäddar eller fler</option>
<option class='qs_input' value='5'>5 Bäddar</option>
<option class='qs_input' value='5x'>5 Bäddar eller fler</option>
<option class='qs_input' value='6'>6 Bäddar</option>
<option class='qs_input' value='6x'>6 Bäddar eller fler</option>
<option class='qs_input' value='7'>7 Bäddar</option>
<option class='qs_input' value='7x'>7 Bäddar eller fler</option>
<option class='qs_input' value='8'>8 Bäddar</option>
<option class='qs_input' value='8x'>8 Bäddar eller fler</option>
<option class='qs_input' value='9'>9 Bäddar</option>
<option class='qs_input' value='9x'>9 Bäddar eller fler</option>
</select>
</td>
</tr>
<tr>
<td class='qs_label'>
<h7>Pris från</h7>
</td>
</tr>
<tr>
<td>
<p>
<input type='text' class='qs_input' id='PriceMin' name='PriceMin' style='width:80%;' value='0' maxlength='8' onchange='return f_checkNumber(this,0,0);'>
<span class='qs_text'>€</span>
</p>
</td>
</tr>
<tr>
<td class='qs_label'>
<h7>Pris upp till</h7>
</td>
</tr>
<tr>
<td>
<input type='text' class='qs_input' id='PriceMax' name='PriceMax' style='width:80%;' value='0' maxlength='8' onchange='return f_checkNumber(this,0,0);'> <span class='qs_text'>€</span>
</td>
</tr>
<tr>
<td class='qs_label'>
<h7>Referens nr</h7>
</td>
</tr>
<tr>
<td style='padding-right:5%;'>
<input type='text' class='qs_input' id='RefNum' name='RefNum' value='' maxlength='12'>
</td>
</tr>
<tr>
<td style='padding-top:10px;'>
<input type='submit' input type='button' class="button-5" value="Sök">
</td>
</tr>
</table>
<input type='hidden' name='P1' id='P1' value='ETvabResales'>
<input type='hidden' name='P2' id='P2' value='R'>
<input type='hidden' name='P3' id='P3' value='ALL'>
<input type='hidden' name='QS' id='QS' value='RESALE'>
<input type='hidden' name='Country' id='Country' value='Spain'>
<input type='hidden' name='RentalType' id='RentalType' value=''>
<input type='hidden' name='RentalDateFrom' id='RentalDateFrom' value='06-02-2013'>
<input type='hidden' name='RentalDateTo' id='RentalDateTo' value='06-02-2013'>
<input type='hidden' name='Language' id='Language' value='8'>
<input type='hidden' name='CustomArea' id='CustomArea' value=''>
</form>
</div>
</div>
</div>
<div class="clear">
</div>
</section>
<div class="clear">
</div>
<!--==============================footer=================================-->
<footer>
<div class="container_12">
<div class="grid_12">
<div class="line-2">
</div>
</div>
<div class="grid_2">
<p>
</p>
<h5>Kontor Stockholm: </h5>
<h5>Kontor Marbella:</h5>
<h5>E-mail:</h5>
<ul class="list1">
</ul>
</div>
<div class="grid_2">
<p>
</p>
<h5>+46 8 966 545</h5>
<h5>+34 951087873</h5>
<h5>[email protected]</h5>
<ul class="list1">
</ul>
</div>
<div class="grid_2">
<h3 class="marg6"></h3>
<ul class="list1">
</ul>
</div>
<div class="grid_2">
<p>
</p>
<h5> </h5>
<p>
</p>
<ul class="list1">
</ul>
</div>
<div class="grid_4">
<p class="foot-text">
Etvab luxury estates © 2012 <a href="index-6.html"></a>
<!-- {%FOOTER_LINK} -->
</p>
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</footer>
</div>
</body>
</html>
的HTML圖像HTML
<div class="container-3">
<div class="top"><img src="Images/bildlyx2.jpg" height="626" class="img1" />
</div>
<div class="bottom"></div>
<img src="Images/bildlyx1.jpg" width="202" height="210" class="img5" />
</div>
</div>
CSS的圖像和容器
.img1{
top: 1px;
left: -1px;
z-index: 10;
position: absolute;
width: 452px;
height: 660px;
}
.img5{
top: 439px;
right: 42px;
z-index: 20;
position: absolute;
width: 574px;
height: 230px;
}
.container-3{
position:relative;
}
.top{
width: 459px;
height: 800px;
border-bottom: none;
position: absolute;
z-index: 4;
}
.bottom{
z-index:2;
width: 1100px;
height: 250px;
position:absolute;
top:600px;
left:0;
}
-1對於這個問題，因爲這是一個相當廣泛的問題。任何原因您無法將所有圖像保存到一張較大的合成圖像中，並將較大的圖像定位爲背景？ – 2013-02-09 23:27:18
我該怎麼做？正如我在帖子中所說的，我幾乎不知道關於建立網站的任何事情。我聘請了一個網頁設計師來做我的網站，現在我不能抓住他，所以我試圖自己解決這個問題。 – Martin 2013-02-09 23:37:40
打開一個圖形程序，將所有圖像放在你想要的方式並將其保存爲JPEG。然後在CSS中放入'background-image：url（imagename.jpg）'。這很骯髒，但它會完成這項工作，直到你能夠抓住設計師。 – 2013-02-09 23:44:07