element中的列表table

element中的列表table

 

 

element的UI布局：      https://element.eleme.cn/#/zh-CN/component/layout

 

还有flex布局弹性布局

?
1
2
/* 弹性布局的对齐方式。最重要的就是两句话 1）display:flex;把布局样式设置为弹性布局 2）justify-content这个设置为一个量。 */
        /* 1设置布局方向主轴方向flex-direction 2设置主轴上子元素的排列方式。justify-content设置布局里面子元素的排列方式。 */
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        /* 设置父盒子是flex布局 */
        display: flex;
        width: 800px;
        height: 400px;
        background-color: pink;
        /* 弹性布局的对齐方式。最重要的就是两句话 1）display:flex;把布局样式设置为弹性布局 2）justify-content这个设置为一个量。 */
        /* 1设置布局方向主轴方向flex-direction 2设置主轴上子元素的排列方式。justify-content设置布局里面子元素的排列方式。 */
        flex-direction: row;
        /* 这个是主轴的显示 */
        justify-content: space-around;
        /* align-items是侧轴的居中显示 */
        align-items: center;
      }
      div span {
        width: 100px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div><span>1</span><span>2</span><span>3</span></div>
  </body>
</html>

　　

 

posted on   xiaoluoke  阅读(212)  评论(0)  编辑  收藏  举报

相关博文：
·  要学的知识：圣杯布局
·  ElementUI是主要用的框架
·  flex布局
·  CSS页面布局及排版
·  flex-弹性布局
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示
AI IDE Trae