我怎么能在HTML / CSS中做到这一点

Question

我对网页设计完全陌生，我似乎无法完成下图所示的内容。即使您可以告诉我这个布局是什么，所以我可以谷歌寻求建议，这将是伟大的

提前致谢

Answer 1

好吧，你可以从容器div开始。然后添加一个设置宽度的'box'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 2

这只是一个普遍的提示。对于基于网格的漂亮设计，您可以谷歌搜索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 3

来自Leverage theme的ThemeTrust。