做网站需要什么材料,美食网站开发背景,网站建设课程设计实验指导书,网络运营商1、网格布局 Grid布局
流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样#xff0c;页面上的元素可以根据屏幕宽度自动调整大小#xff0c;适应不同设备和分辨率。
!DOCTYPE html
html langen
页面上的元素可以根据屏幕宽度自动调整大小适应不同设备和分辨率。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{padding:0;margin:0;}.container{width:100vw;height:100vh;background-color: #775c5c;/*声明内部使用网格布局对直接子元素生效*/display: grid;/*设置行数和行的高度*/grid-template-rows:100px 100px 100px;/*设置列和列宽度*/grid-template-columns: 100px 100px 100px 100px;}.item{border: 1px solid #ccc;box-sizing: border-box;background-color: #fff;}/style
/head
bodydiv classcontainerdiv classitem1/divdiv classitem2/divdiv classitem3/divdiv classitem4/divdiv classitem5/divdiv classitem6/divdiv classitem7/divdiv classitem8/divdiv classitem9/divdiv classitem0/divdiv classitem11/divdiv classitem12/div/div
/body
/html利用fr分成等份根据屏幕大小自适应
style*{padding:0;margin:0;}.container{width:100vw;height:100vh;background-color: #775c5c;/*声明内部使用网格布局对直接子元素生效*/display: grid;/*设置行数和行的高度grid-template-rows:1fr 1fr 1fr 1fr;grid-template-rows:repeat(4,1fr); */grid-template-rows:repeat(2,1fr) 2fr 1fr;/*设置列和列宽度*/grid-template-columns: 1fr 1fr 1fr;}.item{border: 1px solid #ccc;box-sizing: border-box;background-color: #fff;}/style网格之间间距 gap: 30px; grid-row-gap:行间距 grid-column-gap:列间距
跨越两列横向合并 .one{ grid-column: span 2;//跨两列
} .two{ grid-row: span 3;//跨越三行纵向 }
把被合并的注释掉样式写在第一个上面
.three{ grid-area:span 2/span 3; //网格区域 跨行/跨列 }
搭建
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{padding: 0;margin: 0;}.container{width: 100%;height: 800px;background-color: #ced6e9;display: grid;grid-template-columns: 20% 25% 25% 25%;grid-template-rows: 10% 20% 20% 20% 20%;gap: 10px;}.one{grid-column: span 4;}.three{grid-column: span 3;grid-row: span 2;}.four{grid-row: span 3;}.five{grid-row: span 2;grid-column: span 2;}.item{font-size: 20px;text-align: center;display: flex;justify-content: center;align-items: center;background-color: rgb(255, 222, 239);}/style
/head
bodydiv classcontainerdiv classitem one1/divdiv classitem2/divdiv classitem three3/divdiv classitem four4/divdiv classitem five5/divdiv classitem6/divdiv classitem7/div/div
/body
/html
