大家好，才是真的好。
众所周知，Web应用是大势所趋，而Web应用中的第一步就是页面布局。所以今天我们来介绍Domino Web应用中的页面布局。
完全零基础是不可能学习掌握的，凡是这么说的，都是在骗你，比如不努力就能发财致富。您得有点概念，如知道什么是HTML和CSS。
是不是很惊喜？要求是不是很低？跟没有要求一样。
而且我们的标题是一行代码就可以进行布局，是不是更加惊喜？
当然，也请大家不要吹毛求疵，有时候为了效果展现，可能用了多于一行以上的代码，希望看的时候不要介意。
好了，我们先揭晓答案，通常，Web页面中存在几种常用的布局方式
其实，常用的页面布局非常少，就几个，而这些中的最常用的又是5个经典布局。所有这些布局都是自适应(响应式)，这些布局主要采用flex(主要用于一维布局)和grid(二维布局)方式实现，现代浏览器都支持，也都能自动适应PC桌面和移动终端设备显示——当然，您要是使用IE6或更早的IE浏览器，就当我没说吧。
为了一边讲解，一边学习。大家可以跟着我们的步骤，新建一个Notes数据库，而后在里面新建页面元素来进行布局的学习。
新建页面完成后，请记得在页面属性中，设置页面内容为HTML，如下图：
接着，我们依次讲解居中布局、两栏式布局、三明治布局、圣杯布局和
并列式布局等。
一、居中布局
在登陆页面中用到不少。意思是不管页面多大，反正内容都是居中显示。类似效果如下：
我们先在页面中写一个div容器：
随便
而后写上两行样式即可(请不要斤斤计较标题中的一行代码)
.container {
display: grid;
place-items: center;
}
效果类似于下图：
然后我们在浏览器中进行预览：
嗯，您是不是看不出有啥？
是的，为了兑现标题中的一行代码，我们没加背景、字体、边框等样式属性，所以显得没什么效果。
现在我们多加一点点样式效果，即容器的背景和高度，如下图：
再请预览一下，Duang！好看很多哦：
居中布局还可以变换几种样式，比如把中间的显示元素，放到左边或右边都可以，主要是place-items属性，我们设置为了center，你可以设置start或end试试看。
二、两栏式布局
意如其字，就是两个栏位。经典的Notes传统CS应用就是左边导航栏，右边视图显示。样子如下：
现在请新建一个页面，先写上边栏容器和内容：
content
接着上样式：
body {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
padding: 0;
margin: 0;
}
.sidebar {
height: 100vh;
background: lightpink;
font-size: 2rem;
text-align: center;
}
.content {
padding: 2rem;
}
我们预览页面时，可以看到布局结果：
里面很多样式为了显示区别背景颜色而加上去的，其实核心只有两行，如下图：
三、三明治布局
三明治页面是支在垂直方向上，分成三部分：页眉、内容区、页脚，看起来像三明治夹层，所以称之为三明治布局。
既然是三层，所以我们先在页面上用Div定义三个容器：
接着写上样式：
body{
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
.header {
background: lightpink;
padding: 2rem;
}
.main {
background: coral;
}
.footer {
background: wheat;
padding: 2rem;
text-align: center;
}
预览页面效果：
您可能又猜对了，其中最重要的就是两行，如下图所示：
四、圣杯布局
据说因为这种布局是采用最多，所以称之为圣杯布局，凡是用了这种页面布局的都不会犯什么大错：
我们来看看怎么在Domino应用中实现它，还是先定义容器，这回要多一点，毕竟有5个项目组成：
header
main
Footer
接着我们写上样式：
body {
display: grid;
height: 100vh;
grid-template: auto 1fr auto / auto 1fr auto
}
header {
background: lightpink;
padding: 2rem;
grid-column: 1 / 4;
}
.left-sidebar {
background: lightblue;
grid-column: 1 / 2;
}
main {
background: coral;
grid-column: 2 / 3;
}
.right-sidebar {
background: yellow;
grid-column: 3 / 4;
}
footer {
background: wheat;
padding: 2rem;
text-align: center;
grid-column: 1 / 4;
}
body {
font-family: system-ui, sans-serif;
}
.left-sidebar,
.right-sidebar {
padding: 1rem;
}
预览效果：
您依然没有猜错，最核心样式也是两行，其他都是锦上添花
五、并列式布局
并列式布局就是多个项目并列，可横可竖，看显示设备大小：
我们在Domino页面中，定义一个DIV容器，而后定义三个子项目：
接着写上样式：
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
background: lightblue;
height: 500px;
}
.item {
flex: 1 1 300px;
border: 1px solid red;
background: lightpink;
font-size: 2rem;
text-align: center;
}
预览一下：
随着显示屏幕大小变化，可横可竖：
起作用的依旧是两行：
有人说，不对，你标题都是说一行，怎么内容全都是两行实现。
要我说，您写样式时不回车，这代码的确就是一行...
好了，今天我们就写到这里吧。
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
