css做右侧消息数量 |css网页布局中box自适应

首先，大家需要一个带有消息数量的图标。这个图标可以是自己设计的，也可以从网络上下载。然后，大家需要在HTML文件中添加这个图标。如下所示：

<div class="message-icon">
<i class="fa fa-envelope-o"></i>
<span class="message-number">10</span>
</div>

在这个代码中，大家使用了Font Awesome提供的envelope-o图标。为了显示消息数量，大家在图标上方添加了一个span标签，并使用CSS样式来控制其位置和样式。接下来，大家需要编写相应的CSS代码。

.message-icon {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
border-radius: 50%;
background-color: #ccc;
color: #fff;
}
.message-number {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 12px;
line-height: 20px;
text-align: center;
background-color: #f00;
color: #fff;
}

这个CSS代码中，大家首先给message-icon添加了一些基本的样式，包括大小、圆角、颜色等。然后，大家使用position属性设置其为relative定位，并使用top和right属性来控制message-number的位置。message-number大家设置为absolute定位，使其相对于message-icon进行定位。最后，大家使用border-radius来控制message-number的圆角，再使用background-color和color来设置其背景色和文字颜色。

通过以上这些步骤，大家就可以使用CSS制作出一个非常美观的右侧消息数量特效了。欢迎大家尝试使用CSS制作其它的特效。