Реализовать трехмерный макет в HTML/CSS

Я просто хочу сделать HTML-страницу с this layout.Реализовать трехмерный макет в HTML/CSS

Как я мог выполнить его с HTML div и только CSS, без таблиц.

Существует окно поиска, горячие продукты и рекламный блок.

2012-01-10 Bias Tegaralaga

Вы еще что-нибудь пробовали (и можем ли мы это увидеть)? –

это мой текущий макет http://dl.dropbox.com/u/50241709/upload/misc/img/layout.PNG Я просто хочу сделать несколько рекламных коробок под полем поиска –

Установите его с помощью поплавков и шириной 960 пикселей;

Вы можете настроить его соответствующим образом.

HTML:

<div id="area-wrap"> 
    <div id="hot-product">Hot Product<br />Goes<br />Here</div> 
    <div id="search-box">Search Box</div> 
    <div id="advertisements">Advertisements</div> 
</div>

CSS:

#area-wrap { 
    width:960px; 
} 

#search-box { 
    float:left; 
    background:red; 
    width:450px; 
    margin-left:20px; 
    margin-right:20px; 
    color:#fff; 
    margin-bottom:20px; 
} 

#advertisements { 
    float:left; 
    background:blue; 
    width:450px; 
    margin-left:20px; 
    margin-right:20px; 
    color:#fff; 
} 

#hot-product { 
    float:right; 
    background:green; 
    width:450px; 
    margin-right:20px; 
    color:#fff; 
}

Вот JSFiddle: http://jsfiddle.net/82QnL/1/< --- Демо

Надеется, что это помогает !!!

источник

2012-01-10 23:16:50 Jassi

Здесь вы идете!

HTML файла:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="test.css"> 
</head> 
<body> 
    <div class="top-left"> 
    top-left 
    </div> 
    <div class="bottom-left"> 
    bottom-left 
    </div> 
    <div class="right"> 
    right 
    </div> 
</body> 
</html>

CSS файл в том же каталоге:

.top-left { 
    height: 200px; 
    position: absolute; 
    width: 25%; 
    background-color: blue; 
} 
.bottom-left { 
    height: 200px; 
    position: absolute; 
    width: 25%; 
    top: 220px; 
    background-color: red; 
} 
.right { 
    height: 413px; 
    position: absolute; 
    width: 72%; 
    left: 27%; 
    background-color: green; 
}

источник

2012-01-10 23:10:13 11101101b

, чтобы ваш ответ был замещающим для позже? – fcalderan

Я отправил код, я просто хотел убедиться, что он сработал. Почему все меня понизили? – 11101101b

спасибо за ответ человек, я уже сделал это, без позиции: D –

Попробуйте

<div id="wrapper"> 
    <div id="leftTop" style="position: absolute;height: 200px;width: 300px;border: 1px solid black;"></div> 
    <div id="leftBottom" style="position: absolute;top: 220px;height: 200px;width: 300px;border: 1px solid black;"></div> 
    <div id="right" style="position: absolute;left: 320px;height: 410px;width: 300px;border: 1px solid black;"> 
    </div> 

</div>

и увидеть рабочий пример here

источник

2012-01-10 23:13:57 jacktheripper

спасибо человеку, но мне это нужно на моей странице, где положение: абсолютное кажется не работает –

Если вы ищете полный размер страницы и гибкая планировка вы можете сделать это:

Демо: http://jsfiddle.net/GPDBs/1/

HTML:

<div id="search"> 
    Search 
</div> 
<div id="ads"> 
    Ads 
</div> 
<div id="product"> 
    Hot Product 
</div>

CSS:

#search{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:50%; 
    bottom:40%; 
    background-color:blue; 
} 
#product{ 
    position:absolute; 
    top:0px; 
    right:0px; 
    left:50%; 
    bottom:0px; 
    background-color:green; 
} 

#ads{ 
    position:absolute; 
    top:60%; 
    left:0px; 
    right:50%; 
    bottom:0; 
    background-color:red; 
}

Я надеюсь, что это помогает :-)

источник

2012-01-10 23:16:45 Qorbani

спасибо, но я не мог его использовать :) –

Есть ли что-нибудь, что я могу вам помочь? Вы хотите иметь его с абсолютным позиционированием? Может быть, если вы сможете объяснить больше, я могу вам помочь :) – Qorbani

Или вы могли бы попробовать это: http://jsfiddle.net/eRJH3/

источник

2012-01-10 23:16:57 Matmarbon

Без абсолютной позиции -> http://jsfiddle.net/eRJH3/15/ – Piotr

Это довольно простой дизайн, чтобы сделать, проверить это:

HTML

<div class="container"> 
    <div class="search"> 
     search 
    </div> 
    <div class="products"> 
     products 
    </div> 
    <div class="ads"> 
     ads 
    </div> 
</div>

CSS

.container { 
    width:960px; 
    margin:0 auto; 
} 

.search, .ads, .products { 
    background-color:#aaa; 
    margin:0 0 5px 5px; 
} 

.search, .ads { 
    width:400px; 
    float:left; 
} 

.search { 
    height:200px; 
} 

.ads { 
    height:100px; 
} 

.products { 
    width:550px; 
    height:305px; 
    float:right; 
}

Демо-версия http://jsfiddle.net/andresilich/xxbU5/show/

источник

2012-01-10 23:31:02

Реализовать трехмерный макет в HTML/CSS

ответ

Смежные вопросы