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

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

阅读量：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 tinyint(1)与tinyint(4)的区别

mysql union orderby 无效

mysql v$session_Oracle 进程查看v$session

mysql where中如何判断不为空

MySQL Workbench 使用手册：从入门到精通

mysql workbench6.3.5_MySQL Workbench

MySQL Workbench安装教程以及菜单汉化

MySQL Xtrabackup 安装、备份、恢复

mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes

MySQL _ MySQL常用操作

MySQL – 导出数据成csv

MySQL —— 在CentOS9下安装MySQL

MySQL —— 视图

mysql 不区分大小写

mysql 两列互转

MySQL 中开启二进制日志（Binlog）

MySQL 中文问题

MySQL 中日志的面试题总结

mysql 中的all,5分钟了解MySQL5.7中union all用法的黑科技

MySQL 中的外键检查设置：SET FOREIGN_KEY_CHECKS = 1