HTML/CSSでこれを行うにはどうすればいいですか？

Question

私はウェブデザインに全く新しいです。私はちょうど下の図にあるものを達成しているようです。あなたがこのレイアウトはので、私は提案をgoogleの可能性と呼ばれているもの、それは素晴らしいことだ、事前に

おかげ

Answer 1

を私に言うことができる場合でも、これは単に一般的なヒントです。素敵なグリッドベースのデザインの場合は、css frameworksのGoogleを使用できます。

は、ここではいくつかのサンプルページです：

• 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を開始することができます。次に、設定された幅で 'ボックス' divを追加します。それらのdivを左に浮動させると、コンテナ内にそのように配置されます。次に、ボックスの中にアイテムのフレームワークを追加することができます。

#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

それはThemeTrustからLeverage themeです。