ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
[TOC] > [layout](https://sli.dev/builtin/layouts.html) ## Layouts ## 常规布局 ``` intro 介绍演示文稿,通常带有演示标题,简短描述,作者 quote 用于突出引用 section 章节开始的布局 center default end 结束页 fact 在屏幕上突出 标题 none 取消所有样式 two-cols 左右两列 ``` ### two-cols ``` --- layout: two-cols --- # Left This shows on the left ::right:: # Right This shows on the right ``` ## 图片处理 ### image-left,image-right ``` --- layout: image-left # the image source image: ./path/to/the/image --- # hello hello world ``` 效果 ![](https://img.kancloud.cn/f1/71/f1719658639ea21705cc3bfbfaa317e2_1049x619.png) ### image ,cover 图片当作背景 - image 布局是将图片插入到文档中,然后根据指定的宽度和高度进行缩放和裁剪,最终以原图为背景 - 而 cover 布局则是将图片作为背景,填充整个父容器 - 因此,image 布局主要用于显示具体的图片内容,可以在图片周围添加文本和其他元素;而 cover 布局主要用于背景显示,以提供更具有视觉冲击力和艺术性的页面效果。根据实际需求,可以选择使用其中一种或两种布局来展示图片 ### iframe,iframe-left,iframe-right 网页填充