——莎士比亚 上篇习题解析 上一篇结尾留了一个小习题，先来看看，表格的高亮的表头、隔行高亮的效果是如何实现的。 通常为元素设计背景色可以实现高亮效果。...我为单元格都设置右侧和下侧的边框，所以表格最外层只需要设置左侧边框即可，border-left: 2px solid #916dd5。 表头固定的表格 表头固定，即不随表格内容的滑动一起滑动。...就可以实现固定的效果。 带省略的表格 当表格文字过多时，为了优雅的展示表格，一般会设置文字超出一定的长度展示省略号。...它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。...讲解代码操作步骤 演示代码都可通过代码复制拷贝到本地的IDE中进行演示。也可以自己照着敲击学习。
background-attachment background-attachment:fixed 背景图像是否固定或者随着页面的其余部分滚动 background-attachment的值可以是scroll...italic文本斜体显示 oblique文本倾斜显示 文本属性 行高line-height line-height:50px 可以将父元素的高度撑起来 文本水平对齐方式：text-align left...可见性visibility visibility:hidden visible元素可见 hidden元素不可见 collapse当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局 溢出隐藏overflow...auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...，内联元素，内联壮元素 元素分类转换display block,将元素转换为块级元素 inline,将元素转换为行级元素 inline-block,将元素转换为内联块元素 none将元素隐藏 描边border
，浮动，可以直接设置宽度和高度，默认宽度是内容宽度 ---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动 可以直接加宽高，默认宽度是内容宽度 脱离标准流，在页面不占有位置...box-shadow 给盒子添加阴影效果 h-shadow、v-shadow、blur、color… spread 语言扩大 /// inset 内部阴影 ---- 隐藏元素（重点）： 开发中经常会通过...：background-size background-size：宽度 高度 /百分比 contain 等比例缩放 cover 将背景图片等比缩放，填满盒子 刚好没空白 background: color...image repeat position/size //连写同时设置时，需要注意覆盖问题 ---- 只做了解： 表格边框合并 border-collapse: collapse 焦点选择器 input...： contain cover 溢出隐藏： auto scroll visible 元素整体透明： opacity 焦点伪类选择器： focus 表格边框合并： collapse 链接伪类选择器： link
想要保证这样的图形始终固定在状态栏后面，你可以用视图控制器(view controller)来让它固定在滚动内容上一层，又或者可以用滚动视图(scrolling view)来保证图形固定在屏幕的顶部。...让内容固定在导航栏区域外显示（这个区域由应用的statusBarFrame属性来定义）。如果你确定要这样做的话，请给导航栏区域添加固定的、与屏幕背景色相同的背景色。...有时候用户会觉得以列表呈现的信息更容易阅读和理解，例如将文本信息放在滚动列表中的时候，用户阅读和处理起来会更为简单和高效。 让视图中的项更容易选中。...使用滚动条效果的时候，当前页面将滚动到下一页；而使用翻页效果时，页面上会出现一个模拟实体书或笔记本翻页效果的翻页动画 使用页面视图控制器来展示那些线性的内容（比如一个故事的文本），或者是一些可以被自然地拆分成块的内容...可以应用在页模式(paging mode)中，在此模式下用户可以通过拖拽和轻击等手势来浏览一页的内容 使用滚动视图来允许用户在固定的空间内浏览大尺寸或大量的视图。 适当地支持缩放操作。
； 圆角边框：border-radius； 阴影：box-shadow； 尺寸属性 固定宽度：width； 最小宽度：min-width； 最大宽度：max-width； 固定高度：height； 最小高度...：min-height； 最大高度：max-height； 溢出方式：overflow； 横向溢出：overflow-x； 纵向溢出：overflow-y； 背景属性 背景：background； 背景颜色...：background-color； 背景图像：background-image； 铺排填充：background-repeat； 滚动固定：background-attachment； 背景图像位置：...最后子元素： :last-child; 该类型最后子元素： :last-of-type； 定位属性 定位方式：position； 层叠顺序：z-index 其他属性 列表样式：list-style； 表格...：table； 鼠标手势：cursor; 不透明度：opacity; 轮廓：outline; 滚动条：scrollbar;
背景类属性 background-color 背景颜色 background-image 背景图片 background-repeat 背景重复 background-attachment...background-position 背景定位 文本格式类属性 属性 描述 color 设置文本颜色 direction 设置文本方向。...用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。...fixed 元素的位置相对于浏览器窗口是固定位置。 sticky 基于用户的滚动位置来定位。...scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
div>Css注释 注：与Html 不同，它的注释方式是：/* Css语句*/ 2.Css的选择器 为什么一开始要讲选择器了，因为我们要想精确修改的Html中的某个元素的属性，就必须使用选择器，它可以通过选择器定位到某个元素上然后修改元素的样式...*{ background:red } 3.Css样式更改 1).背景Background 背景可以设置很多，比如背景颜色，背景图片，背景定位，背景重复，背景关联， 1)).背景颜色 repeat-x 水平平铺图片 repeat-y 垂直平铺图片 no-repeat 不平铺图片 5)).背景滚动条... fixed 固定 不出现滚动条 scroll 出现滚动条 no 没有滚动条 6)).背景大小...'> content-box 文本内容区域 padding-box 内边距区域 border-box 外边框区域 8)).背景裁剪区域 <div style='background-clip
:first-line 向文本的第一行添加样式 :after 在元素之后添加内容 :before 在元素之前添加内容 css背景 css背景属性如下： 属性 说明 background-color...定义背景颜色 background-image 定义背景图片 background-repeat 定义背景图片是否重复以及其重复方式 background-attachment 定义背景图片是否跟随内容滚动...background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为： scroll，表示可以随着页面其余部分的滚动而滚动。...设置 fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置 inherit，继承父元素。...： 属性 说明 border-collapse 设置是否合并表格边框 border-spacing 设置相邻单元格边框之间的距离 caption-side 设置表格标题的位置 empty-cells 设置是否显示表格中空单元格上的边框和背景
* 功能：固定表头 * 参数 viewid 表格的id * scrollid 滚动条所在容器的id * size 表头的行数（复杂表头可能不止一行） */ function scroll...将表格拷贝一份 var tb2 = document.getElementById(viewid).cloneNode(true); // 获取表格的行数 var len = tb2....rows.length; // 将拷贝得到的表格中非表头行删除 for (var i = tb2.rows.length; i > size; i–) { // 每次删除数据行的第一行...添加到滚动条容器中 container.appendChild(bak); // 将拷贝得到的表格在删除数据行后添加到创建的div中 bak.appendChild(tb2); ...”; // 设置创建的div的背景色与原表头的背景色相同（貌似不是必须） bak.style.backgroundColor = “#cfc”; // 设置div的display属性为
： 表格标签 表格的行 表头 单元格 表格合并 同一行内，合并几列colspan="2" 同一列内，合并几行rowspan="2" 表单标签 <...，用于提交表单，后台接收数据用 value为文本输入框设置默认值 type通过定义不同的type类型，input的功能有所不同 type功能： text，password，radio，checkbox...space:以相同的间距平铺且填充满整个容器 背景图片定位 background-attachment background-attachment:fixed 背景图像是否固定或者随着页面的其余部分滚动...background-attachment的值可以是scroll跟随滚动，fixed固定。...auto 如果内容被修剪，则浏览器会显示滚动条以便查看 边框颜色： outline input文本框入框自带边框，我们可以通过outline修改边框 outline: 1px solid #ccc
针对Edge浏览器降级处理，与IE浏览器效果一致，无固定列，整体可横向滚动。 自定义实现固定列，不使用组件的固定列实现，通过使用position: absolute;这种方式来实现表格的固定列。...第二个方案的详细过程如下： 使用div包裹表格，当表格宽度超过div宽度时，开启滚动： .scroll-table { width: 100%; overflow-x: scroll; } 针对表格...，非常简单，将表格的一列设置成绝对定位,在设置了绝对定位后，该列会脱离原来的文档流，表格少了一列，所以需要加一个背景板来保证表格能够给这个固定列留出一个位置。...HTML代码大致如下，这个fixed-col可以为固定列的样式，也可以设置成背景板的样式，demo中是用其指定了固定列的样式。...解决方案： 使用表单的reset()重置表单，但是重置的操作需要放在setTimeout中，或者通过其他手段将重置的操作作为表单初始化时的最后一个宏任务执行。
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。...Chromatable JQuery Plugin - 固定表头，可滚动内容区，内容区滚动的时候表头位置保持不变。 ? ?...Scrollable HTML table - 将普通 HTML 表格变为可滚动状态。...Colorize - 自动对表格间隔行使用不同背景颜色 ? ? jExpand - 一个非常轻量的 jQuery 插件，可以展开/关闭表格单元格，使表格可以容纳更多内容。 ? ?...HeatColor - 根据规则，或自动对表格中的值进行分析，对不同范围的值按不同颜色区分。 ? ? Fixed Header Table - 固定表头可滚动表格 ? 表格搜索，筛选 ?
腾讯文档团队针对该问题进行优化，通过禁用取色、多卡片离屏渲染等方式实现 FPS 接近 60 帧，提升两倍多。本文将详细介绍其挑战和解决方案，并输出通用的经验方法。希望本文对你有帮助。...智能表格也是一个天然的低代码平台，只要使用开放的增删改查 API 就能实现一个后台管理系统，利用提供的各种视图将数据展示出来。它本质上是一个在线数据库，拥有更丰富的列类型和视图。...卡片的高度是不固定的，只有当前列有内容才会展示出来。...05 减少搜索结果匹配 前面我们说过，渲染层在渲染的时候会进行收集，在滚动的时候由于可能会有搜索结果高亮的存在，所以也要计算当前卡片是否匹配搜索结果。如果匹配了，那就设置背景色。...为了避免滚动的时候，再去实时计算当前应该新增或减少哪些卡片，会在最开始的时候一次性计算好所有的卡片宽高。 卡片宽度涉及到文本、图片等宽高，也就是说最开始已经处理过文本计算，那这部分缓存起来不就好了？
边距合并：向上边距和向下边距，取最大的 负值：外边距负值，溢出，左边的向右边动 宽高：width，height 内边距：padding 尺寸限制：box-sizing：border-box，固定大小...visibility：hidden，不可见但是占位置 overflow控制溢出：scroll，滚动条；auto，自动，hidden：隐藏 尺寸控制：width，height，min-width，...背景颜色：background-color 背景图像：background-image：url（） 背景裁切：background-clip，content值为背景应用于内容区 背景重复：background-repeat...，no-repeat不重复，repeat-x在x轴重复 滚动：background-attachment，fixed为固定，比如应用于水印图片 位置：background-position，top...对齐：文本用文本对齐，表格用块对齐方式 表格颜色：与div差不多 表格背景：与div差不多 细线表格：border-collapse，设置collapse 间距：border-spacing
（用十六进制的颜色表示） (3)、background: 页面的背景图像（所需的是图片的URL） (4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed，设为Fixed后图像不会随着滚动条的滚动而动...href=”#”> 链接 (4)、脚本链接： 文字链接 (5)、制作图像映射：在同一图像上嵌入不同的链接，创建图像映射的方式是通过...个级别数越大越粗 Font-variant的属性值：normal 正常 small-caps 将小写转换为大写 Font组合时的顺序：样式，粗细，大小 (2)、颜色和背景属性： Color 颜色... background-color 背景颜色 background-image 背景图片 background-repeat 背景图片如何重复 Background-position 设置背景图片水平和垂直的位置...提交表单时 onSlecte 文本域被选中时 onUnload退出载入时 onFocus当光标落在文本框时
（用十六进制的颜色表示） (3)、background: 页面的背景图像（所需的是图片的URL） (4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed，设为...”> 链接 (4)、脚本链接： 文字链接 (5)、制作图像映射：在同一图像上嵌入不同的链接，创建图像映射的方式是通过... exp: td｛color：red;font-size:8pt｝ （b）、类样式表：能够在文档样式表或外部样式表中为同一个元素创建不同的样式，在文档后面通过设置... (2)、颜色和背景属性： Color 颜色 background-color 背景颜色 background-image 背景图片 background-repeat...背景图片如何重复 Background-position 设置背景图片水平和垂直的位置 background 组合设置背景属性 属性值： Background-repeat
blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 CSS全局样式 1、布局容器类样式：.container 和 .container-fluid .container 固定宽度并且具有响应式...2、标题样式：到、.h1 ~ .h6 ~样式重写了，基本上做到了兼容性。...4、文本对齐样式：.text-left、.text-center、.text-right、.text-justify .text-left：文本左对齐 .text-right：右对齐 .text-center...7、响应式表格： 将.table元素包裹在.table-responsive元素内，即可创建响应式表格 当屏幕宽度小于768px时，表格会出现滚动条。...当屏幕宽度大于768px时，表格的滚动条自然消失。 也就是在table标签外再创一个div标签，div的class设置为table-responsive即可。
从火焰图可以看到滚动阶段会有很多 long task，所以滚动很卡。...智能表格也是一个天然的低代码平台，只要使用开放的增删改查 API 就能实现一个后台管理系统，利用提供的各种视图将数据展示出来，几乎没什么成本。...由于智能表格完全是使用 Canvas 进行绘制的，所以不像在 DOM 里面拥有很多 CSS 属性，比如文本的换行、省略等等，在 Canvas 这些都是需要自己去计算的，Canvas 提供了 measureText...如果用户移动了卡片到另一个分组，此时应该将两个分组标记为 dirty，重新计算两个分组的高度。...通过这种方式，在更新阶段可以将 90% 场景的计算耗时几乎降低到 0ms。 8.
.text-uppercase 设定文本大写 .text-capitalize 设定单词首字母大写 .initialism 显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字...将所有列表项放置同一行 .pre-scrollable 使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 【文字颜色样式】 .text-muted 柔和的文本....text-secondary 副标题 .text-white 白色文本（白色背景上看不清楚） .text-dark 深灰色文字 .text-light 浅灰色文本（白色背景上看不清楚） 【表格标签..."> .table-dark 定义黑色背景的表格,示例： .table-responsive 创建响应式表格：在屏幕宽度小于 992px...时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）,示例: .table-responsive
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签进行设置） cellpadding：单元格内容到边的距离，像素为单位。...默认情况下的值为0 bgcolor="#99cc66"：表格的背景颜色。 background="路径src/..."：背景图片。 背景图片的优先级大于背景颜色。...属性： scrolling="no"：是否需要滚动条。默认值是true。 noresize：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。...POST方式： 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。...我们可以通过label把input和汉字包裹起来作为整体。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
