Как я могу это сделать в HTML/CSS

Question

Я совершенно не знаком с веб-дизайном, и я просто не могу выполнить то, что находится на картинке ниже. Даже если вы могли бы сказать мне, что эта схема называется, так что я мог бы Google для предложений было бы здорово

Спасибо заранее

Answer 1

Это только общий намек. Для хороших схем на основе сетки вы можете использовать Google для css frameworks.

Вот некоторые примеры страниц:

• http://www.blueprintcss.org/tests/parts/sample.html
• http://elasticss.com/demos/Examples_Columns.html
• http://960.gs/demo_24_col.html

Answer 2

Ну, вы могли бы начать с контейнера дел. Затем добавьте в квадрат div с установленной шириной. если вы плаваете эти divs влево, они будут выравниваться как таковые в контейнере. Затем вы можете добавить фреймворк для элементов внутри ящиков.

#container { 
    width:500px; 
    background-color:#CCC; 
} 
.box { 
    width:50%; 
    float:left; 
    min-height:120px; 
} 
.boximg { 
    // this is your icon for each box 
    width:20px; 
    float:left; 
    display:inline; 
} 
.boxtitle { 
    font-weight:bold; 
    float:left; 
    display:inline; 
} 

Тогда ваш HTML:

<div id="container"> 
    <div class="box"> 
     <div class="boximg"><img src=""/></div> 
     <span class="boxtitle">Here is your box title</span> 
     <p>Your box text here</p> 
    </div> 
    <!-- add more boxes here --> 
</div> 

Answer 3

Это Leverage theme от ThemeTrust.