简单CSS：类别或帖子的更新框

Let’s create a simple and clean box that shows the updates in a category (or anything you might like it to use for). The result looks like this:

让我们创建一个简单干净的框，以显示类别(或您可能希望使用的所有内容)中的更新。 结果看起来像这样：

Starting with the css, insert the following code into the header of your page (or add it to your existing css):

从css开始，将以下代码插入页面标题(或将其添加到现有css)：

<style>
 body{
   font-family:Arial;
 }

 .box{
   width: 150px;
   height: 40px;
   float: left;
   border:2px solid #ccc;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   text-align: center;
   padding: 5px;
   font-size: 14px;
   font-weight: bold;
   background-color: #f0f0f0;
   color: #888;
}

p.new{
   width: 126px;
   color: white;
   background-color: #3190A5;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   padding: 1px;
   text-align: center;
   margin-top: 5px;
   margin-left: 12px;
   font-weight: 100;
   font-size: 11px;
   color: #F0F0F0;
}
 </style>

In the body of the page, insert the html code:

在页面的正文中，插入html代码：

<div class="box">
  IT development
  <p class="new">
     4 new posts
  </p>
</div>

The border radius is for Mozilla and Safari (and webkit browsers) and is still not supported by IE (no surprise there really).

边界半径适用于Mozilla和Safari(以及Webkit浏览器)，但IE仍不支持(实际上并不奇怪)。

Enjoy!

请享用！

翻译自: https://tympanus.net/codrops/2009/08/26/simple-css-update-box-for-category-or-posts/