网页布局响应式页面

十二月二十九
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 ...

网页布局响应式页面

网页布局响应式页面相关推荐

最新文章

热门文章

网页布局 响应式页面

网页布局 响应式页面相关推荐

最新文章

热门文章

网页布局响应式页面

网页布局响应式页面相关推荐