精华内容
下载资源
问答
  • 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>


    效果:


     


     

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

    如下布局,如果将:sm="0"则会导致456始终不显示
    下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug

    <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col>
    <el-col :xs="0" :sm="0"  :md="7" :lg="5" :xl="4" >456</el-col>
    

    完整得例子

    新建一个demo.html文件内容如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试页面</title>
        <!-- cdn引入ElementUI样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .myclass1 {
                height: 200px;
                background-color: slategray;
            }
    
            .myclass2 {
                height: 200px;
                background-color: #867090;
            }
        </style>
    
    </head>
    <body>
    <div id="app">
        <el-row>
            <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col>
            <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" class="myclass2" >456</el-col>
        </el-row>
    
    </div>
    
    <!--cdn引入ElementUI组件必须先引入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- cdn引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        const vm = new Vue({ // 配置对象 options
            // 配置选项(option)
            el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
            data: {
                screenWidth: 992
            },
        })
    </script>
    </body>
    </html>
    
    

    会发现456不会显示,虽然宽度有了但是内容456却不显示
    在这里插入图片描述

    将sm得值设置非0则正常,但是屏幕宽度为sm时会导致456被挤下去如下在这里插入图片描述

    解决方法,通过vue得v-if或者v-show

    首先、将sm不要设置为0,例如设置为1
    其次、为了解决这个sm=1的问题,通过js获取屏幕宽度,当屏幕<992时就不显示即可

    当屏幕小于992px时将其隐藏掉

    <el-row>
        <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col>
        <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" 
        	class="myclass2" v-show="screenWidth >= 992">456</el-col>
    </el-row>
    

    以及通过vue获取屏幕宽度

    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
            screenWidth: 992
        },
        mounted(){
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        }
    })
    

    效果
    在这里插入图片描述

    展开全文
  • Grid布局学习

    万次阅读 2020-04-23 16:17:34
    1. grid布局简介与对比 简介: grid采用网格布局方案, 把一块区域划分为多个网格, 然后分别用元素去填充这些网格。 与flex布局对比: 整体布局理念与flex有点类似, 但grid布局在实现固定区域布局的时候显得更...

    1. grid布局简介与对比

    简介:
    grid采用网格布局方案,
    把一块区域划分为多个网格,
    然后分别用元素去填充这些网格。
    
    与flex布局对比:
    整体布局理念与flex有点类似,
    但grid布局在实现固定区域布局的时候显得更灵活更易用。
    flex布局是基于弹性盒子模型,让元素按先后顺序塞进大盒子里,可以说是简化的float布局。
    grid布局则是类似于表格,用一个大网格来划分出若干个小网格,元素可以塞进任意一个或多个网格中,位置控制上更灵活。
    

    2. grid的基本用法

    1. 声明grid
    display:grid;
    display:inline-grid;	//行内网格布局
    
    2. 设置网格的行和列
    grid-template-rows:100px 100px 100px;	//3行表格,均为100px高
    grid-template-rows:repeat(3,1fr);	//3行表格,1fr相当于flex:1,表示三个等高,均分大网格的高度
    grid-template-rows:repeat(3,100px 200px 200px);	//按100px 200px 200px的分布重复3次,即9行
    grid-template-rows:repeat(auto-fill,100px);	//单元格大小确定,容器大小不确定,希望一行尽可能容纳多的单元格
    grid-template-rows:50% 50%;	//2行表格,平分高度
    grid-template-rows:minmax(50px,100px);	//不小于50px不大于100px
    grid-template-columns:100px 100px 100px;	//3列表格
    
    3. 设置行列的间隔
    grid-row-gap:10px;
    grid-column-gap:10px;
    grip-gap:10px 10px;	//合并写法,row-gap,column-gap
    
    4. 设置排列方向
    grid-auto-flow:column;	//默认是row
    
    5. 设置水平/竖直方向位置,具体要看flow的方向
    justify-items/align-items	//start,end,center,stretch等同于同时设置每个子元素的justify-self/align-self
    justify-content/align-content	//space-between,space-around,space-evenly,start,end,center,stretcg把子元素作为一个整体,相对于父容器的位置
    justify-self/align-self	//start,end,center,只设置自己的位置
    
    合并写法:
    place-content:<align-content><justify-content>
    place-items:<align-items><justify-items>
    
    6. 子元素所占的单元格位置
    grid-column-start:1
    grid-column-end:2
    grid-row-start:1
    grid-row-end:2
    
    上述例子占据了左上角的一个单元格,
    大网格从左到右的边线编号为1,2,3...,从上到下的编号为1,2,3...
    
    合并写法:
    grid-row:1/span 2;	//span代表跨越了多少个单元格
    grid-column:1/1;
    

    当然,还有一些关于grid-area等属性,因为作者平时很少用,就先不写啦~欢迎大家批评指正~

    展开全文
  • 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

    展开全文
  • 响应式布局学习

    万次阅读 2020-04-23 16:18:46
    1. 响应式布局简介 响应式布局是指通过判断设备类型、或设备的屏幕宽度来呈现不同的显示效果。 比如一个网页,在电脑端和手机端的显示是不一样的。 2. 媒体设备类型 常见的媒体设备类型有:screen、print等 在<...
  • 知识点:网页布局的方式 1、网页布局 常见的页面布局方式:表格布局、DIV+CSS布局、框架布局。 表格布局:用来显示较多的数据,如OA系统、ERP系统或CRM系统。(一般用在局部) DIV+CSS布局:相对来说最灵活的...
  • GridLayout 布局是 Android 4.0 以后引入的新布局,和 TableLayout(表格布局) 有点类似,不过它功能更多,也更加好用 可以自己设置布局中组件的排列方式 可以自定义网格布局有多少行,多少列 可以直接设置组件位于...
  • 新标签页增加新布局,简洁模式 插件支持更多自定义扩展功能 JSON格式化工具功能优化 新标签页增加新布局,简洁模式 新标签页新增了2种布局,旧版和简洁模式。习惯旧版同学可以通过这个设置切换为旧版。 同时也可以...
  • CSS布局——圣杯布局、双飞翼布局

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

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

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

    千次阅读 2017-11-13 11:46:32
    Flex布局常用的布局方式有3种: display:css内联和块级布局。 position:绝对、相对定位布局。 float:浮动布局。 传统的布局方式存在一个很明显的问题,那就是垂直居中不易实现。flex:弹性盒子布局,可以更好的实现...
  • 作为一个前端初学者,在学习的时候可能会用到一些盒模型传统的布局方式(display + position + float),很多小伙伴用着用着就觉得这种传统布局写一些样式比较麻烦、不方便,比如垂直居中的传统实...
  • css经典布局——双飞翼布局

    万次阅读 2019-01-18 17:43:50
    圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》,在国内最早是淘宝UED的工程师(玉伯大大)对圣杯布局改进并传播开来,在中国的叫法是双飞翼布局。 圣杯布局和双...
  • 题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。 要求:允许增加额外的DOM节点,但不能修改现有节点...
  • 学习Tkinter制作窗体软件的基础,控件相对于窗体的绝对布局和相对布局、表格布局 二、试验平台 windows7 , python3.7 三、绝对布局示例代码 import tkinter from tkinter import ttk win = tkinter.Tk() win....
  • 用过BaseQuickAdapter的小伙伴应该都知道他提供给我们设置空布局的方法。但是却没有给我们提供加载中的布局,自己去写布局的话要用一个ProgressBar和RecyclerView一起来做隐藏和显示的控制,很多个界面都有...
  • 初学者如何创建相对布局、线性布局、表格布局、网格布局等,以及他们的运行特定布局的创建运行xml文件 也是初学android studio,如有表达不合适之处,请多多指教 特定布局的创建 在刚开始学习使用android studio的...
  • 文章目录三列布局背景介绍定位实现三列布局浮动实现三列布局圣杯布局双飞翼布局 三列布局背景介绍 三列元素,左右元素固定宽度; 中间元素自适应; <div id="left"> left </div> <div id="middle...
  • JavaSwing_1.1: FlowLayout(流式布局

    万次阅读 多人点赞 2017-05-30 23:54:54
    FlowLayout,流式布局管理器。按水平方向依次排列放置组件,排满一行,换下一行继续排列。
  • 移动端页面布局:百分比布局、rem布局 1 弹性盒布局(百分比布局) 例如,拉勾网、天猫首页。 好处:充分发挥大手机的优势——显示内容越多;缺点:屏幕过大,间距过大,比例失调。 特点: - 顶部与底部的bar...
  • GridLayout布局简介GridLayout布局是Android4.0(API Level 14)新引入的网格矩阵形式的布局控件。GridLayout属性介绍本身属性 android:alignmentMode 说明:当设置alignMargins,使视图的外边界之间进行校准。可以...
  • 约束布局ConstraintLayout加快布局速度

    千次阅读 2016-12-16 10:43:48
    Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout。简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束。何为约束,即控件之间的关系。它能让你的布局更加扁平化...
  • PyQt5的相对布局管理

    万次阅读 2020-04-10 08:58:42
    PyQt5的相对布局管理 博主PyQt5新手,最近在写一个可视化展示界面,第一个遇到的坑就是布局管理。 其实可以不用相对布局,直接用QtDesigner进行傻瓜式的拖控件也不是不可以,高级一点,也可以用绝对布局,定义控件的...
  • 一、静态布局(static layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)...
  • Java中设置JPanel自定义布局,可通过设置空布局即绝对布局来实现,代码如下: package menu; import java.awt.Container; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; ...
  • 网格布局:用 QGridLayout类。 addWidget( ) 括号内有四个参数。分别为行数、列数、所添加的组件占的行数、所添加的组件占的列数。 横向布局:用 QHBoxLayout类。 纵向布局:用 QVBoxLayout类。 例:网格布局 ...
  • 双飞翼布局和圣杯布局

    万次阅读 2019-06-23 11:37:33
    实现左右固定宽度 ,中间自适应的布局(中间先加载渲染), 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> </head> <...
  • QDockWidget嵌套布局详解-实现Visual Studio布局

    万次阅读 多人点赞 2016-04-22 15:31:22
    概述许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口。 Qt的嵌套布局由QDockWidget完成,用Qt Creator拖界面得到的dock布置形式比较固定,不能得想要的...
  • 弹性布局

    千次阅读 多人点赞 2018-10-01 16:38:30
    弹性布局,又称为“flex布局”,是W3C于2009年推出的一种布局方式,可以简单、快速、响应式的实现各种布局页面,取而代之的是“position+display+float”,现在已经得到了所有主流浏览器的支持。 了解两个基本概念...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 375,887
精华内容 150,354
关键字:

布局