8.3多行文本输入框 8.4下拉列表框、 在表单中,通过和标记可 以在浏览器中设计一个下拉式的列表或带有滚动 …… > 指定要创建的控件类型 Text 默认值,创建一个单行文本输入控件 Password...必须定义度量的范围,既可以在 text 中,也可… 如何在 EXCEL 中建立下拉列表 1、 在本工作簿的空白列输入下拉菜单的内容,然后选中后右键: 创建列表如下: 复制“=AC1:AC10” 2、 选中要建下拉菜单...表格标签 ? 链接和图片标签 ? 表单标签(文本框、密码框、下拉列表) ?...框架 网页实景图 2.1 静态网页制作一个网站…… 制作下拉菜单步骤 3:选中数据有效性,弹出对话框,允许里选 则序列,源填写菜单项目,用英文逗号隔开,一定得是英文逗号才 行哦 制作下拉菜单步骤 4:确定就...… 这里是固定第一行为表头) 窗口选项——选择拆分——再次选择冻结窗口——完成 如何设置单列下拉菜单: 无关联添加:使用有效性-序列,将要下拉的内容输入框内,中间以…… 版权声明：本文内容由互联网用户自发贡献
将所有列表项放置同一行 .pre-scrollable 使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 【文字颜色样式】 .text-muted 柔和的文本...】 定义一个表格 表格表头 表格主体内容 行 表头列 单元格 表格标题 【table样式】 .table..."> .table-dark 定义黑色背景的表格,示例： .table-responsive 创建响应式表格：在屏幕宽度小于 992px...-{sm|md|lg|xl} 定义在指定屏幕尺寸下响应式表格 .table-lg 较大的表格,示例： .table-sm 较小的表格,示例：<...默认是左对齐 .dropdown-header 下拉菜单标题 .dropdown-item 下拉菜单列表项目 .dropdown-divider 在下拉菜单中创建一个水平的分割线 .active 启用指定下拉菜单列表项目
GridView 将多个widget放在一个可滑动的表格中。 ListView 将多个widget放在一个可滑动的列表中。 Stack 在一个widget上面盖上另一个widget。...GridView 用GridView来将widget放入一个2维的列表中。 GridView提供了2个预装配好的列表，也可以自己建立自定义列表。 GridView支持滚动。...GridView 小结: 将多个widget放进一个表格中 当超出渲染范围时，自动提供滚动功能 可自定义格子，也可用下面提供的2种 GridView.count 指定列的数目 GridView.extent...ListView ListView能以列的形式展示数据。当内容超过渲染范围时，自动提供滚动的功能。...Card 小结: 实现了Material Design card 用于展示相关的数据 有一个子项（child），可以是column、row、list、grid或其它组合widget 有圆角和阴影效果 不支持滚动
具有易于使用，配置简单，既可以利用Ajax读取数据也可以直接从本地获取数据。...jQuery UI FastFind Menu Script 可拖动的嵌套菜单窗体，基于动态”AJAX”响应。...Date Picker JQuery.Resizer 一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。...CSS Dock Menu Galleriffic Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。...菜单项的内容既可以直接从当前页面中获取，也可以从一个外面文件或通过Ajax获取。
，包括顶部 的CSS组件内部也可以任意使用这些基础组件 3.jQuery 4.响应式设计：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，包括弹性网格和布局...列嵌套：在一个列里再声明一个或者多个行（row），内部所嵌套的row的宽度为100%时就是当前外部列的宽度 3.列排序：通过.col-md-push-*和.col-md-pull-*一实现 4.响应式栅格...HTML声明式，也可以是调用式（JavaScript代码），并且支持多种回调和可选参数 三、CSS布局 A.概述 1.移动：<meta name="viewport" content="width=device-width...tr、td上使用： .active表示当前活动的信息 .warning表示警告 .success表示成功或者正确的行为 .danger表示危险或者可能是错误的行为 .info表示中立的信息或行为 7.响应式表格....alert-dismissable样式即可实现一个可关闭的警告框 4.警告框也有多种颜色样式 5.使用.alert-link样式高亮警告框中的链接 P.进度条 1.样式.progress用于设置进度条的容器样式
表格是B端产品尤其是数据产品中，最常用的信息展现形态，比如商品列表、订单列表、用户列表，用户行为分析系统的事件列表、指标列表，DMP平台的标签列表、场景列表等，可以说B端产品40%以上的页面是由表格构成...，开发吐槽产品需求不清晰，需求变更 同一个产品经理，不同时期不同项目表格风格、功能不一致 同一个部门，不同产品之间基础能力和用户体验意识水平不一，产品用户体验不一致 数据明细表格 操作列表 一、表格信息结构...，字段数量的多少取决于列表信息的筛选需求，既不能一股脑全部展示，也不能一味求少，导致筛选不便 筛选字段交互方式：非固定内容一般使用文本搜索框，可枚举字段值的如状态、类型等采用输入+下拉搜索框，即既可以直接从下来列表中选择...新增及批量操作：针对需要变更的表格，通常会有新增记录，或批量编辑的诉求，可以提供批量操作按钮 表格字段数量控制：由于屏幕大小限制，表格宽度需要适当限制，最常采用的交互方式是把操作列固定，提供左右滚动的功能...可以展示记录的同时，控制操作权限，即只有编辑权限的人才可以对记录进行编辑、删除等，查看用户对应按钮禁用置灰 导出：对于有下载后二次处理或分析的，可以提供导出功能 分页器：显示记录条数及翻页功能，有些场景也可以使用滚动下拉加载分页
一、网格布局（栅格系统）概念 1、有12列（col） 2、col有四个类分别适应不同设备 xs——extra small sm——small md——medium...二、表格样式 可选表格类 1、条纹表格 table-striped 2、边框表格 table-bordered 3、悬停表格 table-hover 4、精简表格 table-condensed 上下文类....active 灰色 .success 绿色 .warning 黄色 .danger 红色 响应式类 table-responsive 可水平滚动 >768px 正常 三、表单样式....btn-link让按钮看起来像个链接 (仍然保留按钮行为)尝试一下 .btn-lg制作一个大按钮尝试一下 .btn-sm制作一个小按钮尝试一下 .btn-xs制作一个超小按钮尝试一下 .btn-block...img-rounded为图片添加圆角 (IE8 不支持)尝试一下 .img-circle将图片变为圆形 (IE8 不支持)尝试一下 .img-thumbnail缩略图功能尝试一下 .img-responsive图片响应式
大部分人眼里，数据可视化可以是这样的： ? 一个工具，帮你实现酷炫的数据可视化 ? 一个工具，帮你实现酷炫的数据可视化 但其实，它也可以做成这样： ? ? ?...如何实现？ 秘诀在于这个工具——FineReport （finereport官网有个人免费版，带免费激活码） FineReport本身是一个通用的报表工具和数据可视化工具。...它可以连接ERP、CRM、OA、MIS在内的各种业务系统数据，作为一个中间数据管理平台。 它可以快速制作报表，搭建统一的数据分析和可视化平台。...其优点： 1、异构数据源轻松整合，决策更清晰 轻松整合ERP/OA/MES等不同业务系统数据到同一个可视化页面，打破信息孤岛，让决策更加清晰 2、拥有丰富的可视化元素，视觉的饕餮盛宴 提供表格...定期刷新间隔可以自主定义，可精确到秒。 ? 4、图中数据自动滚动怎么实现？ 可以通过数据监控实现，但要求数据本身是实时变化的。
没学会 VLOOKUP函数 解析一下函数的原型： VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup]) 第一个参数：lookup_value...就是你要查的，可以是个单元格，也可以是直接的内容，比如数字或者字符串，文本类的需要使用双引号。...第二个参数：table_array 是要查的位置，可以选择一片单元格区域，可以是单行，多行，单列，多列，多行多列。...举例： 两个数据区域，现在需要通过VLOOKUP将下面表格内的年龄对应拼接到第一个表的后面： ?...演示一下如何使用： 解释： 第一个参数选择了学号，第二个选择下方的数据表，意思是将在下方的数据表中查询这个学号值以及选定区域的同一行其他列。 第三个参数3是展示选定区域的第三列年龄列。
可以为空 说明： 1.可以设置单列唯一，或者组合列唯一 2.如果unique约束单列，此列可以为null 3.可以是列级，也可以是表级约束 4.对于unique列，oracle会自动创建唯一值索引。...主键只能有一个。 2.主键可以是单列，也可以是组合列。 3.强制非空且唯一，如果由多列组成，组合唯一且列的每一部分都不能为null。 4.可以表级，可以列级。 5.自动创建唯一值索引。...说明： 1.可以是单列，也可以是组合列 2.引用当前表或者其他表中(只要想和当前表建立关系的表) 的主键列或者unique列 3.可以是表级别/列级别 4.值必须是引用的列的值或者为null 5.有外键约束时...子查询 一般使用子查询建表，要将另外一张表中的某些数据存放到一张新的表格中。(相当于将原来打印在控制台上的信息，现在直接定义成一张新的表格。)...2.创建表时可以指定列名，也可以不指定，但是一定不指定列的数据类型 3.创建表的列跟子查询表的列数要保持一致。
，可是现在随着用户使用终端设备的多样化，平板手机已经很常见，所以如何制作适合手机使用的网页？...Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包,来自于Twitter,利用 Bootstrap 提供的 Sass 变量和混合（mixins）、响应式栅格系统、可扩展的预制组件以及强大的...我们也可以根据自己的需要，定义列数： Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。...使用行样式row来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。...3.2.1表格导航或标签 创建一个标签式的导航菜单： 以一个带有 class .nav 的无序列表开始。 添加 class .nav-tabs。 Bootstrap 支持的分页特性。
用照片做背景 网站背景是一个比较难于决定的一项，对于传统行业而言，直接用一张照片作为网站背景，仿佛让用户直接进入企业大门一般，这样做既可以形成强烈的共鸣，也可以形成线上和线下有机的结合。 ...响应式设计 响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 ...随着手机和平板设备越来越多地进入人们的生活，人们访问网站的设备多了起来，如何让用户在不同设备上流畅的进入网站呢？响应式设计也成为了当下网站开发不可忽视的一股力量。...一个可自适应任何设备的网页是很了不起的。响应式设计能确保用户无论是在移动设备还是在PC上都能按你的意愿浏览内容。 ...当你的网站想要以流畅、线性的方式讲述一个故事时，满屏滚动与视差效应的结合可以创造一个完全沉浸式的浏览体验。 视差滚动就是让多层背景以不同的速度移动，形成运动视差3D效果。
这里我们不妨试想一下，如果需要立即接手一个B端新项目，你要如何快速梳理逻辑并且把需求进行可视化落地？对于做产品的人而言，答案自然是不言而喻的，你首先需要产出一个逻辑清晰的B端原型。...网格系统：网格系统可以保持一致性，规定网格列数、间距和响应式布局的断点。可以使用8像素规则，建立一个以8pt为单位的网格系统，利用8的倍数来规定页面中元件的尺寸及各自间距的大小。...此外，汉字通常采用左对齐，行高可以是文字大小+8px。图片和图标使用：确定图片和图标的使用规范，包括格式、尺寸、质量和响应式处理，确保图片和图标的加载速度和显示效果，并与页面内容相匹配。...表格的列数没有固定数目，默认展示的列数为3-8列，其余的列的内容会以滚动条滑动而展展示出来。此外，标题栏高度为56px、内容栏为56px，内容区和标题栏水平居中对齐。...有一个规律，就是尺寸的设定为偶数，且最好是以4px为基数。响应式设计：考虑不同设备和屏幕尺寸上的响应式设计，确保页面在各种设备上自适应和呈现良好，规定断点、内容隐藏和重排等响应式策略。
案例分析：应用商店首页 本教程以一个应用商店首页为例，展示如何实现可滚动网格布局。该页面包含顶部搜索栏、应用分类标签、推荐应用网格列表和底部导航栏。...Grid组件关键属性解析 5.1 列模板与行间距 .columnsTemplate('1fr') // 单列布局 .rowsGap(16) // 行间距 columnsTemplate：定义网格的列模板...，'1fr’表示单列布局，每列占据可用空间的一份。...响应式：考虑不同屏幕尺寸下的显示效果，适当调整列数和大小。 交互反馈：为网格项添加适当的点击反馈，提升用户体验。...总结 在下一篇教程中，我们将深入探讨可滚动网格布局的进阶技巧，包括多列布局、动态调整列数、网格项动画效果等内容，敬请期待！
DOCTYPE html> HTML5中的文档约束（DTD），代表使用的是H5格式 2、标签 在书写超链接时，必须在域名前写上：http://¬¬¬¬对搜索引擎优化，添加关键字、描述、作者...-scrollamount 滚动速度 g) 超链接标签 实现锚点功能 实现不界面之间的跳转 -href 指定跳转到目标资源位置 -target 打开网页的方式 -self 从本页跳转...（height指定行高） –td 表格列（width指定列宽） –th 标题列：自动加粗居中 tip:Table>tr3>td3+tab 快速指定一个三行三列的表格 J）表单标签 -action...中的视频标签 -src -controls -width -heigth 多媒体标签 -width -heigtth 独立内容标签 用来表示网站制作页面上一块独立的内容...figure所表示的内容可以是图片、统计图或代码示例。
以下是一个Power BI 直方图样例，展示了不同价位带的产品数量分布： 这个直方图有三个优点： 1. X轴标签不同于柱形图，不是和柱子居中对齐，而是显示在分界点； 2....X轴既可以是连续的维度（比如上图的零售价），也可以是任意连续的度量值（比如销售额，增长率，达成率、利润率等） 实现方法为vega-lite，假设有以下产品资料表： 在视觉对象库加载Deneb视觉对象，拖入以下两列...： 拖入的两个字段，一个指明统计什么的分布，本例为产品ID，一个用来指明依据什么计算分布，本例为零售价。...），是用来调整最大分箱区间，比如调整为30，划分更细： 接下来介绍第二个场景，Deneb拖入维度员工姓名，拖入度量值销售业绩： 就可以得到不同业绩贡献的员工分布： 最后再举个帕累托分析的例子，我们可以滚动计算产品的累计贡献...，放入表格效果如下： 放入折线和柱形图： 如果放入Deneb： 同样使用本文最开始的直方图代码，可以看到分段的产品品种数：
这里“指定级别”既可以是数据表明细级别（table level），也可以任意的问题级别（Viz Level）。...在2024.2版本推出 桑基图 Sankey 官方扩展后，Tableau再一次让我们看到扩展的更多可能，也将推动更多的社区扩展迎面而来！...02—如何制作 先看官方动图，拖曳、配置一气呵成。 详细步骤可以分成三步。 首先，打开官方的扩展，文件自动下载 同一个仪表板只需要添加一次即可。...再次，配置每个列的样式：样式和条件格式 默认的表格模式和之前并无差异，点击字段列，右键 format 或者点击上面工具栏，可以调整它的“format type”，这里有额外的两种方式可选，如下所示...一个字段列的自定义格式可以有多个，比如小于1K 标记红色，大于5K 标记绿色。
对后台设计的系统来说，系统可做皮肤功能的扩展，给用户一个基础色，然后做配色好的皮肤，让用户自由选择。...表格的设计规范的设计思考点如下： 操作列按钮：每个按钮字数不超过6个字。 列数太多：默认展示范围：3-8列，若出现更多，可固定重要列，剩余列滚动条展示交互设计。...列标题：表头列标题最多输入 8 个字符。 滚动条：表格内容超过一屏需要显示竖向滚动条时，需要固定表头。只需滚动表格内容就好。如下图所示。...阿里DataV 天猫双十一大屏就用DataV做的，是阿里云的拖拽式可視化工具，主要用于业务数据与地理信息融合的大数据可視化，像一些展览中心，企业管控中心使用。...前端开发团队也会分好几个人一起做项目，同时一个大的产品设计，都会分成多个小模块、按照时间、优先级来逐步开发设计的项目。
常见的单列布局有两种： header,content 和 footer 等宽的单列布局 header 与 footer 等宽, content 略窄的单列布局 1.如何实现 对于第一种，先通过对header...而且任何一栏都可以是最高栏，不会出问题。...两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位； 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整 四、等高布局 等高布局是指子元素在父元素中高度相等的布局方式...这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。...实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。 在制作样式之前需要一张类似下面的背景图： ?
常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种，先通过对header,content...而且任何一栏都可以是最高栏，不会出问题。...两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位； 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整 四、等高布局 等高布局是指子元素在父元素中高度相等的布局方式...这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。...「双飞翼」布局 CSS的单列布局与二&三列布局
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
