<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. 跨域cors中如何传递cookie（前端为什么无法向后端传递cookie？）

    没有跨域 后端server只要在回应头部‘set-cookie’,那么就会有cookie产生并保存在客户端client. 等到client再次向后端server发送请求时浏览器的机制就会自动携带coo ...

  2. Android Studio 编译: Program type already present: XXX 解决方案

    3情况1:个例 build.gradle 中 dependencies { classpath 'com.android.tools.build:gradle:3.1.1' // } 改成 depen ...

  3. FileWriter写数据路径问题及关闭和刷新方法的区别

    package com.itheima_01; import java.io.FileWriter; import java.io.IOException; /* * 输出流写数据的步骤: * A:创 ...

  4. 快速配置webpack 4.x

    区分开发模式和生产模式: npm run start——开发模式,启用devServer,文件的改动实时更新.刷新 npm run build——生产模式,打包文件到dist文件夹 // packag ...

  5. 【three.js练习程序】创建太阳系

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

  6. 团队项目个人进展——Day08

    一.昨天工作总结 冲刺第八天,昨天看了许多关于wx.request的知识,主要测试了OBJECT参数,同时也对https方面有了一定了解 二.遇到的问题 对文档中的内容只是熟悉,理解并运用起来还存在问 ...

  7. OneASP 安全公开课，深圳站， Come Here, Feel Safe!

    在这个世界上,一共有两种公司:一种被「黑」过,另一种,不知道自己被「黑」过. 在安全攻击频发的今天: 如何构建完善的安全防护壁垒? 如何借助威胁情报改善安全态势? 如何检测新形式下的漏洞? 答案,就在 ...

  8. Linux 同步时间 设置时区

    简化版 同步时间 #直接用域名同步中国上海时间 ntpdate -u ntp.api.bz # hwclock --hctosys 或者 # clock --hctosys hc代表硬件时间,sys代 ...

  9. Angular JS （一）

    AngularJS是一个js框架,以js编写的库.跟knockoutJS类似. AngularJS扩展了html 通过ng-directives扩展了html:ng-app定义一个angularJS应 ...

  10. html基础笔记-表单、链接

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 字符编码U ...