您的位置:首页 > Web前端 > CSS

实现切换效果的样式

2016-07-08 17:36 615 查看


<div class="card_mes">
<div class="clearfloat">
<p> 金币</p><p>油量</p>
</div>
<div class="drop">
<div class="current"></div>
<span id="money1" style="color:#e15517 ;font-size: 20px;font-weight: 900">0</span>
<span id="fuel1" style="color: #ff0000;font-size: 20px;font-weight: 900">0</span>
</div>
</div>


.card_mes{
position: relative;
}
.card_mes p{
width: 50%;
float: left;
font-size: 24px;
line-height: 1.5;
cursor: pointer;
margin-bottom: 0%;
}
.current{
width: 0;
height: 0;
border: 5px solid #ffffff;
border-top-color:transparent ;
border-left-color:transparent ;
border-right-color:transparent ;
transform: translate(50px,-10px);
}
.card_mes p:first-child{
background: #78BA00;
}
.sel_metion{
background: #DDDDDD;
width: 95%;
line-height: 1.5;
padding: 10px 0;
margin: 10px auto;
}
.card_mes p:nth-child(2){
background: #FF8000;
}
.card_mes .drop{
color:#e15517 ;
font-size: 20px;font-weight: 900;
height: 60px;
background: #ffffff;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: