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:
让我们创建一个简单干净的框,以显示类别(或您可能希望使用的所有内容)中的更新。 结果看起来像这样:
![update_box Update box](https://i-blog.csdnimg.cn/blog_migrate/a9c37cadfd27b45d3f1457cbf5952f58.png)
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://i-blog.csdnimg.cn/blog_migrate/7893a4bfdb51f028b3ae8bed85575bbe.png)
翻译自: https://tympanus.net/codrops/2009/08/26/simple-css-update-box-for-category-or-posts/