码迷,mamicode.com
首页 > 其他好文 > 详细

边框上带有文字

时间:2017-12-14 16:31:43      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:mil   col   ext   field   type   wrap   ima   lock   block   

效果图:

技术分享图片

 

实现代码

<div class="row wrap" style="margin-bottom: 20px; ">
  <p class = "circleborder circleborderOne"></p>
  <span class="wraptitle">社保收支统计</span>
  <p class = "circleborder circlebordertwo"></p>
  <div class="col-md-12"> <!--内容-->
    <div class="c_center ysb_center" id="sb_d_1"></div>
  </div>
</div>

 

样式:

.wrap{
  margin-top: 10px;
  position: relative;
  border: 1px solid deepskyblue;
  box-sizing: border-box;
}
.wraptitle{
  position: absolute;
  top: -12px;
  left: 23px;
  width: 106px;
  padding: 0 5px;
  color: #b9c9f1;
  font-family: "微软雅黑";
  background-color: #101d2d;
}

.circleborder{
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: deepskyblue;
  border: 1px solid deepskyblue;
}

.circleborderOne {
  margin-top: -5px;
  margin-left: 13px;
}

.circlebordertwo {
  margin-top: -21px;
  margin-left: 129px;
}

 

 

实现边框上带有文字也可以使用 fieldset

eg:

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    体重:<input type="text" />
  </fieldset>
</form>

 

边框上带有文字

标签:mil   col   ext   field   type   wrap   ima   lock   block   

原文地址:http://www.cnblogs.com/xiaoQ0725/p/8038257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!