2.清除浮动 overflow -- hidden 内容超出的部分隐藏(重点的) scroll(强制出现滚动条样式) auto(根据内容多少来判断是否出现滚动条 ) 精灵技术 目的：为了有效地减少服务器接受和发送请求的次数...img不需要这个技术 2.需要测量每个小背景图片的大小和位置 3.给盒子指定小的背景图片时，背景定位基本都是负值 ## 字体图标 优势：浏览器支持性比较好，灵活性大；体积小，加载速度快，节省带宽流量；减轻服务器压力...，如果处理图片和文本的垂直对齐方式，line-height=高 不可以实现！...注意：只针对行内元素和 行内块起作用。 通常用于 -- 图片和文本对齐问题和去除图片底部空白缝隙问题。...1.必须强制一行显示 white-space:nowrap; 2.超出部分隐藏 overflow:hidden; 3.文字省略号代替超出的文本 text-overflow:ellipsis; 多行文本省略号显示
CSS高级技巧 精灵图 css sprites >为了有效减少服务器接收和发送的频率，减轻服务器的压力；将许多的小图片放到一张大图片上去；就是精灵技术，CSS sprites; > 精灵技术主要针对背景图片...iconfont > 字体图标展示的是图标，本质上是文字；可以改变颜色等属性 > 字体图标需要下载，下载地址有很多，推荐https://iconfont.cn/ CSS改变鼠标样式： 图片 CSS设置表单轮廓线...outline > input {outline: none}; CSS中的vertical-align属性： > 可以使图片，表单和文字对齐，垂直居中 > 只能应用于行内元素和行内块元素； > vertical-align...: baseline | bottom | middle | top | > 图片默认是基线对齐，会导致图片底侧和边框会有空隙；可以设置为其他属性，可以解决；图片 文本溢出隐藏显示省略号： 单行文本溢出...> 强制一行显示 wihte-space: nowarp > 超出部分隐藏 overflow: hidden > 文字用省略号代替 text-overflow: ellipsis; - 多行文件溢出
如果你创建了 Web 内容，那么即使从未写过一行代码或登录 CMS，你也可以在可访问性方面发挥作用。 你知道装饰性图片、信息性图片和功能性图片之间的区别吗？你知道为它们编写好的替换文本意味着什么吗？...让文本可访问 语言 为了使文本易于理解，你应该使用简单明了的语言。在短句和文本块中使用简单的词语。要达到 AAA 级标准，阅读难易程度不要超过 8 年级（初中以下）。...AAA 级指南还指出，内容块的宽度不应超过 80 个字符，而且文本不应该两端对齐，也就是说，不应该左右边距同时对齐。 标题 如果使用得当，标题是一种组织和分割内容的好方法。...但这也只是第一步。你需要花费时间和精力来理解这些准则以及如何实现它们。 希望你现在对提高可访问性需要做的一些事情有了更多的了解，因为使网站内容可访问不仅仅是 Web 开发人员的责任。...即使你从来没有写过一行代码或登录 CMS，作为内容创造者的你所采取的步骤也可以影响可访问性。因为当你使网站具有可访问性时，就会使每个人都可以访问它。
在这方面，Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS：字体参数、行高和垂直对齐”。 下面是一些实际的例子。...图 标 图标就像是与文本排成一行的小矩形。因此，所有由文本和行高引起的问题这里也都存在。众所周知，将文本与旁边的图标对齐是一项艰巨的任务。...vertical-align有 13 种取值，但没有哪一个能有效地将文本和图标对齐： text-align: middle 最接近对齐，但是按 x-height 而不是 cap-height 对齐，看起来还是不平衡...在上面的例子中，所有图标的字体大小和行高都做了同样的设置。如你所见，它们的大小、边距都不一样，没有哪一个真正地对齐了。 尽管有很多缺点，并且几乎没有任何好处，各家公司还是争先恐后地到处添加图标字体。...我们能做些什么：图标字体 不要再使用字体图标。 使用普通的图片格式。为了帮你做出决策，我画了下面这张图： 看看苹果公司怎么费力地将复选标记放入矩形内，以及将矩形放到文本标签旁： 然而他们还是失败了！
注意需要对齐，内边据或者边框的区域。 首先，识别更大的元素。在这里，四个元素在同一列中：一个图片，两行和一个文本块。 ? 接下来，图解每行。...第一行，我们称其Title Section，有3个子组件：一列文本区域，一个星型图标，及一个数字。第一列子组件包含2行文本。且第一列占有较大空间，因此需要将两行文本放在Expanded组件中。...将第一行的文本组件放置于Container组件中以便添加Container内边据。第二个文本组件文字是灰色。 最后的2个组件包括一个红色星型图标和一个数字“41”的文本。...Step 3：实现按钮行（Button Section） Button Section包含3列相同的布局——一个图标和一个文本。...这行中3列均匀分布，并且文本和图标颜色是APP build()方法中设置的primary color。
首先，确定更大的元素。 在这个例子中，四个元素排列成一列：一个图像，两行和一个文本块。 ? ? ? ? 接下来，绘制每一行。 第一行称为标题部分，有三个孩子：一列文字，一个星形图标和一个数字。...将第一行文本放入Container中可以添加填充。 列中的第二个子项（也是文本）显示为灰色。 标题行中的最后两项是一个红色的星形图标和文字“41”。 将整行放在容器中，并沿着每个边缘填充32像素。...第3步：实现按钮行 按钮部分包含3列，它们使用相同的布局 - 一行文本上的图标。...将文本放入容器以在文本上方添加填充，将其与图标分开。 通过调用函数并传递特定于该列的图标和文本来构建包含这些列的行。...Material Components Card: 将相关信息组织成带有圆角和投影的盒子。 ListTile: 将最多3行文本，以及可选的前导和训练图标组合成一行。
： 可以让一行文本在盒子中垂直居中对齐。...通常我们使用于强制一行显示内容 normal : 默认处理方式 nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...推荐网站： http://icomoon.io icomoon字库 IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。...（如中文、日文、韩文等） E::first-line 文本第一行； E::selection 可改变选中文本的样式； p::first-letter { font-size: 20px; color...不换行，则 收缩（压缩） 显示 强制一行内显示 wrap 规定灵活的项目在必要的时候拆行或拆列。 wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
标签可以显示一行只读文本、一个图像或带图像的文本，它并不能产生任何类型的事件，只是简单地显示文本和图片，可以指定标签上文本的对齐方式。...)：创建一个带文本的JLabel对象，并设置文本水平对齐方式； public JLabel(String text, Icon icon, int aligment)：创建一个带文本、带图标的JLabel...使用图片图标 Swing中的图标除了可以绘制之外，还可以使用某个特定的图片创建。...7. weightx和weighty属性 设置网格组的每一行和每一列对额外空间的分布方式。默认值为0，表示不分布容器的额外空间。...注：在设置网格组的每一行和每一列对额外空间的分布方式时，建议只设置第一行的weightx属性和第一列的weighty属性，建议为各个属性按百分比取值。
, 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ; 除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐 nav { /* 整个导航布局距离顶部..., 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置在图片下方 ; 文本 span 样式为 : nav a span { /* 导航栏中的文本 设置为 块级元素 */...默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } a { /*...*/ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...*/ .brand { /* 设置圆角后 超过圆角的图片不再显示 */ overflow: hidden; /* 设置圆角 顺序为 : 左上 / 右上 / 右下 /左下 */
之所以提到矩形，是因为你要把一系列元素对齐 —— 如第一行的用户名、@handle（译者注：handle 属于专有名词，指 Twitter 中的用户 ID，所以在本文中保留不译。...…）和时间以及最后一行的图标 —— 把它们用方框包起来便于规划。...元素的默认样式 是什么决定了元素的样式？为什么有的元素独占一行，而有的元素能共处一行？ ? 这要归因于元素的默认样式，这其中就有我们要探讨的第一个 CSS 知识点：行内元素和块级元素。...注意，在上面的例子中，为什么即使 img 标签是行内元素，头像图片依然独占一行？因为它下方的 div 是块级元素。 然后要注意，为什么 @handle、用户名和时间都在同一行？...一种就是设置 Flex 子项的对齐方式。你应该对设置对齐方式很熟悉，每个富文本编辑器顶部都有这种功能的按钮： ? 它们把文本进行左对齐、居中对齐、右对齐以及 “两端对齐”，也就是铺满整行。
，它支持文本字符串和图标 * 重点是标签含有文本字符串和图标 * * 2:标签可以显示一行只读文本，一个图像或带图像的文本，它并不能产生任何类型的事件 * 只是简单的显示文本和图片，但是可以使用标签的特性指定标签上文本的对齐方式...* 重点是只是简单的显示文本和图片 * * 3:JLabel标签的构造方法，带图标，并且设置图标水平对齐方式，带文字，并设置文字的水平对齐方式 * 带图标带文字，并且设定标签内容的水平对其方式...* * 第一创建一个通用的ImageIcon对象，当真正需要设置图片时再使用ImageIcon对象 * 调用setImage(Image image)方法来操作 * 第二直接从图片源创建图表...* 第三除了可以直接从图片源创建图表之外，还可以为这个图标添加简短的描述 * 第四利用位于计算机网络上的图像文件创建图标 */ import javax.swing.JFrame; import...URL路径 //该方法的参数是imageButton.jpg,这个路径是相对于MyImageIcon类文件的 //所以可将imageButton.jpg图片放在和此类同一个文件夹下面
基础功能 什么是Markdown Markdown是一种轻量标记语言,通过简单的语法，使普通文本具有一定的格式。...___粗斜体文本___ ~~带删除线文本~~ 带下划线文本 输出结果： ---- 分隔线 在一行中使用三个及以上的星号：*、减号：- 或 下划线: _。...文章内如何引用本地图片文件：进入hexo的source/_posts目录后，会发现一个写文章内容的.md文件和一个同名的文件夹,把图片丢进文件夹里面就行，然后直接!...带图标的按钮：Guguge 红色的按钮：Guguge 不带图标红色的按钮：Guguge 默认空心按钮：Guguge 红色空心按钮：Guguge ---- 文本行内插入图片 Markdown默认的插入图片会独占一行...Markdown 也允许你只在整个段落的第一行最前面加上 > ： > This is a blockquote with two paragraphs.
举个例子，备忘录的导航栏中就没有当前备忘录的标题，因为备忘录的第一行就已经提供了所有用户需要的内容。 ? 考虑在应用最高层级的导航栏中放置一个分段控件。...副标题型包括左侧图标（可选），图标右边左对齐展示的文字标题，以及在标题下方同样左对齐展示的副标题。 左对齐的文本标签让用户可以更快速地扫视表格。...Value 2 (UITableViewCellStyleValue2).Value 2样式蓝色字体标题右对齐，黑色字体的副标题左对齐，混排在同一行中。这种样式通常不包含图片。...虽然你可以使用属性字符串将不同的字体、字色和对齐方式串联在同一个文本视图内，但保持文本的可读性是必不可少的。...想要了解更多动态文本的指引，可以参阅本文第一章中颜色与字体里的部分；想要了解更多编程相关的内容，可以参阅Text Styles. 根据输入内容的类型来指定不同的键盘类型。
在以下情况考虑使用卡片： 同时展现多种不同内容 卡片内容之间不需要进行比较 包含了长度不确定的内容，比如评论 包含丰富的内容与操作项，比如赞、滚动条、评论 本该是列表，但文字超过3行 本该是网格，但需要展现更多文字...示例中呈现的分隔线是一种弱规则，弱到不会去打扰到用户对内容的关注。 编辑 列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。 ...列表由单一连续的列构成，该列又等分成相同宽度称为行（rows）的子部分。行是瓦片（tiles）的容器。瓦片中存放内容，并且在列表中可以改变高度。 如果列表项内容文字超过3行，请改用卡片。...编辑 tab文字要显示完整，字号保持一致，不能折行，文字与图标不能混用。 编辑 文本字段（Text fields） 编辑 文本框可以让用户输入文本。...编辑 编辑 通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧 编辑 错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。
那么，如何对齐有背景的纯文本或段落呢? 这取决于背景的视觉密度。如果是浅色背景，我们可以将突出显示的段落与其他文本对齐。 ? 由于背景是浅色的，所以不会中断或干扰我们的阅读体验。 ?...我们再来看视觉对齐的另外一种情况——文字与按钮的对齐。看看下面按钮中的文本，它们看起来都居中是吗？ ? 诀窍是，我右边按钮的文本向左移动了一点，因为右边的边是三角形的。...Cancel和OK用x高度对齐法就有点太高了。 ? 图标按钮的情况与文本按钮略有不同。我们把“发送”图案放在一个圆形按钮的背景上。你认为哪种图标在视觉上更平衡? ?...而在第二个方案中，我们移动了图标的位置，使图标锐利的突出与圆形边缘等距。 ? 所以如果你要输出给开发人员，那么最好偏移一些距离，以便将图形维持在视觉中心。 ?...- 要点： 具有尖锐边缘的形状应该更大或更长，以便与相邻的矩形保持平衡。 用大写高度对齐法通常是对齐文字与背景按钮的有效方法。 要让三角形图标与按钮对齐平衡，可以用其外接圆与背景按钮对齐。
charset="UTF-8"> 网页标题 网页显示内容 第一行是文档声明...，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响...“”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上...2、 标签 行内元素，表示一行中的一小段内容，没有具体的语义。...align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right 2、标签：定义表格中的一行 3、和标签：定义一行中的一个单元格
-- 图标字体（iconfont） - 在网页中经常需要使用一些图标，可以通过图片来引入图标 但是图片大小本身比较大，并且非常的不灵活...文本的样式1 7.1 水平对齐 text-align 文本的水平对齐 可选值： baseline 默认值 基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐 7.2 垂直对齐 vertical-align...设置网页如何处理空白 可选值： normal 正常 nowrap 不换行 pre 保留空白(网页文件中写的什么样，就是什么样) 8.3 文本溢出的效果设置 text-overflow: ellipsis.../img/1.png");设置背景图片 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满 如果背景的图片大于元素，将会一个部分背景无法完全显示...背景图片的偏移量从内容区处计算 border-box 背景图片的变量从边框处开始计算 10.2 设置背景图片的大小 background-size 第一个值表示宽度 第二个值表示高度（也可以写
3、设置圆角和超过部分隐藏...在布局的 左上角 和 右上角 都有一个圆角 , 并且矩形图片超过圆角的部分被隐藏了 , 设置圆角和超出部分隐藏样式 : .brand { /* 设置圆角后 超过圆角的图片不再显示 */...默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align: middle; } a { /*...*/ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align...*/ .brand { /* 设置圆角后 超过圆角的图片不再显示 */ overflow: hidden; /* 设置圆角 顺序为 : 左上 / 右上 / 右下 /左下 */
第一部分笔记 核心结构包括以下4部分 基础部分和字体和段落 表格 标书制作 和商务报告 简历制作 和海报 基础部分和字体和段落 shift，ctrl，alt 选择的区别 好习惯，建立标准编辑环境 图片...会创建新的一行 表格和也可以插入公式 图片 表格超过页面，右侧文字看不见， 解决方法如下 图片 表格底部文字被遮挡 图片 解决方法 图片 长表格 跨页 断行 问题描述 图片 解决办法 图片 如何创建三线表...插入->对象下面的插入文档的文字,注意不是对象 Word文档拆分：分发给其他人协助填写，找到视图大纲，插入文件 图片 文本框创造链接，让两个文本框显示一端长文字 图片 文本框的船锚标记 图片 简历制作...和海报 制表符与tab 图标资源的网站 iconfont.cn 表格里面不能只按tab，要按ctrl+ tab 图片 常见字体整理 图片 表格过长，想要固定标题行，要选中第一行，然后点击重复标题行 图片...精美文档推荐网站 图片 如何识别一个字体的名字。。。
领取专属 10元无门槛券
手把手带您无忧上云
