首页 > 移动平台 > 详细

移动端 顶部搜索框样式

时间:2020-06-10 10:00:43      阅读:255      评论:0      收藏:0      [点我收藏+]

技术分享图片技术分享图片

header的class样式

 .container {
    height: 100%;
  }
  .header {
    padding: 8px 15px;
    background-color: #d33d3e;
    overflow: hidden;
  }

左边返回按钮的样式

.icon-return {
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    margin-right: 10px;
  }

中间搜索框样式

.search-box {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 100px);
    line-height: 32px;
    background-color: #fff;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .search-box>i {
    color: #707070;
  }

右边搜索按钮的样式

.btn-search {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
  }

 

移动端 顶部搜索框样式

原文:https://www.cnblogs.com/pwindy/p/13083059.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!