网页布局 响应式页面
十二月二十九
1.网页布局 定义网站结构的模式
2.网页布局分为几个部分
头部区域 菜单导航 内容 底部
overflow：hidden溢出隐藏
disolay：flex弹性布局
justify-content：space-between均分
3.媒体查询
viewport视窗宽度与高度
设备宽度与高度
朝向（智能手机横屏/竖屏);
分辨率
包含一个或者多个表达式 根据条件是否成立返回true或者false
4.响应式页面
flex-flow：wrap换行
nowrap-不换行
WRAP-reverse 换行第一行在下边 取反
flex:1 auto 独占一份
5.栅格布局 不同媒体类型 定义不同样式
1.Table布局
1.1table元素以及相关元素布局
1.2 表格相关的display属性值模拟表格布局
table块级
inline-table内联表格
table-row-group一个或者多个行分组
verical-align:hiiden 垂直显示
2.flex布局
弹性布局 为盒装模型提供最大灵活性
采用flex 子元素float，clear会失效
默认 水平主轴 与垂直交叉轴
主轴 main start 结束位置 main end
交叉轴 cross start 结束位置 cross end
flex-direction 属性决定主轴方向
row 主轴水平方向 起点左端
row-reverse 主轴水平 起点右端
column主轴垂直 起点上沿
column-reverse 主轴垂直 起点下沿
flex-flow方向与换行
justify-content 主轴对其方式
align-items 交叉轴如何对齐
order数值越小 排列越靠前 默认为0
flex-grow属性 放大比例 默认为0 如果存在剩余空间 也不放大
值越大地位越大
flex-shrink 缩小比例 默认1 空间不足 项目缩小
flex-basis 设置跟宽高一样值 则占据固定空间 分配多余空间 项目占据主轴空间
align-self允许单个项目与其他
3.Grid布局 网格布局 最强大css布局方案 唯一css二维布局
一个分在容器上面 一个分在项目上面
grid-template-columns行高
grid-template-rows列宽
repeat重复
auto-fill自动填充
minmax最小最大范围
row-gap行与行间距 column-gap列于列间距
grid-auto-flow:row先行后列
column先列后行
justify-content水平位置 align-items垂直位置
网页布局 响应式页面相关推荐
- 网页 布局响应式设计
一.为什么要使用响应式设计? 我们想让我们的网站通过响应用户的行为.设备的屏幕大小和屏幕方向,从而在所有设备上都能用. 二.一个碎片化的世界 截止2013年,有成千上万种不同的设备在浏览网页,所以我们 ...
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- 移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录 一.移动端自适应布局 1.rem 什么是rem ...
- 跨终端响应式页面设计入门
跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图: 这里 ...
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- 显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 自适应网页设计/响应式Web设计 （Responsive Web Design）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 软件测试基础 按照测试对象划分 界面测试（UI测试.响应式页面 可靠性测试 容错性测试 文档测试 平台测试 易用性测试等
软件测试进阶 1.APP 的测试 2. 按照测试对象划分 2.1界面测试(UI测试) 3.响应式页面 4.可靠性测试 5.容错性测试 6.文档测试 7.平台测试: 7.1 PC: 7.2.手机端: 8 ...
最新文章
- 华硕fx80装linux,华硕fx80【解决思路】
- SAP WM自动创建TO后台作业报错 - Processing Type没有维护 - 之对策
- BZOJ 1503 treap
- php+mysqli,php+mysqli数据库连接的两种方式
- python 爬关键词,Python爬虫实战：爬取微博热搜关键词
- 小程序使用sass_如何使用Sass Maps生成所有实用程序类
- php 基础入门篇之前言
- 网络协议笔记-数据链路层
- ND2D源码及范例工程(编译通过)
- java 按顺序读取文件夹_java读取某个文件夹下的所有文件实例代码
- pc企业微信hook接口，企业微信营销软件，企业微信群发
- 金融计算机加权平均,什么是加权平均
- 第2章 系统配置及驱动配置
- 项目管理的五大过程组及十大知识领域
- java流分类_什么是流分类-JAVA中什么是流？流经常按照哪几种方式分类，每种方式又将流各分? 爱问知识人...
- QT如何实现二级下拉菜单(Combo box)
- 软件开发中什么是CI/CD
- 品质担当，有效提升办公生产力，永艺XY人体工学椅开箱实测
- Lingoes安装词典和语音库
- 近视眼用什么台灯比较好？防近视眼护眼台灯排名