displaytag教程

1 Q-tag概述 (2)2 使用Q-tag功能步骤介绍 (3)2.1 登记报警内容 (3)2.2 Q-tag基本设置 (4)2.2.1 显示模式 (5)2.2.2 显示格式 (6)2.2.3 Q-tag设置(GP系统设置) (8)2.2.4 子显示 (11)2.2.5 显示角度 (19)Q-tag报警摘要显示1Q-tag概述跟据PLC内Bit状态改变，显示登陆在报警编辑 的对应报警摘要，它有以下三种方式：1.活动- 仅显示当前所触发的报警。

2.历史- 显示报警的历史记录，及报警触发，响应，恢复的时间。

3.记录- 以日志方式显示报警记录，不管它们何时触发，响应和恢复。

合并T-tag一起使用，可达到光标的移动浏览，报警确认以及报警清除的功能。

2 使用Q-tag功能步骤介绍由以下步骤，来建立Q-tag报警摘要显示2.1 登记报警内容1．在报警编辑 登录报警摘要。

（1）报警的方式分位地址报警和字地址报警位地址:当指定的位产生变化(OFF→ON或ON→OFF),报警便产生,当位恢复原始状态时,则为恢复时间.字地址:当指定的字地址的值等于社定值时, 报警便产生,当不等于时,则为恢复时间.（2） 组号:作为每项报警次数记录的编号(地址不可重复,否则报警计数将不正确)（3） 子显示:作为报警说明画面或说明窗口画面的画面号. （4） 状态:指定位报警发生的状态(ON或OFF).（5） 报警值:指定字报警的值.（6） 位:指定字地址的数据格式(16位或32位)（7） 消息:指定报警产生的信息.2.2 Q-tag基本设置（1） 首先在画板/tags里选择Q-tag。

2.2.1 显示模式▲ 显示模式显示模式分为活动，历史和记录，如果在报警编辑里选择了块功能，则显示模式为Block1，2或3。

而这个功能只提供给GP377，GP77R及GP2000机种。

▲ 滚动方向选择消息滚动方向是向上或向下滚动。

▲ 显示格式显示字符数：指定每一个报警信息的最大显示字符串长度，单位为半角字元（一个中文字，占二个字符）。

重绘tabcontrol显示标签Imports SystemImports System.Collections.GenericImports ponentModelImports System.DataImports System.DrawingImports System.LinqImports System.TextImports System.Windows.FormsNamespace TabControlTestPublic Partial Class Form1Inherits FormPublic Sub New()InitializeComponent()End SubConst CLOSE_SIZE As Integer = 15'tabPage标签图片Private image As New Bitmap("E:\1\2.jpg")'绘制“Ｘ”号即关闭按钮Private Sub MainTabControl_DrawItem(sender As Object, e As Sys tem.Windows.Forms.DrawItemEventArgs) Handles MainTabControl.DrawIte mTryDim myTabRect As Rectangle = Me.MainTabControl.GetTabRect(e.Inde x)'先添加TabPage属性e.Graphics.DrawString(Me.MainTabControl.TabPages(e.Index).Text, Me.F ont, SystemBrushes.ControlText, myTabRect.X + 2, myTabRect.Y + 2)'再画一个矩形框Using p As New Pen(Color.White)myTabRect.Offset(myTabRect.Width - (CLOSE_SIZE + 3), 2) myTabRect.Width = CLOSE_SIZEmyTabRect.Height = CLOSE_SIZEe.Graphics.DrawRectangle(p, myTabRect)End Using'填充矩形框Dim recColor As Color = If(e.State = DrawItemState.Selected, Color.White, Color.White)Using b As Brush = New SolidBrush(recColor)e.Graphics.FillRectangle(b, myTabRect)End Using'画关闭符号Using objpen As New Pen(Color.Black)'"\"线Dim p1 As New Point(myTabRect.X + 3, myTabRect.Y + 3)Dim p2 As New Point(myTabRect.X + myTabRect.Width - 3, myTab Rect.Y + myTabRect.Height - 3)e.Graphics.DrawLine(objpen, p1, p2)'"/"线Dim p3 As New Point(myTabRect.X + 3, myTabRect.Y + myTabRect .Height - 3)Dim p4 As New Point(myTabRect.X + myTabRect.Width - 3, myTab Rect.Y + 3)e.Graphics.DrawLine(objpen, p3, p4)'''/=============================================Dim bt As New Bitmap(image)Dim p5 As New Point(myTabRect.X - 50, 4)'e.Graphics.DrawString(this.MainTabControl.TabPages[e.Index].Text, t his.Font, objpen.Brush, p5);e.Graphics.DrawImage(bt, p5)End Using'绘制小图标'==================================================================== =========='Bitmap bt = new Bitmap("E:\\1\\2.jpg");'Point p5 = new Point(4, 4);'''/e.Graphics.DrawImage(bt, e.Bounds);'e.Graphics.DrawImage(bt, p5);'Pen pt = new Pen(Color.Red);'''/e.Graphics.DrawString(this.MainTabControl.TabPages[e.Index].Text, this.Font, pt.Brush, e.Bounds);'e.Graphics.DrawString(this.MainTabControl.TabPages[e.Index].Text, t his.Font, pt.Brush, p5);e.Graphics.Dispose()Catch generatedExceptionName As ExceptionEnd TryEnd Sub'==================================================================== ==='关闭按钮功能Private Sub MainTabControl_MouseDown(sender As Object, e As Mo useEventArgs) Handles MainTabControl.MouseDownIf e.Button = MouseButtons.Left ThenDim x As Integer = e.X, y As Integer = e.Y'计算关闭区域Dim myTabRect As Rectangle = Me.MainTabControl.GetTabRect(Me.Mai nTabControl.SelectedIndex)myTabRect.Offset(myTabRect.Width - (CLOSE_SIZE + 3), 2) myTabRect.Width = CLOSE_SIZEmyTabRect.Height = CLOSE_SIZE'如果鼠标在区域内就关闭选项卡Dim isClose As Boolean = x > myTabRect.X AndAlso x < myTab Rect.Right AndAlso y > myTabRect.Y AndAlso y < myTabRect.Bott omIf isClose = True ThenMe.MainTabControl.TabPages.Remove(Me.MainTabControl.SelectedTab) End IfEnd IfEnd Sub'初始化页面Private Sub Form1_Load(sender As Object, e As System.EventArgs ) Handles Form1.Load'清空控件'this.MainTabControl.TabPages.Clear();'绘制的方式OwnerDrawFixed表示由窗体绘制大小也一样Me.MainTabControl.DrawMode = TabDrawMode.OwnerDrawFixedMe.MainTabControl.Padding = New System.Drawing.Point(CLOSE_SIZE, CLOSE_SIZE)AddHandler Me.MainTabControl.DrawItem, New DrawItemEventHandler(Ad dressOf(Me.MainTabControl_DrawItem))AddHandler Me.MainTabControl.MouseDown, New System.Windows.Forms.M ouseEventHandler(AddressOf(Me.MainTabControl_MouseDown))End Sub'添加新的tabPage并修改所有tabPage标签上面的图片Private Sub button1_Click(sender As Object, e As System.EventA rgs) Handles button1.ClickDim tabtage As New TabPage()MainTabControl.TabPages.Add(tabtage)MainTabControl.SelectedTab = tabtageimage = New Bitmap("E:\1\3.jpg")End Sub'关闭选中的tabPagePrivate Sub button2_Click(sender As Object, e As System.EventA rgs) Handles button2.ClickMainTabControl.TabPages.Remove(MainTabControl.SelectedTab)End SubEnd ClassEnd Namespace。

display：inline的⽤法<div> DIV1 </div><div> DIV2 </div>这⾥DIV1和DIV2分别占⼀⾏，但是你给他们加上属性后变了<div style= "display:inline "> DIV1 </div><div style= "display:inline "> DIV2 </div>DIV1和DIV2这时候显⽰在同⼀⾏了，试试看吧和 display:inline 对应的是 display:block，block 会让应⽤了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是⾏内显⽰的，但是你加了 display:block 属性就不⼀样了<span style= "display:block "> SPAN1 </span><span style= "display:block "> SPAN2 </span>display:inline⽐较经典的⽤法是⽤在 <ul> 下的 <li> 中内联block⼀般⼀个块占⼀⾏，除⾮floatinline是⾃动排为⼀⾏，就象段内的⽂字⼀样，可成为多⾏。

display:inline 的作⽤是设置对象做为⾏内元素显⽰，inline是内联对象的默认值（ps:内联对象就是不⾃动产⽣换⾏的元素，⽐如span）⽽我们⼀般⽤的div是块级元素，默认display属性是block,但将div的display设置为inline的话，则多个div可以象span⼀样显⽰在⼀⾏了。

建议楼主在⽹上下个css帮助⼿册display属性block : CSS1 块对象的默认值。

将对象强制作为块对象呈递，为对象之后添加新⾏none : CSS1 隐藏对象。

element tag标签样式摘要：一、前言二、element.tag 标签的定义与用途三、element.tag 标签的样式设置方法四、实际应用案例五、总结正文：【前言】在Web 开发中，CSS 样式设置是一个重要的环节，而element.tag 标签作为CSS 选择器的重要组成部分，对于样式的精确控制起到了关键作用。

本文将详细介绍element.tag 标签的样式设置方法及其在实际开发中的应用。

【element.tag 标签的定义与用途】element.tag 是一个CSS 选择器，它用于选取HTML 元素中的特定标签。

通过使用element.tag，我们可以针对特定的HTML 元素设置样式，从而实现样式的精确控制。

例如，我们可以使用element.tag 为所有的段落元素设置样式：```cssp {color: red;font-size: 16px;}```【element.tag 标签的样式设置方法】要使用element.tag 标签设置样式，我们只需在CSS 选择器中加入元素标签名称即可。

例如，我们可以为所有的段落元素设置红色字体颜色和16 像素的字体大小：```cssp {color: red;font-size: 16px;}```【实际应用案例】在实际开发中，element.tag 标签的用法非常广泛。

例如，我们可以使用element.tag 为特定的表单元素设置样式，从而提高用户体验：```html<form><label for="username">用户名：</label><input type="text" id="username" name="username" /><button type="submit">提交</button></form>``````csslabel {display: block;margin-bottom: 5px;}input[type="text"] {width: 300px;padding: 5px;margin-bottom: 10px;}button[type="submit"] {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;cursor: pointer;width: 100%;}```【总结】总之，element.tag 标签在CSS 样式设置中起到了关键作用，通过使用element.tag 标签，我们可以针对特定的HTML 元素设置样式，实现样式的精确控制。

CSS中display对布局的影响以及元素display的默认值看到前端越来越多的mvc框架出现，之前偶尔还看到有OOCSS（⾯向对象的CSS编程）的⽂章。

所以可以这样理解，前端HTML页⾯的所有元素（tag），也都可以理解对象。

每个对象有⾃⾝的属性，以及每个对象与其他对象的关系。

关系中最重要也是本⽂讨论的是显⽰时候的位置关系。

每个HTML对象除了与其他HTML对象（标签）有关系之外，还有对象在显⽰时与浏览器或者windows对象的关系。

位置关系也就是页⾯的布局。

如果能将合适的对象根据需要放在合适的位置，并与其他对象和睦相处，界⾯就可以按照设计者的想法实现了。

《下⾯内容摘⾃⽹络，帮助理解和记录》根据CSS规范的规定，每⼀个⽹页元素都有⼀个display属性，⽤于确定该元素的类型，每⼀个元素都有默认的display属性值。

⽐如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；⽽span元素的默认display属性值为“inline”，称为“⾏内”元素。

div这样的块级元素，就会⾃动占据⼀定矩形空间，可以通过设置⾼度、宽度、内外边距等属性，来调整的这个矩形的样⼦；与之相反，像“span”、“a”这样的⾏内元素，则没有⾃⼰的独⽴空间，它是依附于其他块级元素存在的，因此，对⾏内元素设置⾼度、宽度、内外边距等属性，都是⽆效的。

块元素⼀般都从新⾏开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。

“form"这个块元素⽐较特殊，它只能⽤来容纳其他块元素。

如果没有css的作⽤，块元素会顺序以每次另起⼀⾏的⽅式⼀直往下排。

⽽有了css以后，就可以改变这种html的默认布局模式，把块元素摆放到想要的位置上去。

⽽不是每次都另起⼀⾏。

需要指出的是，table标签也是块元素的⼀种，table based layout和css based layout从⼀般使⽤者（不包括视⼒障碍者、盲⼈等）的⾓度来看这两种布局，除了页⾯载⼊速度的差别外，没有其他的差别。

Display，又称显示器，是用来显示文字、图像、视频等信息的一种电
子信息显示设备。

在当今的时代，Display的用途已经远超以往，在娱乐、商业、科学等各个领域，Display都发挥着至关重要的作用。

首先，在娱乐领域，Display已经成为最重要的媒介之一。

当今最受欢
迎的电影，互联网、游戏等信息都是通过Display来显示的，它们丰富了我们的娱乐生活。

此外，Display还广泛应用在教育领域，它可以将
对学生们提出的任务显示在屏幕上，可以让学生们更直观地理解，更
好地学习。

其次，Display在商业中的使用也日渐增多。

如今，在商场、展览会上，Display不仅仅只用于显示产品信息，还可以通过影像、视频等多种方
式展示产品，让消费者更直观地了解产品，提升销售率。

另外，Display还能够让企业实时更新企业最新动态，更有助于提高企业知名度。

最后要说的是，Display在科研领域的应用也愈来愈广泛，它可以将最
新的实验数据展示在屏幕上，帮助科学家更快地收集数据，更容易地
理解数据，以及更快地得出结论。

总之，当代Display的应用越来越广泛，它不仅仅是一台设备，更是一种生活方式，让我们的日常生活处处显得更加美好。

元素变行内、变块、变行内块样式等
元素的样式可以通过CSS来进行设置，包括将元素设置为行内、块级或行内块级。

这些样式可以通过CSS的display属性来控制。

1. 将元素设置为行内（inline）：
当元素设置为行内时，它会在同一行内显示，不会换行，且
不会占据整行的宽度。

可以通过CSS的display属性设置为inline
来实现，例如：
css.
.inline-element {。

display: inline;
}。

2. 将元素设置为块级（block）：
当元素设置为块级时，它会占据整行的宽度，并在页面上单独占据一行，会自动换行。

可以通过CSS的display属性设置为block来实现，例如：
css.
.block-element {。

display: block;
}。

3. 将元素设置为行内块级（inline-block）：
行内块级元素既具有行内元素在同一行内显示的特性，又具有块级元素占据整行宽度的特性。

可以通过CSS的display属性设置为inline-block来实现，例如：
css.
.inline-block-element {。

display: inline-block;
}。

通过以上的CSS样式设置，可以灵活地控制元素的显示方式，从而达到页面布局和样式设计的目的。

在实际开发中，根据页面需求和设计，可以灵活运用这些样式来控制元素的显示方式，以获得更好的页面效果。

在Element Plus 中，`el-tag` 是一个用于显示标签的组件。

你可以使用它来显示一个或多个标签，每个标签可以包含文本、图标或其他内容。

下面是`el-tag` 组件的基本用法：```vue<template><el-tag>标签内容</el-tag></template>```你可以在`el-tag` 组件中添加一个`closable` 属性，以使其变成一个可关闭的标签：```vue<template><el-tag closable @close="handleClose">标签内容</el-tag></template><script>export default {methods: {handleClose() {// 处理关闭事件}}}</script>```如果你需要显示多个标签，可以将多个`el-tag` 组件放在同一个父元素中：```vue<template><div><el-tag>标签1</el-tag><el-tag>标签2</el-tag><el-tag>标签3</el-tag></div></template>```你还可以使用`slot` 插槽来自定义标签的内容：```vue<template><el-tag><span slot="text">标签内容</span><i slot="close" class="el-icon-delete"></i></el-tag></template>```以上是`el-tag` 组件的基本用法，你可以根据需要进行更多的自定义和扩展。

htmldisplay用法html display 用法html display 是用来在 HTML 文件或者 web 网页中用来显示任何内容的一种常用的CSS 样式。

通过 html display，我们可以轻松地控制元素，比如：1. block：元素实体默认横向不折行，垂直水平均分整个容器，元素会在页面中呈现为块元素；2. inline：元素实体会折行，垂直拴在左下角，元素会在页面中呈现为行内元素；3. none：元素既不折行也不占据空间，元素会在页面中不显示；4. inline-block：元素实体不折行，它会占据页面中的一行空间，元素会在页面中呈现为行内块状元素；5. table：元素实体会折行，它会被同级元素的宽度和高度影响表格布局，元素会在页面中呈现为表格元素；6. flex：元素实体会自动折行，根据内容来对子元素进行平均分配，元素会在页面中呈现为弹性布局元素；7. grid：元素实体会自动折行，可以设置行、列和格子的具体参数，从而实现精确的页面布局，元素会在页面中呈现为栅格布局元素。

html display 还可以使用组合属性 flex-flow 和 justify-content 来实现对子元素的定位和对齐操作，比如：1. flex-flow 属性设置元素排列的方向，比如 row，column，row-reverse，column-reverse 等；2. justify-content 属性设置元素水平对齐方式，比如 flex-start，center，flex-end，space-between，space-around。

总之，html display 是一种非常有用的样式，能帮助我们更轻松地管理和控制页面中的元素，实现令人满意的页面布局效果。