HTML+CSS宝典实战项目

https://study.163.com/course/courseLearn.htm?courseId=1209391807#/learn/video?lessonId=1279310071&courseId=1209391807

https://study.163.com/course/introduction/1209391807.htm

选项卡

span 元素是行盒，浮动起来变成块盒，然后就能设置宽度，就能并排显示

文字行高为 2，文字大小设置为13px，span元素高度为26px

margin-bottom: -1px 往下多出一个像素，把.switch-menu元素的边框覆盖掉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
  *{padding:0;margin:0;}
  /* common 通用样式 */
  .left{
    float: left;
  }
  .right{
    float: right;
  }
  .clearfix::after{
    content: "";
    display: block;
    clear: both;
  }
  /* 选项卡 style */
  .account-container{
    width: 300px;
    height: 300px;
    position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);background-color: lightyellow;
    line-height: 2;
    color: #9b9b9b;
  }
  .account-container .switch-menu{
    border-bottom: 1px solid #ececec;
    font-size: 13px;
  }
  .account-container .switch-menu span{
    width: 50%;
    text-align: center;
    cursor: pointer;
  }
  .account-container .switch-menu span.selected{
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid orange;
    margin-bottom: -1px; /* 往下多出一个像素，把.switch-menu元素的边框覆盖掉 */
  }
</style>
</head>
<body>

  <div class="account-container">
    <div class="switch-menu clearfix">
      <span class="left selected">短信登录/注册</span>
      <span class="right">密码登录</span>
    </div>
    
  </div>

</body>
</html>

HTML+CSS宝典 实战项目