zoukankan      html  css  js  c++  java
  • 用css实现在横线中间插入文字

    在一些登录或者注册界面中常常可看到,一个大框框上面的横线中有插入文字,大概示意图如下:

    这种现象其实是相对位置作用的结果,可以通过相对定位,是某元素恰好出现在div的边框上。

    position: relative;

    下面举例说明:

    首先创建html元素

    <div>
         <span class="title">注册</span>
         <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
    </div>

    然后写css样式:

    div {
        width: 200px;
        height: 100px;
        padding: 5px 30px;
        margin: 50px;
        border: 4px solid #e14d43;
    }
    
    div span.title {
      display: block;
      width: 40px;
      position: relative;
      top: -15px;
      text-align: center;
      background: #ededef;
      font-size: 16px;
      font-weight: bold;
      
    }

    显示效果见上面示意图。

  • 相关阅读:
    获取平台所有接口的IP和MAC地址
    共享内存
    消息队列
    shell常见语法
    保存结构体到文件
    Bookmarks
    js打开新窗口
    要买的书
    批量下载辅助工具
    解决word没有菜单栏和工具栏
  • 原文地址:https://www.cnblogs.com/zongfa/p/7563189.html
Copyright © 2011-2022 走看看