SOURCE

<div class="header">
    <div class="header_content">
        <div class="header_content_left title">文章标题</div>
          <div class="header_content_right clearfix">
                <form class="search left" action="">
                    <input type="text" placeholder="输入内容">
                    <i class="bi bi-search"></i>
                </form>
                <div class="message_box left">
                    <i class="bi bi-bell-fill"></i>
                    <span class="message">消息</span>
                    <span class="count">15</span>
                </div>
                 <div class="login_after_info left">
                    <img src="https://www.itbaizhan.com/public/new/avatar/04.png?v=1.0.1" alt="">
                </div>
         </div>
        
    </div>
  
</div>

<style>
    *{
        margin:0;
        padding:0;
    }
    .header{
        position:fixed;
        width:100%;
        height:58px;
        background-color:white;
    }
    .header_content{
        width:95%;
        height:60px;
        margin:auto;
    }
    .title{
        line-height:58px;
    }
    .header_content_left{
        float:left;
    }
    .header_content_right{
        float:right;
    }
    .left{
        float:left;
    }

    .search{
        margin:6px 20px 0 0;
        border:1px solid #ddd;
    }
    .search *{
        height:30px;
    }

    .message_box{
        height:30px;
        line-height:30px;
        margin:3px 20px 0 0;
        border:1px solid #ddd;
        padding:3px 12px;
        
    }
    .message_box .count{
        font-size:12px;
        background-color:#FA5A57;
        padding:3px 8px;
        border-radius:10px;
    }

    .login_after_info{

    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
        visibility:hidden;
    }
</style>