精华内容
下载资源
问答
  • vue vue-element-ui组件 layout布局系列学习(一)

    万次阅读 多人点赞 2018-04-04 10:58:50
    本文仅供参考: 首先你要掌握的基础知识: row 行概念 <el-row>...col组件的:span属性的布局调整,一共分为24栏: 代码示例: <el-row> <el-col :span="24"><div class="g...

    本文仅供参考:

    首先你要掌握的基础知识:

    row 行概念

    <el-row></el-row>

    col 列概念

    <el-col></el-col>

    col组件的:span属性的布局调整,一共分为24栏:

    代码示例:

    <el-row>
      <el-col :span="24"><div class="grid-content"></div></el-col>
    </el-row>           

    效果展示:

    代码示例:

    <el-row>
      <el-col :span="12"><div class="grid-content"></div></el-col>
    </el-row>

    效果展示:

    row组件的:gutter属性来调整布局之间的宽度---分栏间隔

    代码示例:

    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

     

    效果:


     

    Col组件的:offset属性调整方块的偏移位置(每次1格/24格)

     

    <el-row :gutter="20">
      <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
    </el-row>

     

    效果:


     

    对齐方式:

    row组件的type="flex"启动flex布局,再通过row组件的justify属性调整排版方式,属性值分别有:

     

    1. justify=center 居中对齐
    2. justify=start 左对齐
    3. justify=end 右对齐
    4. justify=space-between 空格间距在中间对齐
    5. justify=space-around 左右各占半格空格对齐
     <el-row type="flex" class="row-bg" justify="center">
       <el-col :span="6"><div class="grid-content"></div></el-col>
     </el-row>



    效果:


     

    响应式布局:

    参考bootstrap的响应式,预设四个尺寸

    1. xs <768px
    2. sm ≥768px
    3. md ≥992
    4. lg ≥120
    使用方式:
    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

     

    练习示例:

     

            <span class="field-label">方块选择:</span>
            <!-- 选择屏幕框 -->
              <select v-model="selected" @change="selectbj(selected)">
                <option v-for="option in layouts" :value="option.value">
                    {{ option.name }}
                </option>
              </select>

     

    data默认初始化数据:

          selected: 0,
          layouts: [
            { 'name': '1x1模式', 'value': '0' },
            { 'name': '2x1模式', 'value': '1' },
            { 'name': '2x2模式', 'value': '2' },
            { 'name': '3x2模式', 'value': '3' },
            { 'name': '3x3模式', 'value': '4' },
            { 'name': '1+5模式', 'value': '5' }
          ],

     

    布局代码:

        <el-main v-model="selected" >
          <div class="block" style="height:400px">
                <!-- {{selected}} -->
                <div style="height:100%;width:100%" v-if="selected==0">
                <!-- 1*1布局 -->
                    <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
                      <el-col :span="24"></el-col>
                    </el-row>
                </div>
                <!-- 2*1布局 -->
                <div style="height:100%;width:100%" v-else-if="selected==1">
                    <el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                </div>
                <!-- 2*2 -->
                <div style="height:100%;width:100%" v-else-if="selected==2">
                  <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                </div>
                <!-- 3*2布局 -->
                <div style="height:100%;width:100%" v-else-if="selected==3">
                  <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                      <el-col :span="12"><div class="grid-content "></div></el-col>
                    </el-row>
                </div>
                <!-- 3*3模式 -->
                <div style="height:100%;width:100%" v-else-if="selected==4">
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                    </el-row>
                </div>
                <!-- 模式 -->
                <div style="height:100%;width:100%" v-else>
                   <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                      <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                    </el-row>
                    <br>
                    <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                        <el-col :span="8">
                          <div class="grid-a-contentWidth"></div>
                          <br>
                          <div class="grid-a-contentWidth"></div>
                          </el-col>
                        <el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
                    </el-row>  
                </div>
              </div>
        </el-main>

     

    样式(从里面对应取一下):

    <style scoped>
      .box-card{
        width: 400px;
        margin: 20px auto;
      }
      .block{
        padding: 30px 24px;
        background-color: rgb(27, 16, 16);
      }
      .alert-item{
        margin-bottom: 10px;
      }
      .tag-item{
        margin-right: 15px;
      }
      .link-title{
        margin-left:35px;
      }
      .components-container {
    		position: relative;
    		height: 100vh;
    	}
    
    	.left-container {
    		background-color: #F38181;
    		height: 100%;
    	}
    
    	.right-container {
    		background-color: #FCE38A;
    		height: 200px;
    	}
    
    	.top-container {
    		background-color: #FCE38A;
    		width: 100%;
    		height: 100%;
    	}
    
    	.bottom-container {
    		width: 100%;
    		background-color: #95E1D3;
    		height: 100%;
    	}
    
      .left-container-twoOne {
    		background-color: rgb(110, 75, 75);
        height: 100%;
      }
    
      .container-onetoOne {
          background-color: rgb(47, 80, 74);
          height: 100%;
          width: 50%;
      }
    
      .container-onetoTwo {
          background-color: rgb(61, 19, 56);
          height: 100%;
          width: 50%;
      }
    
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #57926b;
      }
      .bg-purple {
        background: #7e2970;
      }
      .bg-purple-light {
        background: #071c4d;
      }
      .grid-content {
        background-color: rgb(44, 143, 121);
        border-radius: 4px;
        min-height: 150px;
        min-width: 100px;
      }
      .grid-contentB {
        background-color: rgb(64, 56, 134);
        border-radius: 4px;
        min-height: 150px;
        min-width: 100px;
      }
      .grid-a-contentWidth {    
        background-color: rgb(44, 143, 121);
        border-radius: 4px;
        min-height: 100px;
      }
      .grid-a-content-a-Width {    
        background-color: rgb(44, 143, 121);
        border-radius: 4px;
        min-height: 220px;
      }
    
      .grid-one-contentheight {    
        background-color: rgb(44, 143, 121);
        border-radius: 4px;
        min-height: 100%;
      }
    
    .el-row-two {
        margin-bottom: 80px;
        margin-top: 80px;
      
      }
    </style>


    效果:


     


     

    展开全文
  • Python GUI之tkinter布局管理

    万次阅读 多人点赞 2017-01-02 23:08:06
    tkinter 共有三种几何布局管理器,分别是:pack布局,grid布局,place布局。 pack布局 使用 pack布局,将向容器中添加组件,第一个添加的组件在最上方,然后是依次向下添加。 from tkinter import *root = Tk()#...

    Python3 tkinter系列

    一、概述
    二、布局管理
    三、常用组件
    四、实战(一)
    五、实战(二)
    六、进阶 自定义控件
    推荐视频课程 tkinter从入门到实战

    所谓布局,就是指控制窗体容器中各个控件(组件)的位置关系。tkinter 共有三种几何布局管理器,分别是:pack布局,grid布局,place布局。


    pack布局
    使用 pack布局,将向容器中添加组件,第一个添加的组件在最上方,然后是依次向下添加。

    from tkinter import *
     
    root = Tk()
     
    #创建三个 Label 分别添加到root窗体中 
    #Label是一种用来显示文字或者图片的组件
    Label(root,text = 'pack1',bg = 'red').pack() 
    Label(root, text = 'pack2', bg = 'blue').pack() 
    Label(root, text = 'pack3', bg = 'green').pack() 
     
    root.mainloop()
    

    如图:
    这里写图片描述

    pack常用属性

    属性名 属性简析 取值 取值说明
    fill 设置组件是否向水平或垂直方向填充 X、Y、BOTH 和NONE fill = X(水平方向填充)fill = Y(垂直方向填充)fill = BOTH(水平和垂直)NONE 不填充
    expand 设置组件是否展开,当值为YES时,side选项无效。组件显示在父容器中心位置;若fill选项为BOTH,则填充父组件的剩余空间。默认为不展开 YES 、NO(1、0) expand=YES expand=NO
    side 设置组件的对齐方式 LEFT、TOP、RIGHT、BOTTOM 值为左、上、右、下
    ipadx、ipady 设置x方向(或者y方向)内部间隙(子组件之间的间隔) 可设置数值,默认是0 非负整数,单位为像素
    padx、pady 设置x方向(或者y方向)外部间隙(与之并列的组件之间的间隔) 可设置数值,默认是0 非负整数,单位为像素
    anchor 锚选项,当可用空间大于所需求的尺寸时,决定组件被放置于容器的何处 N、E、S、W、NW、NE、SW、SE、CENTER(默认值为CENTER) 表示八个方向以及中心
    注意:上表中取值都是常量,YES等价于"yes",亦可以直接传入字符串值。另外当界面复杂度增加时,要实现某种布局效果,需要分层来实现。
    from tkinter import *    #注意模块导入方式,否则代码会有差别
     
    class App:
        def __init__(self, master):
            #使用Frame增加一层容器
            fm1 = Frame(master)
            #Button是一种按钮组件,与Label类似,只是多出了响应点击的功能
            Button(fm1, text='Top').pack(side=TOP, anchor=W, fill=X, expand=YES)
            Button(fm1, text='Center').pack(side=TOP, anchor=W, fill=X, expand=YES)
            Button(fm1, text='Bottom').pack(side=TOP, anchor=W, fill=X, expand=YES)
            fm1.pack(side=LEFT, fill=BOTH, expand=YES)
     
            fm2 = Frame(master)
            Button(fm2, text='Left').pack(side=LEFT)
            Button(fm2, text='This is the Center button').pack(side=LEFT)
            Button(fm2, text='Right').pack(side=LEFT)        
            fm2.pack(side=LEFT, padx=10)
     
            
    root = Tk()
    root.title("Pack - Example")
    display = App(root)
    root.mainloop()
    

    如上,创建一个Frame容器fm1,将三个垂直排列的Button组件使用pack布局放入fm1容器中,然后创建fm2容器,同样将三个水平排列的Button组件放入,最后将两个Frame容器当做组件,使用pack布局放入根窗体容器中。如此分层布局,实现了相对复杂一些的界面需求。
    这里写图片描述

    pack类提供了下列函数(使用组件实例对象调用):

    函数名 描述
    pack_slaves() 以列表方式返回本组件的所有子组件对象。
    pack_configure(option=value) 给pack布局管理器设置属性,使用属性(option)= 取值(value)方式设置
    propagate(boolean) 设置为True表示父组件的几何大小由子组件决定(默认值),反之则无关。
    pack_info() 返回pack提供的选项所对应得值。
    pack_forget() Unpack组件,将组件隐藏并且忽略原有设置,对象依旧存在,可以用pack(option, …),将其显示。
    location(x, y) x, y为以像素为单位的点,函数返回此点是否在单元格中,在哪个单元格中。返回单元格行列坐标,(-1, -1)表示不在其中
    size() 返回组件所包含的单元格,揭示组件大小。

    grid布局
    grid布局又被称作网格布局,是最被推荐使用的布局。程序大多数都是矩形的界面,我们可以很容易把它划分为一个几行几列的网格,然后根据行号和列号,将组件放置于网格之中。使用grid 布局时,需要在里面指定两个参数,分别用row 表示行,column 表示列。需要注意的是 row 和 column 的序号都从0 开始。

    如下图,假设将界面分成网格。
    描述

    grid属性设置

    属性名 属性简析 取值 取值说明
    row、column row为行号,column为列号,设置将组件放置于第几行第几列 取值为行、列的序号,不是行数与列数 row 和 column 的序号从0开始,但是,column的默认值是0,row的默认值是下一个编号较大的未占用行号
    sticky 设置组件在网格中的对齐方式(前提是有额外的空间) N、E、S、W、NW、NE、SW、SE 类似于pack布局中的锚选项
    rowspan 组件所跨越的行数 默认值为1 取值为跨越占用的行数,而不是序号
    columnspan 组件所跨越的列数 默认值为1 取值为跨越占用的列数,而不是序号
    ipadx、ipady、padx、pady 组件的内部、外部间隔距离,与pack的该属性用法相同 同pack 同pack

    grid类提供了下列函数(使用组件实例对象调用):

    函数名 描述
    grid_slaves() 以列表方式返回本组件的所有子组件对象。
    grid_configure(option=value) 给pack布局管理器设置属性,使用属性(option)= 取值(value)方式设置
    grid_propagate(boolean) 设置为True表示父组件的几何大小由子组件决定(默认值),反之则无关。
    grid_info() 返回pack提供的选项所对应得值。
    grid_forget() Unpack组件,将组件隐藏并且忽略原有设置,对象依旧存在,可以用pack(option, …),将其显示。
    grid_location(x, y) x, y为以像素为单位的点,函数返回此点是否在单元格中,在哪个单元格中。返回单元格行列坐标,(-1, -1)表示不在其中
    size() 返回组件所包含的单元格,揭示组件大小。

    place布局。
    最简单最灵活的一种布局,使用组件坐标来放置组件的位置。但是不太推荐使用,在不同分辨率下,界面往往有较大差异。

    place属性设置

    属性名 属性简析 取值 取值说明
    anchor 锚选项,同pack布局 默认值为 NW 同pack布局
    x、y 组件左上角的x、y坐标 整数,默认值0 绝对位置坐标,单位像素
    relx、rely 组件相对于父容器的x、y坐标 0~1之间浮点数 相对位置,0.0表示左边缘(或上边缘),1.0表示右边缘(或下边缘)
    width、height 组件的宽度、高度 非负整数 单位像素
    relwidth、relheight 组件相对于父容器的宽度、高度 0~1之间浮点数 与relx(rely)取值相似
    bordermode 如果设置为INSIDE,组件内部的大小和位置是相对的,不包括边框;如果是OUTSIDE,组件的外部大小是相对的,包括边框 INSIDE、OUTSIDE(默认值INSIDE) 可以使用常量INSIDE、OUTSIDE,也可以使用字符串形式"inside"、"outside"

    place类提供了下列函数(使用组件实例对象调用):

    函数名 描述
    place_slaves() 以列表方式返回本组件的所有子组件对象。
    place_configure(option=value) 给pack布局管理器设置属性,使用属性(option)= 取值(value)方式设置
    propagate(boolean) 设置为True表示父组件的几何大小由子组件决定(默认值),反之则无关。
    place_info() 返回pack提供的选项所对应得值。
    grid_forget() Unpack组件,将组件隐藏并且忽略原有设置,对象依旧存在,可以用pack(option, …),将其显示。
    location(x, y) x, y为以像素为单位的点,函数返回此点是否在单元格中,在哪个单元格中。返回单元格行列坐标,(-1, -1)表示不在其中
    size() 返回组件所包含的单元格,揭示组件大小。

    关注个人公众号:编程之路从0到1

    编程之路从0到1

    展开全文
  • css经典布局——圣杯布局

    万次阅读 多人点赞 2019-01-18 11:49:09
    圣杯布局和双飞翼布局一直是前端面试的高频考点,圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》。比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,...

             圣杯布局双飞翼布局一直是前端面试的高频考点,圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。

    效果图

            原本录制了一个小视频,奈何不能上传到博客中,视频中通过缩放页面可以发现随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子宽度固定不变,即使页面宽度变小,也不影响我们的浏览。注意:为了安全起见,最好还是给body加一个最小宽度!

     圣杯布局要求

    • header和footer各自占领屏幕所有宽度,高度固定。
    • 中间的container是一个三栏布局。
    • 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。
    • 中间部分的高度是三栏中最高的区域的高度。

    圣杯布局的三种实现

    【1】浮动

    • 先定义好header和footer的样式,使之横向撑满。
    • 在container中的三列设为浮动和相对定位(后面会用到),center要放在最前面,footer清除浮动。
    • 三列的左右两列分别定宽200px和150px,中间部分center设置100%撑满
    • 这样因为浮动的关系,center会占据整个container,左右两块区域被挤下去了
    • 接下来设置left的 margin-left: -100%;,让left回到上一行最左侧
    • 但这会把center给遮住了,所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;,给left和right空出位置
    • 这时left并没有在最左侧,因为之前已经设置过相对定位,所以通过 left: -200px; 把left拉回最左侧
    • 同样的,对于right区域,设置 margin-left: -150px; 把right拉回第一行
    • 这时右侧空出了150px的空间,所以最后设置 right: -150px;把right区域拉到最右侧就行了。
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    </head>
    <style>
      body {
        min-width: 550px;  /* 2x leftContent width + rightContent width */
        font-weight: bold;
        font-size: 20px;
      }
    
      #header, #footer {
        background: rgba(29, 27, 27, 0.726);
        text-align: center;
        height: 60px;
        line-height: 60px;
      }
      #footer {
        clear: both;
      }
    
      #container {
        padding-left: 200px;   /* leftContent width */
        padding-right: 150px;  /* rightContent width */
        overflow: hidden;
      }
    
      #container .column {
        position: relative;
        float: left;
        text-align: center;
        height: 300px;
        line-height: 300px;
      }
    
      #center {
        width: 100%;
        background: rgb(206, 201, 201);
      }
    
      #left {
        width: 200px;           /* leftContent width */
        right: 200px;           /* leftContent width */
        margin-left: -100%;
        background: rgba(95, 179, 235, 0.972);
      }
    
      #right {
        width: 150px;           /* rightContent width */
        margin-left: -150px;   /* rightContent width */
        right: -150px;
        background: rgb(231, 105, 2);
      }
    
    </style>
    
    <body>
      <div id="header">#header</div>
      <div id="container">
        <div id="center" class="column">#center</div>
        <div id="left" class="column">#left</div>
        <div id="right" class="column">#right</div>
      </div>
      <div id="footer">#footer</div>
    
    
    </body>
    
    </html>

    【2】flex弹性盒子

    • header和footer设置样式,横向撑满。
    • container中的left、center、right依次排布即可
    • 给container设置弹性布局 display: flex;
    • left和right区域定宽,center设置 flex: 1; 即可
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    </head>
    <style>
      body {
        min-width: 550px;  
        font-weight: bold;
        font-size: 20px;
      }
      #header, #footer {
        background: rgba(29, 27, 27, 0.726);
        text-align: center;
        height: 60px;
        line-height: 60px;
      }
      #container {
       display: flex;
      }
      #container .column {
        text-align: center;
        height: 300px;
        line-height: 300px;
      }
      #center {
        flex: 1;
        background: rgb(206, 201, 201);
      }
      #left {
        width: 200px;        
        background: rgba(95, 179, 235, 0.972);
      }
      #right {
        width: 150px;           
        background: rgb(231, 105, 2);
      }
    </style>
    
    <body>
      <div id="header">#header</div>
      <div id="container">
        <div id="left" class="column">#left</div>
        <div id="center" class="column">#center</div>
        <div id="right" class="column">#right</div>
      </div>
      <div id="footer">#footer</div>
    </body>
    
    </html>

    【3】grid布局

    如上图所示,我们把body划分成三行四列的网格,其中有5条列网格线

    • 给body元素添加display: grid;属性变成一个grid(网格)
    • 给header元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第一行网格的从第一条列网格线开始到第五条列网格线结束
    • 给footer元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第三行网格的从第一条列网格线开始到第五条列网格线结束
    • 给left元素设置grid-row: 2; 和 grid-column: 1/2; 意思是占据第二行网格的从第一条列网格线开始到第二条列网格线结束
    • 给center元素设置grid-row: 2; 和 grid-column: 2/4; 意思是占据第二行网格的从第二条列网格线开始到第四条列网格线结束
    • 给right元素设置grid-row: 2; 和 grid-column: 4/5; 意思是占据第二行网格的从第四条列网格线开始到第五条列网格线结束
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    </head>
    <style>
      body {
        min-width: 550px;
        font-weight: bold;
        font-size: 20px;
        display: grid;
      }
      #header,
      #footer {
        background: rgba(29, 27, 27, 0.726);
        text-align: center;
        height: 60px;
        line-height: 60px;
      }
      #header {
        grid-row: 1;
        grid-column: 1/5;
      }
      #footer {
        grid-row: 3;
        grid-column: 1/5;
      }
      .column {
        text-align: center;
        height: 300px;
        line-height: 300px;
      }
      #left {
        grid-row: 2;
        grid-column: 1/2;
        background: rgba(95, 179, 235, 0.972);
      }
      #center {
        grid-row: 2;
        grid-column: 2/4;
        background: rgb(206, 201, 201);
      }
      #right {
        grid-row: 2;
        grid-column: 4/5;
        background: rgb(231, 105, 2);
      }
    </style>
    
    <body>
      <div id="header">#header</div>
      <div id="left" class="column">#left</div>
      <div id="center" class="column">#center</div>
      <div id="right" class="column">#right</div>
      <div id="footer">#footer</div>
    </body>
    
    </html>

     

    文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

    展开全文
  • dva+antd+ts的路由菜单布局

    万次阅读 2020-08-28 22:06:39
    rfce(rcc)快速创建例子 1.路由配置 2.引入布局 加上this.props.children 3.react-loadable路由懒加载 4.给菜单加上链接 遍历动态渲染Menu push 别忘了加上@withRouter

    rfce(rcc)快速创建例子

    1.路由配置

    routes/config.ts

    import React from 'react'
    import { HomeOutlined, OrderedListOutlined, NotificationOutlined } from '@ant-design/icons';
    export interface route{
      title?: string
      pathname: string
      component: any
      isTop: boolean
    }
    const routes = [
      {
        title: 'Dashboard',
        pathname: '/dashboard',
        icon: HomeOutlined,
        component: React.lazy(() => import('../views/dashboard')),
      },
      {
        title: '欢迎',
        pathname: '/helloworld',
        icon:HomeOutlined,
        component: React.lazy(() => import('../views/helloworld')),
        isTop:true
      },
      {
        title: '罐管理',
        pathname: '/tankmanage',
        icon:OrderedListOutlined,
        component: React.lazy(() => import('../views/TankManage')),
        isTop:true
      },
      
      {
        title: '404',
        pathname: '/404',
        component: React.lazy(() => import('../views/404')),
        
      },
      {
        title: '/',
        pathname: '/',
        component: React.lazy(() => import('../views/helloworld')),
        
      }
    ]
    
    export default routes 
    

    在这里插入图片描述
    /routes/createRoutes.tsx

    import React, { Suspense } from 'react'
    import { Router, Route, Switch, Redirect, RouteComponentProps, RouteProps } from 'dva/router'
    import routes, { route} from './config'
    import BaseLayout from '../components/layout/BaseLayout'
    import { Console } from 'console'
    const NoMatch: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
      return (
        <div>
          404..
        </div>
      )
    }
    
    const CreateRoutes: React.FC<RouteComponentProps> = ({ history }: RouteComponentProps) => {
      const generateRoute: React.FC<route> = ({
        pathname,
        component: Component
      }: RouteProps & route) => (
          <Route
            key={pathname}
            path={pathname}
            exact
            component={(props: RouteProps) => (
              <Suspense fallback={<div />}>
                <Component {...props} />
              </Suspense>
            )}
          />
        )
    
      return (
        <Router>
          '基础布局
          <BaseLayout>
            <Switch>
              {routes.map(({ pathname, component }: route) => generateRoute({ pathname, component }))}
              <Redirect to='/404'></Redirect>
            </Switch>
          </BaseLayout>
        </Router>
      )
    }
    
    export default CreateRoutes
    

    在这里插入图片描述

    2.引入布局

    /layout/BaseLayout
    在这里插入图片描述

    在这里插入图片描述
    加上this.props.children
    在这里插入图片描述

    在这里插入图片描述

    3.react-loadable路由懒加载

    在这里插入图片描述

    4.给菜单加上链接

    在这里插入图片描述
    遍历动态渲染Menu
    在这里插入图片描述
    push
    在这里插入图片描述
    别忘了加上@withRouter

    原教程:https://www.bilibili.com/video/BV1CE411c7i9?p=12

    展开全文
  • 如下布局,如果将:sm="0"则会导致456始终不显示 下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl=...
  • Flex 布局详解 - Flex布局的常用属性

    万次阅读 多人点赞 2019-05-14 19:33:22
    文章目录什么是Flex布局适用范围使用时应该注意些什么?flex布局中的一些基本概念容器和项目项目在容器中的显示容器的一些属性flex-direction 属性flex-wrap属性flex-flow属性justify-content 属性align-items 属性...
  • 知识点:网页布局的方式 1、网页布局 常见的页面布局方式:表格布局、DIV+CSS布局、框架布局。 表格布局:用来显示较多的数据,如OA系统、ERP系统或CRM系统。(一般用在局部) DIV+CSS布局:相对来说最灵活的...
  • Flex布局 流式布局 伸缩布局透彻分析

    千次阅读 热门讨论 2021-02-03 13:52:00
    传统的布局概念 基于盒子容器,依赖 display 、position 、float三个属性,相互制约 Flex布局概念 1.Flex布局简称 “弹性布局” 或 “流式布局” 或 “”伸缩布局”,各有千秋。 2.是一种当页面需要适应不同的...
  • CSS布局——圣杯布局、双飞翼布局

    千次阅读 2019-12-03 23:06:16
    圣杯布局和双飞翼布局解决的都是两边顶宽、中间自适应的三栏布局问题,要实现中间部分优先渲染。 先上两个demo。 圣杯布局: <!DOCTYPE html> <html> <head> <title>圣杯布局</...
  • Android 六大布局之 GridLayout(网格布局)

    万次阅读 多人点赞 2018-09-19 13:42:51
    GridLayout 布局是 Android 4.0 以后引入的新布局,和 TableLayout(表格布局) 有点类似,不过它功能更多,也更加好用 可以自己设置布局中组件的排列方式 可以自定义网格布局有多少行,多少列 可以直接设置组件位于...
  • 常见布局—弹性布局

    千次阅读 2019-03-27 09:52:13
    在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。 说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向,没有固定的...
  • Flex布局

    千次阅读 2017-11-13 11:46:32
    Flex布局常用的布局方式有3种: display:css内联和块级布局。 position:绝对、相对定位布局。 float:浮动布局。 传统的布局方式存在一个很明显的问题,那就是垂直居中不易实现。flex:弹性盒子布局,可以更好的实现...
  • 题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。 要求:允许增加额外的DOM节点,但不能修改现有节点...
  • 用过BaseQuickAdapter的小伙伴应该都知道他提供给我们设置空布局的方法。但是却没有给我们提供加载中的布局,自己去写布局的话要用一个ProgressBar和RecyclerView一起来做隐藏和显示的控制,很多个界面都有...
  • 文章目录三列布局背景介绍定位实现三列布局浮动实现三列布局圣杯布局双飞翼布局 三列布局背景介绍 三列元素,左右元素固定宽度; 中间元素自适应; <div id="left"> left </div> <div id="middle...
  • 移动端页面布局:百分比布局、rem布局 1 弹性盒布局(百分比布局) 例如,拉勾网、天猫首页。 好处:充分发挥大手机的优势——显示内容越多;缺点:屏幕过大,间距过大,比例失调。 特点: - 顶部与底部的bar...
  • 约束布局ConstraintLayout加快布局速度

    千次阅读 2016-12-16 10:43:48
    Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout。简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束。何为约束,即控件之间的关系。它能让你的布局更加扁平化...
  • Java中设置JPanel自定义布局,可通过设置空布局即绝对布局来实现,代码如下: package menu; import java.awt.Container; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; ...
  • 网格布局:用 QGridLayout类。 addWidget( ) 括号内有四个参数。分别为行数、列数、所添加的组件占的行数、所添加的组件占的列数。 横向布局:用 QHBoxLayout类。 纵向布局:用 QVBoxLayout类。 例:网格布局 ...
  • PyQt5布局有垂直布局(控件从上到下排列),水平布局(控件从左到右排列),表单布局(将两个空间对应一起布局)等布局,本实例通过创建QFormLayout布局将QLabel(标签)和QLineEdit(行编辑器)一一对应起来,label1对应lineEdit1...
  • JavaSwing_1.1: FlowLayout(流式布局

    万次阅读 多人点赞 2017-05-30 23:54:54
    FlowLayout,流式布局管理器。按水平方向依次排列放置组件,排满一行,换下一行继续排列。
  • 作者:firstmiki ...来源:firstmiki的博客...这篇博文仅仅简单介绍了三种常见的布局管理器,都是一些简单应用; 一、 边界布局管理器(FlowLayout) /* * 功能:演示边界布局管理器:组件的位置和大小 */ package GU...
  • Flex 布局全解

    万次阅读 多人点赞 2018-06-19 13:40:16
    一、Flex布局是什么?Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex; }行内元素也可以使用Flex布局。.box{ display: ...
  • 这两天,看到别人在群里问布局特点,发现自己对这方法还是有点模糊,老是忘,于是上网查了下这方面内容,自己总结写出了,如果有错误地方,敬请指正。 静态布局意思就是只是针对某个屏幕下设计的网页,当屏幕大小...
  • 作为一个前端初学者,在学习的时候可能会用到一些盒模型传统的布局方式(display + position + float),很多小伙伴用着用着就觉得这种传统布局写一些样式比较麻烦、不方便,比如垂直居中的传统实...
  • web页面常用布局(pc端布局和移动端布局) 什么是web布局呢? 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分...
  • css经典布局——双飞翼布局

    万次阅读 2019-01-18 17:43:50
    圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》,在国内最早是淘宝UED的工程师(玉伯大大)对圣杯布局改进并传播开来,在中国的叫法是双飞翼布局。 圣杯布局和双...
  • 1: 在Swing中我们常用的三种布局, 1: BorderLayout(边界布局管理器) 2: FlowLayout(流式布局) 3: GridLayout(网格布局管理器) 这三种基本可以满足我们写一些基本的页面,但是有的时候有的页面构造比较...
  • 五种前端布局之table布局

    千次阅读 2020-11-18 09:27:59
    前端基本布局五种前端布局table布局float布局 五种前端布局 table布局、float布局、absolute布局、flexbox布局、grid布局 table布局 父级容器—display: table 子级容器—display:table-cell (1) 空间平均划分:...
  • 新标签页增加新布局,简洁模式 插件支持更多自定义扩展功能 JSON格式化工具功能优化 新标签页增加新布局,简洁模式 新标签页新增了2种布局,旧版和简洁模式。习惯旧版同学可以通过这个设置切换为旧版。 同时也可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,360,094
精华内容 544,037
关键字:

怎么布局