记移动端一些页面布局样式-白红宇

记移动端一些页面布局样式

阅读量：392 次

发布时间：2019-03-05

本文共 436 字，大约阅读时间需要 1 分钟。

记移动端一些页面布局样式

很多高度都是用rem，宽度用百分比

1，搜索栏，固定定位，宽度100%，给定高度，display：flex

在这里插入图片描述

1.1 左边

在这里插入图片描述

1.2 中间

在这里插入图片描述

1.3 右边

在这里插入图片描述

2，tabceil

在这里插入图片描述

2.1最外层section，宽度100%，table布局

在这里插入图片描述

2.2 里面div 无宽无高，溢出隐藏

在这里插入图片描述

2.3 a标签，display：table-ceil，宽度20%，左浮动

在这里插入图片描述

2.4 图标，给定宽高，背景图片，定位居中

在这里插入图片描述

2.5文字

在这里插入图片描述

3，ul li横向滚动四层包裹

在这里插入图片描述

3.1 最外层不设宽高的盒子第二层给定高度，overflow隐藏

在这里插入图片描述

3.2 第三层ul 给定高度，overflow：auto；width：auto；nowrap不换行

在这里插入图片描述

3.3 最里层li

在这里插入图片描述

3.4 li里面图片

在这里插入图片描述

4，左右各占50%的纵向排列

在这里插入图片描述

4.1都是套了两层的，最外面section

在这里插入图片描述

4.2 里层div

在这里插入图片描述

4.3 最里面a标签

在这里插入图片描述

4.4 a标签里面盒子

在这里插入图片描述

4.5 图片

在这里插入图片描述

4.6文字就flex布局了，可以px也可以rem

转载地址：http://vcgwz.baihongyu.com/

你可能感兴趣的文章

Mysql 共享锁

MySQL 内核深度优化

mysql 内连接、自然连接、外连接的区别

mysql 写入慢优化

mysql 分组统计SQL语句

Mysql 分页语句 Limit原理

MySQL 创建新用户及授予权限的完整流程

mysql 创建表，不能包含关键字values 以及表id自增问题

mysql 删除日志文件详解

mysql 判断表字段是否存在，然后修改

mysql 协议的退出命令包及解析

mysql 取表中分组之后最新一条数据分组最新数据分组取最新数据分组数据获取每个分类的最新数据

mysql 多个表关联查询查询时间长的问题

mySQL 多个表求多个count

mysql 多字段删除重复数据，保留最小id数据

MySQL 多表联合查询：UNION 和 JOIN 分析

MySQL 大数据量快速插入方法和语句优化

mysql 如何给SQL添加索引

mysql 字段区分大小写