<div class='header'>
    <div class="header-left">
      <span class='iconfont back-icon'></span>
    </div>
    <div class="header-input">
      <span class="iconfont"></span>
      输入城市/景点/游玩主题
    </div>
      <div class="header-right">
        城市
        <span class='iconfont arrow-icon'></span>
      </div>
  </div>
  .header
    display:flex
    line-height:.86rem
    background:red
    color:#fff
    .header-left
      width:.64rem
      float:left
      .back-icon
        padding:.12rem
        text-align:center
        font-size :.4rem
    .header-input
      flex:1
      height:.68rem
      margin-top:.12rem
      margin-left:.2rem
      padding-left:.2rem
      background:#fff
      border-radius:.1rem
      color:#ccc
    .header-right
      min-width:1.04rem
      padding:0 .1rem
      float:right
      text-align:center
      color:#fff
      .arrow-icon
        margin-left:-.04rem
        font-size:.24rem

CSS之Header--我的头部我做主的更多相关文章

  1. apiCloud中实现头部与内容分离与操作规范，App头部header固定，头部与内容分离

    官方案例 1.头部拆分成一个页面比如news-text <!doctype html> <html> <head> <meta charset="u ...

  2. 天了噜，为什么外链css要放在头部，js要放在尾部？

    我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后.为什么要这样子处理,今天参考一些资料好好分析下. 为什么外链css为什么要放头部? ...

  3. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  4. 2. react 简书 头部(header) 图标添加

    1. 访问 iconfont 并注册 登陆 2. 进入 iconfont 头部 图标管理->我的项目 3. 点击右边的文件夹 + 号 图标 创建我的项目 输入项目名称即可 4.在 搜索框 搜索 ...

  5. PHP 常用的header头部定义汇总

    <?phpheader('HTTP/1.1 200 OK'); // ok 正常访问header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在header(' ...

  6. Asp.Net网页头部动态加载标题、描述、关键字、css和js文件的方法

    首先head标签上添加runat="server". protected void Page_Load(object sender, EventArgs e) { Page.Tit ...

  7. 【转载】PHP 常用的header头部定义汇总

    header() 函数向客户端发送原始的 HTTP 报头. 认识到一点很重要,即必须在任何实际的输出被发送之前调用 header() 函数(在 PHP 4 以及更高的版本中,您可以使用输出缓存来解决此 ...

  8. CSS知识总结（一）

    一.认识CSS 1.什么是CSS? CSS (Cascading Style Sheet) 层叠样式表 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 由于CSS属性或规则尚未成为 ...

  9. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

随机推荐

  1. @NotNull、@NotEmpty、@NotBlank的区别

    Spring中@NotNull.@NotEmpty.@NotBlank的区别@NotNull:用于基本数据类型@NotEmpty:用于集合类@NotBlank:用于String上面

  2. JSTL 标签大全详解

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53311722  冷血之心的博客) 一.JSTL标签介绍 1.什么是 ...

  3. 配置ArcGIS Server使用Windows AD Windows集成身份认证

    1.配置 ArcGIS Server 以使用 Windows Active Directory 用户和角色. 2.填写Windows域账号凭证,对账号的要求如下: 需要能读取域中的用户和组,一般从属于 ...

  4. JS截取字符串方法实例

    // JS截取字符串可使用 substring()或者slice() // // 函数:substring() // 定义:substring(start,end)表示从start到end之间的字符串 ...

  5. [Android] 布局优化技巧

    看了一些关于优化布局的资料,了解了很多平时不怎么注意的问题,于是把资料整理了一下,一部分内容是翻译来的,一部分是自己理解加上的.每部分内容都有demo,有些资料里的demo比较好的,我就直接拿来用了: ...

  6. CentOS配置yum源（补充）

    这是对yum命令的补充 Yum命令 一.用Centos镜像搭建本地yum源 由于安装centos后的默认yum源为centos的官方地址,所以在国内使用很慢甚至无法访问,所以一般的做法都是把默认的yu ...

  7. 【three.js练习程序】创建简单物理地形

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Python之生成器(generator)和迭代器(Iterator)

    generator 生成器generator:一边循环一边计算的机制. 生成器是一个特殊的程序,可以被用于控制循环的迭代行为.python中的生成器是迭代器的一种,使用yield返回值函数,每次调用y ...

  9. 固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异

    固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异 在看这篇文章之前可以先看一下下面的文章: SSD小白用户收货!SSD的误区如何解决 这样配会损失性能?实测6种特殊装机方式 听说固态 ...

  10. Mysql binlog 无法删除(purge命令无法删除)

    1.版本 1)操作系统 cat /etc/issueCentOS release 6.6 (Final)Kernel \r on an \m cat /proc/versionLinux versio ...