CSS之Header--我的头部我做主

<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--我的头部我做主的更多相关文章
- apiCloud中实现头部与内容分离与操作规范,App头部header固定,头部与内容分离
官方案例 1.头部拆分成一个页面比如news-text <!doctype html> <html> <head> <meta charset="u ...
- 天了噜,为什么外链css要放在头部,js要放在尾部?
我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后.为什么要这样子处理,今天参考一些资料好好分析下. 为什么外链css为什么要放头部? ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- 2. react 简书 头部(header) 图标添加
1. 访问 iconfont 并注册 登陆 2. 进入 iconfont 头部 图标管理->我的项目 3. 点击右边的文件夹 + 号 图标 创建我的项目 输入项目名称即可 4.在 搜索框 搜索 ...
- PHP 常用的header头部定义汇总
<?phpheader('HTTP/1.1 200 OK'); // ok 正常访问header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在header(' ...
- Asp.Net网页头部动态加载标题、描述、关键字、css和js文件的方法
首先head标签上添加runat="server". protected void Page_Load(object sender, EventArgs e) { Page.Tit ...
- 【转载】PHP 常用的header头部定义汇总
header() 函数向客户端发送原始的 HTTP 报头. 认识到一点很重要,即必须在任何实际的输出被发送之前调用 header() 函数(在 PHP 4 以及更高的版本中,您可以使用输出缓存来解决此 ...
- CSS知识总结(一)
一.认识CSS 1.什么是CSS? CSS (Cascading Style Sheet) 层叠样式表 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 由于CSS属性或规则尚未成为 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
随机推荐
- short、int、long、float、double区别
一.基本数据类型的特点,位数,最大值和最小值.1.基本类型:short 二进制位数:16 包装类:java.lang.Short 最小值:Short.MIN_VALUE=-32768 (-2的15此方 ...
- 研发环境 chrome谷歌浏览器和firefox火狐浏览器解决跨域问题
1 火狐浏览器 (1).先在地址栏输入about:config,然后单击“我了解此风险”. (2).找到security.fileuri.strict_origin_policy,然后在值下面的tru ...
- sql server 大批数据插入时,时间过长的问题
private const string con = "server=192.168.30.36;database=test;user=sa;pwd=123456"; static ...
- php实现头像预览上传功能
最近在做php第二阶段的项目,需要用到头像上传的功能 我们要完成头像上传功能,一共要写两个php页面,第一个页面我们叫做touxiang.php,第二个页面我们叫做upload.php 1.touxi ...
- 关于Mobx中装饰器语法的环境配置
1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(若没有安装git则请跳过,本人是在安装git的情况下解决问题的) 1.git add . 2.git ...
- 新知食APP架构分析--北京识物科技有限公司旗下产品
俗话说不打无准备之仗,这次真是有点懵逼了,建议大家去面试的时候,尤其是去小型互联网公司的时候,如果你想比其他人有竞争力,那么你要研究一下当前他的公司正在开发产品,他们的业务类型是什么样的,比如他们公司 ...
- ADB三个进阶使用
adb通过Wi-Fi连接手机 背景知识 Android系统底层运行着一个服务(adbd),也就是在手机系统内部,用于响应.管理大家在电脑端的adb命令连接,这个服务在启动时候会根据手机的配置监听USB ...
- leveldb源码分析--SSTable之TableBuilder
上一篇文章讲述了SSTable的格式以后,本文结合源码解析SSTable是如何生成的. void TableBuilder::Add(const Slice& key, const Slice ...
- mysql 表格操作指令大全(Show、desc、create、insert into、delete、select、drop、update、alter)
使用数据库 use 数据库名 eg: use weiying 2. 查看库里所有的表 Show tables 3.查看所表的结构 desc 表名 desc score 4.建表create tabl ...
- It was not possible to find any compatible framework version
It was not possible to find any compatible framework version The specified framework 'Microsoft.NETC ...