我想用css [image]设计这两个盒子？

Question

我想用css创建这个效果，你能看到带有标题和博客帖子的大盒子，还有带有日期的小盒子以及它上面的注释数量。这让我很困惑，一个例子会很棒，谢谢你们:)）

Answer 1

不太明白什么是如此令人困惑但如果它是如何安排div，那么有100种方法可以通过单向方式完成

http://img715.imageshack.us/img715/1650/exampleai.png

如果它是关于如何圆角，就像jakub提到的那样 这是一个样本

http://www.jsfiddle.net/KKpPQ/3/

Answer 2

在HTML中只创建两个独立的div，一个用于细节，另一个用于内容。

<div class="post">
    <div class="post_details">
        <div class="post_date">
            <div class="post_day">26</div>
            <div class="post_month">NOV/10</div>
        </div>
        <div class="post_comments">2</div>
    </div>
    <div class="post_text">
        <div class="post_title">PASSION SUCCESS AND MONEY</div>
        <div class="post_title">A lot of people...</div>
    </div>
</div>

使用CSS，您可以将左侧或绝对位置的细节框浮动到侧面。

.post         { clear:both; width:600px; }
.post_details { float:left; width:53px; height:93px; background:#fff; }
.post_date    { width:48px; background:#ddd; }
.post_month   { width:48px; background:#666; }
.post_text    { float:left; width:545px; background:#fff; }

Answer 3

使用css3很简单：

http://jsfiddle.net/meo/J9SjQ/

Answer 4

主要技巧是使用CSS3 border-radius属性。这使得盒子变圆。您必须使用供应商前缀才能在当前浏览器中使用它：

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;