博客
关于我
记移动端一些页面布局样式
阅读量: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 CONCAT()函数拼接有NULL
查看>>
multiprocessing.Manager 嵌套共享对象不适用于队列
查看>>
multiprocessing.pool.map 和带有两个参数的函数
查看>>
MYSQL CONCAT函数
查看>>
multiprocessing.Pool:map_async 和 imap 有什么区别?
查看>>
MySQL Connector/Net 句柄泄露
查看>>
multiprocessor(中)
查看>>
mysql CPU使用率过高的一次处理经历
查看>>
Multisim中555定时器使用技巧
查看>>
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>
mutiplemap 总结
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>