博客
关于我
记移动端一些页面布局样式
阅读量: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/

你可能感兴趣的文章
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>
Moment.js常见用法总结
查看>>
MongoDB出现Error parsing command line: unrecognised option ‘--fork‘ 的解决方法
查看>>
MongoDB学习笔记(8)--索引及优化索引
查看>>
ms sql server 2008 sp2更新异常
查看>>
MS UC 2013-0-Prepare Tool
查看>>
msbuild发布web应用程序
查看>>
MSCRM调用外部JS文件
查看>>