,不在像之前那样盲目了。...传统Table布局方式实际上是利用了HTML table表格元素具有的无边框特性,由于table元素可以在显示时使得单元格的边框和间距为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中...Table表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码,如width=100%,border=0等。...表格布局的混乱代码就是这样编写的,大量样式设计代码混杂在表格,单元格中,使得可读性大大降低,维护起来成本也相当高,尽管有类似于Dreamweaver(以下 简单称dw)这样可视化的界面进行编写,只要你需要什么...总体上而言: div+css布局比table布局节省页面代码,代码结构也更清晰明了. div+css的页面对搜索引擎支持好,而且速度更快了,能够比table 更加快速的显示网站内容. div+css布局使网站版面布局修改变的更简单
网格单元 网格单元是两个相邻的行网格线和两个相邻的列网格线之间的空间。它是网格的单个「单位」。 在这个例子中,这是位于行网格线 1 和 2 之间,以及列网格线 2 和 3 之间的网格单元。...❞ 一个网格区域可能由「任意数量的网格单元组成」。 在这个例子中,这是位于行网格线 1 和 3 之间,以及列网格线 1 和 3 之间的网格区域。...如何抉择 在构建显示布局时,我们可以通过使用areas和行/列都可以达到目的,但是呢,使用areas时,它允许我们给grid分配语义含义,而不是使用晦涩难懂的行/列数字。...在这个示例中,我设置了一组按钮,并使用 Grid 对它们进行了排列: 如果我们使用的是带有键盘的设备,可以通过点击左上角的第一个按钮(One),然后按 Tab 键逐个移动按钮。...为了解决这个问题,我们应该重新按视觉顺序在 DOM 中重新排列网格子项,以便我可以从左到右,从上到下进行 Tab 键浏览。 6.
对于标题h1 ~ h6的语义化,我们需要注意以下四个方面。 (1)一个页面只能有一个h1标签。 (2)hl ~ h6之间不要断层。 (3)不要用h1 ~ h6来定义样式。...就像你写文 章一样,一个页面就等于一篇文章,你见过一篇文章有多个主标题的么? 2.h1~h6之间不要出现断层 搜索引擎对hl ~ h6标签比较敏感,尤其是hl和h2。...alt属性用于图片描述,这个描述文字是给捜索引擎看的。并且当图片无法显示时,页面 会显示alt中的文字。 title属性也用于图片描述,不过这个描述文字是给用户看的。...并且当鼠标指针移到图片 上时,会显示title中的内容。...问大家一个问题:如图所示的这种表格数据的展示,应该怎么实现呢?不少得了 “table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上,对于这种表格数据形式, 最好的选择还是table。
简介 Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局,也是唯一的二维布局方案,利用grid布局可以很轻松的实现很多的网页布局 正文 gird布局很强大...(3, 200px); grid-template-areas: 'a a a' 'b b c' 'e e c'; 上面的代码中将9个单元格划分成了a,b,c,d4个区域 在我们常见的布局中...不会被划分于任何区域,也就是在上面的代码中,只划分了6个区域 注意:区域的命名会影响到网格线的名字,对于区域aside它的起始线叫做aside-start,结束线叫做aside-end ?...设置多余网格 对于网格有显式网格和隐式网格,显示网格通过grid-template-columns 和 grid-template-rows 属性中定义的行和列,当实际行数或者列数大于设置的行列数时,就会有多余的网格...属性值:start | end | center | stretch 从self这个单词来说,就有自身的意思吧(工地英语,我说有就有),也就是只对当前项目本身有效 .item-1 { background-color
8、 注解:可以把一些独立的逻辑部分划分出来,放在一个标签中,这个标签的作用就相当于一个容器。 ...一个html页面可以看成一个家,而每一个div可以看成家的每个小房间,每个小房间的装饰由css负责 每一个都可以有一个id, 这个id 就相当于每个房间的门牌号...4、…:表格的一个单元格,一行中包含几对...,说明一行中就有几列。 5、…:表格的头部的一个单元格,表格表头。...6、表格中列的个数,取决于一行中数据单元格的个数。...7、 表格的标题 8、summary 摘要 不在界面上显示 10、 ,网页链接
1.第二次学习的感受 我最开始在学习HTML中,和大多数初学者一样觉得这也太简单了,觉得没有多少东西,只要记住这些个标签就可以了。当我第二次学习时才发现,HTML并没有我想象中的那么简单。...div 是无语义的标签,若用 div 来代替h1~h6,后期维护会很困难,而且对 SEO 的影响较大,因为这样会让这个页面丢失大量权重。...alt 属性用于图片描述,其中的描述文字是给搜索引擎看的,并且当图片无法显示时,页面会显示alt中的文字。...1.表格标签 标签 说明 table 表格 caption 标题 thead 表头(语义划分) tbody 表身(语义划分) tfoot 表尾(语义划分) tr 行 th 表头单元格 td 表格单元格...那为什么我用无序列表呢? 这是因为,有序列表前的数字外观是固定的,而用无序列表可以通过CSS进行样式改变。
段落标签 单词缩写: paragraph 段落 [ˈpærəgræf] 无须记这个单词 在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是...HTML中的文本格式化标签,使文字以特殊的方式显示。...表格结构 在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示: :用于定义表格的头部。...通常这个标题会被居中于表格之上。 合并单元格 跨行合并:rowspan 跨列合并:colspan 合并单元格的思想: 将多个内容合并的时候,就会有多余的东西,把它删除。...表格中由行中的单元格组成。 表格中没有列元素,列的个数取决于行的单元格个数。 表格不要纠结于外观,那是CSS 的作用。
在和标签之间的内容是网页的主要内容,如、、、等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。...标签 常用属性 1)属性:border 作用:规定表格边框的宽度 2)属性:cellpadding 作用:单元格中的文本与单元格边框的间距 3)属性:cellspacing 作用:单元格之间的间距...使用标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。... title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。...这个问题可以用用我们国家的省份划分来解释,国家需要划分不同的省份来利于管理,那么我们 html 页面也是的,整个 html 文档元素太多,我们需要使用 div 标签将页面划分成不同的块,这样可以对每块进行分开管理
现实中算工资的时候,或者财务报表的时候,难免会有一些小数。 由于我国不特殊的情况,最小单位是分,所以两位小数才有意义,第三位小数是毫无意义的,所以需要对数据进行处理。...经过人力资源的同事精准的运算,得到我的年终奖是3.1415926元。 但是由于这笔钱无法打给我,所以需要保留两位小数!怎么做呢?...常见做法: 第一步:选中年终奖 第二步:在开始选项卡-单元格格式-选则数字 第三步:看选完数字后的结果 看似完成了任务!但是你看到的真的是你看到的吗? 选中单元格!...看一下右上角,Excel显示的虽然是两位小数,但是他实际上还是原来的数字没有变,只是呈现上变为两位而已,实际小编的年终奖还是3.1415926。 如果依据这个数据进行汇款,是无法正常汇款滴!...一共有两个参数 =Round(要计算的数字,保留几位有效数字) 用round函数得到的数字才是真的只有两位。 那有朋友会问,我怎么能快速知道这个数字是否如我所见的呢? 选中单元格,查看编辑栏。
如果希望某段文本强制换行显示,就需要使用换行标签 ---- div span标签(重点) div span 是没有语义的 是我们网页布局主要的2个盒子 css+div...,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。...td /td:用于定义表格中的单元格,必须嵌套在标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)。 注意: 1....---- 表格结构(了解) 在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体 如下所示: :用于定义表格的头部。...通常这个标题会被居中于表格之上。
,每个段落由多个 节段 组成,一个段落中具有相同样式的连续文本,组成一个节段,所以一个 段落 对象有个 Run 列表 例如有一个 Word,内容是: word 文档内容 则 结构这样划分: 第二个 段落..." 之间的内容,且内容中不包括 " 后来整理过程中,还发现另一种写法: '".*?"'...那个~ 能不能再帮我生成个图表目录,这个必须要……” 好吧,能者多劳(神器在手),干就完了…… 强大的 python-docx 在上面小试牛刀中,介绍了插入段落(paragraph)的用法,下面在介绍一些...cell.text = '我是单元格文字' # 表格的行row = table.rows[1]row.cells[0].text = 'Foo bar to you.'...= 'List Bullet' 文字样式 在前面 python-docx 文档结构图可以看到,段落中,不同样式的内容,被划分成多个 节段(Run),文字样式是通过 节段(Run)来设置的 设置加粗/斜体
400px; } display是显示模式,用来改变元素的行内、块级性质,一旦给一个标签设置display:inline;那么这个标签立即变为行内元素。...此时div和span没有什么区别,此时的div不能设置宽度和高度(即使设置了也并不显示出来,不信你去用代码验证一下呀),此时div可以和别人并排。...Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是「一维布局」。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是「二维布局」。...比如,3行3列会产生9个单元格。 5.2.4 网格线 划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。...grid-template-columns: 100px auto 100px; 上面代码中,第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width,且这个值大于最大宽度
grid布局基本概念 grid容器的水平区域成为行(row),垂直区域成为列(column),行与列之间的较差与是单元格(cell),划分网格的线成为网格线(gird line),了解了这些基本概念之后...,就可以开始用相应的css属性设置grid容器中的项目了。...20像素,将列(column)之间的间距设置为30像素。...,设置justify-items后,单元格内的元素会适应自身内容的宽度,设置align-items后,单元格内的元素会使用内容的高度。...将justify-items和align-items两个属性设置为center,可以将单元格内的内容垂直水平居中显示。
中显示的内容的连接 frameborder属性:取值为0(不显示边框)和1(显示边框) scrolling属性:取值为yes(可以滚动)no(不可以滚动)auto(自动) width属性:宽度 height...水平对齐方式 常用left center right;都可以设置 valign:垂直对齐方式 常用 top middle bottom;valign可以设置tr td cellspacing:外边距,单元格与单元格之间的距离...,只能给table设置默认是2px cellpadding:内边距,单元格内容与单元格之间的距离,只能给table设置默认是1px bgcolor:背景颜色 <table border="15px" width...,独自使用没有任何效果,主要用于网页中区域的划分,会单独占据一行 适用于大量信息的展示 适用于少量信息的展示 我是div111111111111 我是div222222222222 <!
(2 ) div常用于页面中较大块的结构划分,然后配合CSS来操作;span 一般用来包含文字等, 它没有结构的意义,纯粹是应用样式。当其他行内元素都不适合的时候,可以用span来配合CSS 操作。...其实,除了 div和span外,还有一个label标签。div和span是无语义标签,但label 是有语义标签。label 只适用于表单中,用于显示在输入控件旁边的说明性文字。 <!...alt属性用于图片描述,这个描述文字是给捜索引擎看的。并且当图片无法显示时,页面 会显示alt中的文字。 title属性也用于图片描述,不过这个描述文字是给用户看的。...并且当鼠标指针移到图片 上时,会显示title中的内容。...表2-1 表格标签 标 签 说 明 table 表格 caption 标题 thead 表头(语义划分) tbody 表身(语义划分) tfoot 表尾(语义划分) tr 行 th 表头单元格
(2 ) div常用于页面中较大块的结构划分,然后配合CSS来操作;span 一般用来包含文字等, 它没有结构的意义,纯粹是应用样式。当其他行内元素都不适合的时候,可以用span来配合CSS 操作。...其实,除了 div和span外,还有一个label标签。div和span是无语义标签,但label 是有语义标签。label 只适用于表单中,用于显示在输入控件旁边的说明性文字。 <!...alt属性用于图片描述,这个描述文字是给捜索引擎看的。并且当图片无法显示时,页面 会显示alt中的文字。 title属性也用于图片描述,不过这个描述文字是给用户看的。...并且当鼠标指针移到图片 上时,会显示title中的内容。...表身(语义划分) tfoot 表尾(语义划分) tr 行 th 表头单元格 td 表格单元格 举例: <!
如想在我的文章中引用李白《关山月》中的诗句,因为引用文本比较长,所以使用。...---- 初识div 认识div在排版中的作用 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个标签中,这个标签的作用就相当于一个容器。...如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用标签作为容器。 ? 给div命名,使逻辑更加清晰 在上一小节中,我们把一些标签放进里,划分出一个独立的逻辑部分。...为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。...…:表格的头部的一个单元格,表格表头。 表格中列的个数,取决于一行中数据单元格的个数。 上述代码在浏览器中显示的默认的样式为: ?
大家好,又见面了,我是你们的朋友全栈君。...Grid 布局则是将容器划分成”行”和”列”,产生单元格,然后指定”项目所在”的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。... 1 2 3 上面代码中,最外层的元素就是容器...比如,3行3列会产生9个单元格。 2.4 网格线 划分网格的线,称为”网格线”(grid line)。水平网格线划分出行,垂直网格线划分出列。...grid-template-columns: 100px auto 100px; 上面代码中,第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width,且这个值大于最大宽度
,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置...但是你又不喜欢用table来实现他,那怎么办呢?...这里我制作了一个模型。...table显示,也就是将他作为一个表格 2.border-collapse:separate;边框独立,就像表格没有合并单元格以前 3.display:table-row;将.row作为表格行tr显示...4.display:table-cell;将.row的下级div作为表格单元格td显示 5.然后定义宽度 这里还使用了 border-spacing:10px;来区别几个盒子,正如上面所陈述的,IE
领取专属 10元无门槛券
手把手带您无忧上云