那些年我们一起打死的UI设计师

来源：互联网发布：js隐藏tr标签编辑：程序博客网时间：2024/06/02 23:33

好吧,废话不多说,直接上代码和效果,主要是利用了display:flex

1.默认时候的样式

2.鼠标划过的样式

代码如下:(在这里先画个圈圈诅咒一下他----你是最胖的T T)

<div class="mr_skill_con">    <span class="mr_skill_name">平均消费值(元):</span>    <span class="mr_skill_plan">        <!--最大宽度320-->        <em style="width:320px;">        </em>    </span>    <!--备注下面的left要比上面的宽度大120px;-->    <div class="mr_skill_circle" style="left: 440px;">        <div class="skill-text">            <h5>会员:</h5>            <p>88888888</p>        </div>    </div>    <div class="mr_skill_circle2" style="left:270px;">        <div class="skill-text2">            <h5>总数:</h5>            <p>86328632</p>        </div>    </div></div>

/*画图*/.mr_skill_con {  padding-left: 10px;  margin-bottom: 18px;  position: relative;}/*平均消费值等名字*/.mr_skill_con .mr_skill_name {  width: 102px;  height: 24px;  text-align: right;  margin-right: 11px;  word-wrap: break-word;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  font-size: 13px;  color: #333;  font-family: "Microsoft YaHei";  }/*总的长度*/.mr_skill_con .mr_skill_plan {  position: relative;  width: 320px;  height: 10px;  border-radius: 4px;  background-color: #eee;  margin-right: 21px;  }/*单个的长度*/.mr_skill_con .mr_skill_plan em {  position: absolute;  left: 0;  top: 0;  display: inline-block;  height: 10px;  background-color: #00b88d;  border-radius: 4px;  overflow: hidden;  }/*精通*/.mr_skill_con span {  vertical-align: middle;  display: inline-block;  }.mr_skill_con .mr_skill_circle {  display: inline-block;  width: 5px;  height: 5px;  position: absolute;  left: 122px;  top: 9px; background: #fff ;border-radius: 50%}.mr_skill_con .mr_skill_circle b{   position: absolute;  left: 0px;  top: 0px; font-size: 12px;  color: #333;  font-style: normal }.skill-text{height:16px;position: absolute;  left: -63px;  top: 7px;  ;width:130px;display: flex;}.skill-text p{line-height:16px;text-align: center;font-size: 12px;  color: #333;font-style: normal;font-weight: bold;flex: 1}.skill-text h5{flex: 3;font-weight: bold;font-size: 14px;color: #48cda6;display:none}.mr_skill_con:hover .skill-text h5{display: block}.mr_skill_con:hover .skill-text p{flex: 7;text-align: left}.mr_skill_circle2{position: absolute;  top:2px;  left:0;  width: 0px;  height: 0px;  border-top: 6px solid #48cda6;  border-right: 3px solid transparent;  border-left: 3px solid transparent;}.mr_skill_circle2 .skill-text2{position: absolute;bottom: 5px;left: -66px;  top:-23px;  ;width:130px;display: flex;}.mr_skill_circle2 .skill-text2 p{ position: relative;font-size: 12px; line-height:16px;text-align: center;  color: #48cda6;font-style: normal;font-weight: bold ;flex: 1}.mr_skill_circle2 .skill-text2 h5{flex: 3;font-weight: bold;font-size: 14px;color: #48cda6;display:none}.mr_skill_con:hover .skill-text2 h5{display: block}.mr_skill_con:hover .skill-text2 p{flex: 7;text-align: left}

0 0