展开

关键词

EXT.NET(三)——表单

在开发中,我们总是会遇到很多比较的表单。那么,怎么对这些表单进行无疑是一个值得思考的问题,这往往也折磨着很多程序员。那么本节就来讲述如何使用EXT.NET对的表单进行。 不要费心于这方面了,不要习惯于拖控件了,老老实实的在代码窗口敲吧,熟练之后,你会发现效率会更高(从拖到显示,VS设计器要做很多工作,比如加载css、js、编译等等,致使显示界面很慢,而且也很容易崩溃)。 都是从实践中出来的。看完示例和文档,想当然的我会了,当有点小改动就伤不起了,所以,还是实践出真知。而且,求人不如求己。 不要问重的问题,要学会举一反三。 学会分析问题。 这个表单看起来很庞大,其实起来并不难(一个FormPanel里面嵌套了4个FormPanel和一个Panel),如图: ? 1)表头。 ? 这个表单的表头是由按钮组组合而成的,主要是为了美观。 考虑到要对列整齐,方便,使用了TableLayout来进行。 ? 如图,Columns表示列数。ColumnWidth表示宽度百分比。Cells表示单元格集合。

38430

CSS实现多列界面

做为码农,工作职责就是把功能实现了,在此,我简单说一下页面吧。先贴上设计稿吧: ? UI图主要是为PC设计的,手机上可能看不太清,但这不影响接下来讲解的,我们先简单分析一下页面,看看如何实现这个的页面。 (中间再分为左右) 左右CSS中比较常见的一种方式,这里的难点是,既要实现左右,又要保证width: 100%;(就是宽度不定,因为用户的浏览器宽度是各不相同的)。 ,剩下的上中下也就好办了~ 3、中间两个区域均可分上中下结构 上中下属于多行,也是比较常见的方式,就当前设计稿来说,难点儿是高度100%的情况下(高度根据用户浏览器高度而定)来实现这效果 bottom: 0; width: 100%; height: 160px; border-top: 1px solid $border; } </style> OK,看来解决好上面这三个问题,这个就搞定了

1.5K130
  • 广告
    关闭

    腾讯云精选爆品盛惠抢购

    腾讯云精选爆款云服务器限时体验20元起,云数据库19.9元/年起,还有更多热门云产品满足您的上云需求

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    EXT.NET(二)——报表

    前面提到过工作台(《EXT.NET(一)——工作台》)了,不知道各位看过之后有什么感想。这次就介绍介绍使用EXT.NET画几个报表。 看图写作从小学就开始了,如图: ? 图一 ? 图二 ? 所以也不需要说什么话了: <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <style type="text/<em>css</em> 这个报表虽然<em>复</em><em>杂</em>了一点点,但是也很简单。 " TagPrefix="ext" %> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <style type="text/<em>css</em> 3)这个相对来说,比上两个都<em>复</em><em>杂</em>。但是我画起来,比上两个都快。一个是更熟练了,第二个是生成了很多东西。

    42020

    EXT.NET(一)——工作台

    因此,在开发一些相对的界面时,还是有一定难度的。接下来,笔者将一一讲述自己在开发过程中设计的一些相对制的的界面,权且作为自我总结,也给新人接手时留点文档。如有不足之处,请回。 由于一直都很忙,不一定会回。编写此文,也是断断续续的。 下面就从工作台开始吧,如以下界面: ? ? 当点击其他折叠面板时,如【可撤销事务】,该面板就会展开,并刷新数据: ? checkboxBeforerowselect:在选择行首的选框时的判断。即在某种情况下不可选。 setTitle:设置列显示的html。 setHeight(vHeight); " /> </Listeners> </ext:Viewport> 配置比较多,但是并不     </ext:CheckboxSelectionModel> </SelectionModel> SelectionModel属性用于设置GridPanel的选择模型,有行选择、选框选择等模型

    56330

    解析SwiftUI细节(二)循环轮播+

    2、稍微点View的思路和一些细节知识 3、SwiftUI循环轮播图 这次总结的首页的UI如下,我们下面一点点的解析: ? 首页 ---- 我们把首页这个给解析一下,大概分了下面几部分,我们再具体的说说: ? 这部分的代码没有啥特别需要说明的,都比较简单,可能是就是这个 environmentObject (我把它称为环境变量)这个是需要特别说明的一个变量,从名字上可以看出,这个修饰符是针对全环境的

    85210

    CSS

    20430

    CSS

    CSS有三种基本的定位机制:普通流,浮动和绝对定位。 绝对定位 相对定位可以看作特殊的普通流定位,元素位置是相对于他在普通流中位置发生变化,而绝对定位使元素的位置与文档流无关,也不占据文档流空间,普通流中的元素就像绝对定位元素不存在一样。 浮动 首先介绍一些浮动模型的基本知识:浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。 > 可以看出浮动后虽然黄色div不受浮动影响,正常,但是文字部分却被挤到了紫色浮动div下边。 参考文档 CSS ——从display,position, float属性谈起.:

    19420

    CSS

    #什么是 BFC Box:Box 是 CSS 的对象和基本单位,你可以理解一个页面就是由很多的 Box 组成的 Formatting Context:即格式化上下文,它是存在页面中的一块独立的渲染区域 这里的元素不会在上影响到外面的元素(比如浮动/定位的元素等等)。 通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论怎样翻江倒海,都不会影响到外部。 不和浮动元素重叠 在一个BFC中使用两个BFC可以做两列时使用 #水平居中 #空间居中 Grid .container { display: grid; place-items

    14420

    CSS(三) 模型

    模型 在网页中,元素有三种模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) 流动(Flow)模型是默认的网页模式。 流动模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。 (内联元素可不像块状元素这么霸道独占一行) 2、浮动模型 (Float) 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动 div{float:left;}  div{float:right ;} 可以为不同的div设置不同的浮动方式来。 绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素的就当绝对定位的元素不存在时一样,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

    51960

    HTML5-CSS

    一、默认情况下,所有的网页标签都在标准流中,从上到下,从左到右。

    43540

    CSS】Flex

    01 - Flex是什么 在翻译中,“Flex”意为“松紧带”,在前端开发中可以理解为弹性。 所有的浏览器目前都支持了Flex,除“Webkit ”内核的浏览器需要加如下前缀: display:-webkit-flex; 02 - 需要注意 1、设为 Flex 以后,子元素的float、 2、行内元素也可以使用 Flex 。 03 - 属性 1、flex-direction(容器)属性 描述:决定主轴的方向。 row(默认值):主轴为水平方向,起点在左端。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

    6410

    CSS -- 圣杯 & 双飞翼

    按照我的理解,其实圣杯跟双飞翼的实现,目的都是左右两栏固定宽度,中间部分自适应。 但在这里实现起来还是有一些区别的 【圣杯】 ? head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>圣杯 DEMO 听说双飞翼是玉伯大大提出来的,始于淘宝UED 如果把三栏比作一只大鸟,可以把main看成是鸟的身体,sub和extra则是鸟的翅膀。 这个的实现思路是,先把最重要的身体部分放好,然后再将翅膀移动到适当的地方. 其实跟上边的圣杯差不多的,当然也可以改动一下(自己想想有哪些不同吧) 恩,这里有一只鸟~ 左翅sub有200px,右翅extra..220px..

    29810

    Flexbox

    目前看来,iOS系统提供的方式有两种: 一种是frame这种原始方式,也就是通过设置横纵坐标和宽高来确定。这种方式代码量大,维护起来超级烦琐,但是性能是最好的。 与自动类似,Flexbox也是使用的描述性的语言来。 ,盒子 ASWrapperLayoutSpec,填充 ASCornerLayoutSpec,角标 ASLayoutSpec子类实现了各种思路,ASLayoutSpec会制定各种相通的协议方法 了解Flexbox算法设计,一方面能够让你更好地理解flexbox;另一方面,你也可以借此完整地了解一个算法是怎么设计的,使得你以后也能够设计出适合自己业务场景的算法。 Flexbox算法的实现是非常的,不是一两句话就能说明白的,可以参考如下网址,或者点击“阅读原文”窥其一二: https://www.cnblogs.com/yunqishequ/p/10006872

    82130

    图解CSS(一)- Grid

    图解CSS(一)- Grid 先上图 ? 简介 Grid 是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维,也是唯一的二维方案,利用grid可以很轻松的实现很多的网页 正文 gird很强大 ,采用网格的区域,称为"容器"(container)。 对中间那列设置了auto,实现了中间自适应的三栏 网格线 grid叫做网格,那自然少不了网格线的存在,使用方括号,指定每一根网格线的名字,方便以后的做定位时使用 grid-template-columns Tips grid中属性有很多,一定要通过实战来记这些属性,要区分好容器属性,和项目属性这是重中之重,多动手才是王道!

    16410

    EXT.NET(四)——系统首页设计(上)

    页面效果 我申明下,我不是专业的前端工程师,我就是一打的(啥都搞下),所以不要期望过高,如果还过得去,请点推荐。不多说了,上图: ? ? 整个工作台也是采用折叠面板,不过当展开某个面板时,会刷新数据。默认加载,并不需要加载所有数据。 就拿待处理事务来说: ? 通过工具栏按钮,可以方便对事务进行操作(别忘了判断权限)。

    33630

    EXT.NET(四)——系统首页设计(下)

    页面 ? 从图中可以看出分为上、中、左、右四块,前面介绍过了,就不细说了。 之所以使用Viewport,主要是为了自适应浏览器。 注意/表示网站根目录,只有发到IIS或者Web应用程序有效。 工作台 工作台是非常重要的一块。 工作台的代码,其他篇幅有部分介绍,可以参考EXT.NET(一)——工作台。 ; 关于表单的一些介绍,请看EXT.NET(三)——表单。 尾声 从使用EXT.NET到现在,也差不多一年了,真正使用的时间也只有几个月而已。现在回想起来,还是感慨良多。

    24520

    CSS 7:网页(传统,flex套路)

    传统 一栏、两栏、三栏 一栏 特点:页面内容居中,宽度固定 实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-left 圣杯和双飞翼 是老的方式,2012年以前流行,现在已不流行,但是面试可能会考察到,所以记录一下 why it? 如果用flex实现三栏,且main在dom次序最上面,那么只需要contain使用flex,mainflex:1;order:2两边固定宽度即可 使用flex写几个简单 ? 做的时候,要分清块和内容块!块DIV只用来,内容快DIV只用来添加网页内容。bootstrop就用栅格系统做块,内容块是自己设计的独立元素。 例子:简单的头部导航 ? CSS

    1.1K41

    CSS(五) 网页方式

    下面介绍网页的常用几种方式 ? 1.一列: 一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等; .main{ width: 200px; height: 100px; background-color: grey; margin: 0 auto; } 2.两列:   说起两列 float浮动的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。    : 在一列的基础上,保留top和foot部分,将中间的main部分改造成两列或三列,小的模块可以再逐级同理划分。

    63960

    最强大的 CSS —— Grid

    Grid 是什么? Grid 即网格,是一种新的 CSS 模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。 号称是最强大的的 CSS 方案,是目前唯一一种 CSS 二维。利用 Grid ,我们可以轻松实现类似下图,演示地址[1] ? Grid 实战——实现响应式 经过上面的介绍,相信大家都可以看出,Grid 是非常强大的。一些常见的 CSS ,如居中,两列,三列等等是很容易实现的。 image 参考 常见的 Grid 用例[19] CSS Grid 网格教程[20] Grid 草案[21] 一行 CSS 代码实现响应式 – 使用 Grid 实现的响应式[22] ] Grid 草案: https://drafts.csswg.org/css-grid/#intro [22] 一行 CSS 代码实现响应式 – 使用 Grid 实现的响应式: https

    31520

    CSS基础

    CSS 确定页面的大致结构,页面分多少块,每块的位置。每个部分怎么把该部分撑起来。 由于纵向是由 每一行堆叠起来的,重一行的内容,就可以了。 所以 重点就是 把块 横向的 排开来。 响应式设计和 在移动端时代,响应式的设计和 是必需掌握的内容。响应式 能帮助网页 更好的适配pc端 和不同尺寸的移动端。 对于精确性非常高的地方 就不要使用rem来了。 CSS面试题 1. 实现两栏/三栏的 的方法 1. 表格 2. float+margin 3. inline-block 4. flexbox 2. position: absolute和fixed有什么区别?

    38820

    相关产品

    • 云直播

      云直播

      云直播(CSS)为您提供极速、稳定、专业的直播云端处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、慢直播、快直播三种服务,分别针对大规模实时观看、高并发推流录制、超低延时直播场景,配合移动直播 SDK,为您提供一站式的音视频直播解决方案。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券