Salazar
- 发布：2017-08-03 10:23
- 更新：2017-08-03 11:04
- 阅读：1394
请问这种怎么用CSS写出来?上面数字,下面是绿色的矩形,不用图片
分类：MUI
王者地带 - 5+混合APP开发教程网 | http://www.html5-app.com | 咨询QQ: 2564034335
可以参考下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
.number{ display: inline-block; height:40px; width:50px;padding-top:10px; font-size: 14px; border: solid 1px #E8E8E8; text-align: center;}
.number b{ height: 20px; }
.number b:after{background-color: #40CEA8;width:15px; margin-top: 5px; margin-left: auto; margin-right: auto; border-bottom:4px solid #40CEA8; border-radius:8px; content:""; display:block ;}
</style>
</head>
<body>
<span class="number">
<b>5</b>
</span>
<span class="number">
<b>
6
</b>
</span>
<span class="number">
<b>7</b>
</span>
<span class="number">
<b>11</b>
</span>
</body>
</html>
Salazar (作者)
像我这种可以直接在里面加吗?
.calendar-content .canChoose {
background-repeat: no-repeat;
background-position: bottom;
color: #4A494A;
font-size: 14px;
font-weight: bold;
}
2017-08-03 11:12
王者地带
如果.canChoose 是数字的话，可以试下
.calendar-content .canChoose:after{background-color: #40CEA8;width:15px; margin-top: 5px; margin-left: auto; margin-right: auto; border-bottom:4px solid #40CEA8; border-radius:8px; content:""; display:block ;} 根据你实际需求改
2017-08-03 11:16
Salazar (作者)
非常感谢
2017-08-07 09:59
Salazar (作者)
回复 王者地带:还想请教一个问题,如果后期我想通过JavaScript代码只是改变border-bottom: 4px solid #40CEA8;后面这个颜色值,通过JavaScript的哪个方法可以更改呢?实际需求就如同我发的上面这张图片,部分背景是绿色,部分是灰色的,需要通过JavaScript动态去改变.
2017-08-07 10:03