我直接在css的样式中使用这种方式添加了小蓝点,.el-date-table td.available { color: #C0C4CC; span{ width: 6px; height: 6px; border-radius: 50%; background-color: #409eff; position: absolute; top: 50%; bottom: 0; } }但实际效果是小蓝点添加到了日期的上面,理想状态是把小蓝点添加到日期的下面,该怎么修改?
时间: 2024-02-17 12:02:50 浏览: 26
可以将 `position: absolute;` 属性改为 `position: relative;`,然后再通过设置 `margin-top` 或者 `top` 来调整小蓝点的位置,例如:
```
.el-date-table td.available {
color: #C0C4CC;
position: relative;
}
.el-date-table td.available span {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #409eff;
position: absolute;
top: 100%;
margin-top: 5px; /* 或者使用 top: calc(100% + 5px); */
}
```
这样就可以将小蓝点添加到日期的下面了。
相关问题
/* 分页样式 */ .el-pagination { display: flex; justify-content: center; margin-top: 20px; } .el-pagination .el-pager { margin: 0 10px; font-size: 14px; color: #333; border-color: #dcdfe6; border-radius: 2px; cursor: pointer; transition: all .3s; } .el-pagination .el-pager:hover, .el-pagination .el-pager.is-active { color: #fff; background-color: #409EFF; border-color: #409EFF; }修改页码样式为背景颜色白色, 圆形
您可以将.el-pager的样式修改如下:
```css
.el-pagination .el-pager {
margin: 0 10px;
font-size: 14px;
color: #333;
background-color: #fff;
border-color: #dcdfe6;
border-radius: 50%;
cursor: pointer;
transition: all .3s;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
```
这样就可以将页码的样式修改为白色背景,圆形形状了。需要注意的是,由于圆形的样式需要设置固定的高度和宽度才能生效,所以在样式中添加了height和width属性,并将页码的内容居中显示。
.el-popper.is-light .el-popper__arrow::before{ background-color: #2E3946;
这是一段 CSS 代码,用于设置一个弹出层(popper)的箭头的样式。具体来说,它使用了 Element UI 框架中的 `.el-popper` 和 `.el-popper__arrow` 类,同时添加了 `.is-light` 类来指定箭头的背景色为 `#2E3946`。
这段代码需要在 HTML 中使用 Element UI 框架的弹出层组件,并在需要的时候添加 `.is-light` 类来设置箭头背景色。例如:
```html
<div class="el-popper is-light">
<div class="el-popper__arrow"></div>
<div class="el-popper__content">
<!-- 弹出层内容 -->
</div>
</div>
```
在此示例中,我们创建了一个带有弹出层箭头的容器,并添加了 `.is-light` 类来设置箭头的背景色。弹出层的内容可以放在 `.el-popper__content` 元素中。