可以使用 CSS 的 position
属性来实现。
下面是一个示例代码,将一个图标和文字固定在屏幕右侧。
<div class="fixed-widget">
<i class="icon icon-phone"></i>
<span>联系我们</span>
</div>
.fixed-widget {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
}
.icon {
display: inline-block;
margin-right: 10px;
font-size: 24px;
}
上面的代码中,首先使用 position: fixed
将元素固定在屏幕右侧,然后使用 top
, right
属性调整元素的位置。
接着使用 display: flex
和 align-items: center
, justify-content: center
属性使图标和文字水平垂直居中。
最后使用其他属性(如背景颜色、字体颜色、内边距等)美化样式。