css布局
文章平均质量分 85
nunumaymax
铁杵磨成针
展开
-
响应式布局
响应式布局一、什么是响应式页面?百度是响应式页面吗?二、媒体查询三、制作响应式页面四、响应式页面的优点与缺点一、什么是响应式页面?同一套静态页面代码,在不同的设备中展现出不同的效果。百度是响应式页面吗?百度不是响应式页面,它其实是两套代码。它会监听终端设备,若是电脑访问则展示电脑端的页面,若是手机访问则展示移动端的页面。PC端页面:移动端页面:二、媒体查询通过@media定义样式,浏览器窗口满足指定条件,才会应用此样式。代码如下:.box { width:200px; he原创 2022-04-26 14:37:18 · 386 阅读 · 0 评论 -
grid布局
grid网格布局前言一、基本概念1. 容器和项目2.行和列3. 单元格4. 网格线三、容器属性1.display 属性2. grid-template-columns属性,grid-template-rows属性3. grid-row-gap 属性,grid-column-gap 属性,grid-gap 属性4. grid-template-areas 属性5. grid-auto-flow 属性6. justify-items 属性,align-items 属性,place-items 属性7. just转载 2022-04-22 23:08:50 · 738 阅读 · 0 评论 -
flex布局
flex弹性布局前言一、基本概念1.容器和元素2.主轴与交叉轴3.flex容器中的默认效果二、容器的属性1.flex-direction属性2.flex-wrap属性3.flex-flow属性4.justify-content属性总结前言此前我们制作的所有网页都是基于盒子模型和浮动布局完成的,flex布局又叫弹性布局(或者叫弹性盒子布局),这是一种更先进的布局方式,可以让网页布局更简洁,更易于维护。一、基本概念1.容器和元素将元素设置为display:flex; 元素就会变为一个flex容器(f转载 2022-04-07 22:34:23 · 98 阅读 · 0 评论