）底部 nav：导航 （包含链接的的一个列表） article：用来在页面中表示一套结构完整且独立的内容部分 可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等...、词汇列表等 2，在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。...h1-h6 标题 ul 无序列表 ol 有序列表 li ul或者ol的列表项 dl 定义列表 dt 定义列表的项目 dd 对dt展开的描述扩展 p 段落 time 时间 em 强调一个词或者一段话...（问题） 5、IE6、IE7不支持块属性标签的inline-block(问题） 块级元素（block element）： 每个块级元素默认单独占一行高度，块级元素一般可嵌套块级元素或行内元素； 块级元素一般作为容器出现...行内元素转行内块级元素设置display:inline-block; 对行内元素，需要注意如下 设置宽度width 无效。 设置高度height 无效，可以通过line-height来设置。
其中dt为粗体字。 内联代码样式 块级代码样式 内联样式，黑色圆角边框，白字样式。...将所有列表项放置同一行 .pre-scrollable 使 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 【文字颜色样式】 .text-muted 柔和的文本...，不可点击状态 【面包屑导航】类似当前位置导航，它会自动在每项后面加上 / .breadcrumb 容器类 .breadcrumb-item 链接类 .active 当前项 【列表: ul/ol/...dl】列表默认样式为垂直样式，一个项目占据一行。....list-group 定义列表容器类 .list-group-item 定义列表项目类 .active [列表项目]激活状态下的列表项，蓝色背景，白色字 .disabled [列表项目]禁用状态下的列表项
[在这里插入图片描述] 将图片设置为刚才的素材 [在这里插入图片描述] 在图片的下边增加个普通容器来放置我们的科目导航图标 [在这里插入图片描述] 给容器设置如下样式 height: 160px;...margin: 1.5rem 0.5rem 0px 让容器有一定的外边距并且设置容器的高度 接着在容器里增加一个网格布局 [在这里插入图片描述] 我们希望每一个插槽里的结构是上下结构，上边是图标，下边是文字...高度和宽度都可以设置为100%充满容器 [在这里插入图片描述] 内层的容器我们先让它水平居中 [在这里插入图片描述] 宽高都设置成120 [在这里插入图片描述] 给它一个白色的背景色 [在这里插入图片描述...] 边框设置成100就变成了圆形 [在这里插入图片描述] 最后加个阴影显得立体一点 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); 图片呢我们先设置为内联块布局...，同样的底部也增加一个导航栏，直接粘贴我们上一节制作的即可，不过选中值要设置成我们科目导航页的ID [在这里插入图片描述] 这样我们的页面就搭建好了，当然了还需要点击图标能跳转到教师列表页，事件和页面传参我们放到下一节讲解
在垂直方向上，默认是基线对齐（以元素内文字的基线为基准对齐），不过也可以通过 vertical-align 属性来改变对齐方式，如设置为 top（顶部对齐）、middle（中部对齐）、bottom（底部对齐...内联块元素的排列处理：当内联块元素（display 属性值为 inline-block 的元素）参与到内联布局中时，也遵循 IFC 的规则，比如多个内联块元素组成的导航栏，它们在水平方向排列以及垂直对齐方面都受...容器属性：六个属性分别为： flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content项目属性：六个属性分别为...例如，将导航栏的菜单项设置为弹性元素，在屏幕变窄时可以自动换行或者等比例缩放宽度，保证导航功能的同时提升页面美观度和可用性。...页面整体布局：对于复杂的网页页面，如电商网站的商品展示页面、新闻资讯网站的文章列表页等，使用 GFC 可以清晰地划分不同的板块区域，像头部导航、侧边栏、主体内容区、底部版权信息区等，将它们按照网格结构进行布局
您可以设计您的侧边栏以显示可滚动的导航项目列表。...在本节中，我们将按照以下步骤创建一个可滚动的侧边栏导航：a）创建带有导航项目的导航栏b）将导航栏样式设置为侧边栏c）将侧边栏位置设置为固定d）使用滚动条管理项目的溢出a)....body的高度以使其足够长以滚动以下CSS代码片段描述了如何将初始导航栏样式设置为侧边栏并调整body的底部边距。...从截图中可以看出，侧边栏的底部看起来不像设置在底部。这是因为内容比其容器的高度长。在下一节中，我们将学习如何防止导航项目列表显示在侧边栏之外。d)....将overflow-y属性设置为scroll会为超出其高度的内容创建一个可滚动的容器。超出侧边栏范围的项目将被隐藏。右侧会出现一个滚动条，允许您的网站用户查看所有内容。
，是大部分块元素的默认display属性值 b)inline 将元素转换为内联元素，是内联元素的默认display属性值 c)inline-block 将元素转换为内联块状元素，是内联块状元素的默认display...input{outline:none;} 3.在IE6不能识别较小高度的容器（一般为10px） 解决方案： a）给容器添加overflow:hidden; b）给容器添加font-size:0; (如果容器高度为...flex项目没有设置高度或者为auto，将占满整个父元素的高度 ———————————————– ★ 如何使用flex布局实现不定宽高的元素在屏幕窗口水平垂直都居中，方法如下： html,body{height...项目没有设置高度或者高度为auto，将占满整个父元素的高度 ◆ Flex项目属性 1.改变flex项目排列顺序 语法：order:0|数值; 注：默认值为0,值越小越靠前 2.设置某个flex项目不同于其他...flex-shrink默认值为1,当flex容器剩余空间不足时，flex项目等比例缩小 注：flex-shrink:0; 即使flex容器空间不足，flex项目也不缩小 5.设置flex项目占据主轴的空间
二.HTML文档结构 三.元素 1.按单/双标记划分 2.按块状/行内元素划分 3.块状元素和行内元素的互相转换 四.重点 1.图像链接 2.导航菜单 ①列表 ②超链接 3.表单 4.表格 ---...定义计算机代码文本 ol,li 定义有序列表 em 定义为强调的内容 p 定义段落 img 定义图片 form 定义表单 input 输入框 hr 定义水平线 label 为input元素定义标记 pre...2、float 当把行内元素设置为float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了中间莫名的空白。...行内元素和块级元素的区别，各自的特点： 1、块状元素，总是在新行上开始，默认宽度是它容器的100%，也可以设定宽度和高度，内联元素，和其他元素在一行，设置宽度和高度不起作用。...下面实例： ---- 2.导航菜单 ①列表 有序列表
：对齐，大小，高度，宽度，颜色，布局，圆角 ---- 3.交互思想如何让用户称为数据的主人（how to be lord） 中加 添加js实现交互，将数据传递给用户，用户又将操作的信息传递给网站...As 将当前页面另存为 Reopen Project 近几次打开的项目列表 Close Project 点击后回到欢迎页面上 Rename Project 它修改的不是当前项目的文件夹名，而是文件夹目录下...块级元素可以设置margin和padding和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用 块级元素默认的display为block，行内元素的display为inline...…） a 表示列表项目用小写字母标号（a,b,c…） A 表示列表项目用大写字母标号（A,B,C…） i 表示列表项目用小写罗马数字标号（i,ii,iii…） I 表示列表项目用大写罗马数字标号（I,II...iframe作为一个普通元素放在body里 属性 width 可设置内联框架的宽 height 可设置内联框架的高 name 设置框架名称 src 设置页面的路径 scrolling规定是否在 iframe
CSS特性设置为统一效果 的CSS库 4.居中容器：.container B.基础排版 1.样式.h1-6没有有margin，h1有，h1 .small显示稍小一点的字体，灰色 2....：去点列表.list-unstyled；内联列表.list-inline；水平定义列表.dl-horizontal C.代码 1.code单选内联代码，kbd用户输入代码，pre多行代码块 2.pre元素上应用....pre-scrollable可以控制最大高度为340px，并滚动 D.表格 1.基础样式：.table 2.隔行加背景色样式：.table-striped 3.带边框的单元格：.table-bordered...2.用法： 设置滚动容器，即在所要侦测的元素上设置data-target="@selector" data-spy="scroll"属性 设置菜单链接容器，设置id或样式怀data-target一致...({target:'#某单容器的选择器'}); E.选项卡 1.满足要求： 选项卡导航和选项卡面板要同时有 导航链接里要设置data-toggle="tab"，并且还要设置data-target="选择符
刚开始可能不那么明显，但是实现本应用程序的最大挑战是编页，即在字体设置的基础上为整本书的内容分页。当然，我们可以将整本书的内容放置在具有滚动条页面中，但这并不能够带来好的用户体验。...List picker支持两种不同的列表展示方式：内联模式和全模式。如图25.3所示，内联模式中，该控件通过流畅的动画来对记录进行展开和合拢。...Book Reader的font picker保持10种字体的内联模式，所以其属性值设置为10. ...避免将内联模式的list picker放置于scroll viewer的底部！ List picker在这种情况下不适合使用。...为了达到最好的性能，内联模式list picker下的元素应该将CacheMode设置为BitmapCache，那是因为list picker的下拉和收缩能够改变这些元素的位置。
每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。...p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表 块级元素的特点： 块级元素会独占一行 高度，行高，外边距和内边距都可以单独设置 宽度默认是容器的100% 可以容纳内联元素和其他的块级元素...行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。...small - 小字体文本span - 常用内联容器，定义文本内区块strike - 中划线strong - 粗体强调sub - 下标sup - 上标textarea - 多行文本输入框tt - 电传文本...u - 下划线var - 定义变量 html,body标签也属于块级元素 行内元素的特点： 和相邻的行内元素在一行上 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
2.2 布局 布局是页面排版的关键组件，我们以线性布局组件为例，支持如下3种布局模式： 内联布局：将当前元素修改为内联布局模式，各个内联布局模式的元素将默认排布在同一行中，若空间不足以排布下一个内联布局元素...是否控制权限：可根据角色设置权限，对无权限的角色的用户隐藏该组件，设置权限前，必须先设置组件名称。 显示条件：可通过表达式设置组件显示的条件，当条件为True时显示，为False时隐藏该组件。...该类事件为每个组件特有，组件特有的属性在每个组件的说明文档中详细阐述。 事件：页面事件，页面实例从开始创建到展示完成有一个完整的过程，这个过程包括开始创建、初始化数据、挂载节点、更新渲染、销毁等。...**下拉菜单：**提供弹出式的下拉菜单项可供选择，通常用于应用导航，通过下拉菜单项可快速浏览应用。 3.2 容器 子页面容器： 每个页面生成的时候均会自带一个子页面容器，用于展示子页面内容。...具体常见场景说明请参见如何通过筛选条件查询并显示数据和如何设置数据表格的排序规则。 组件列表： 当在组件列表中拖入其他组件时，可以根据组件列表绑定的数据源动态展示其他组件的数量和内容。
, 50 x 40 像素 ; 按钮颜色值 #00a4ff ; 2、按钮切图 使用 切片工具 , 将 按钮图片 进行选择 , 然后进行切图 ; 选择 " 菜单栏 / 文件 / 导出 / 存储为 Web...{ /* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度 40 像素 但是为了与父容器匹配 这里拉伸到...左浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列 */ float:...left; } /* 设置无序列表中的链接样式 */ .nav ul li a { /* 显示模式 块级元素 */ display: block; /* 高度 40 像素 , 总高度 42 像素...50 像素 */ width: 50px; /* 按钮高度 40 像素 但是为了与父容器匹配 这里拉伸到 42 像素 */ height: 42px; /* 使用图片背景方式设置按钮图片 */
不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block。...正常的布局流是将元素放置在浏览器视口内的系统。 默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。...结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且 元素也被包含在这个容器里面。...默认情况下，定位元素都具有 z-index 属性为 auto 实际值为 0。...这意味着开发者可以创建固定的有用的 UI 项目，如持久导航菜单。
链接登录的颜色为红色。 主导航栏里的列表中的文字颜色为深灰色。 收藏本站要求字体加粗。 我们网页的标签非常多，在不同地方会用到不同类型的选择器，以便更好的完成我们的网页。 高度、宽度、行高、外边距以及内边距都可以控制。 （3）宽度默认是容器的100%。 （4）可以容纳内联元素和其他块元素。...默认宽度 包含 块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签 行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素...我们平时用的cover 最多 c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。...可以按顺序设置如下属性： list-style-type list-style-position list-style-image 例如:把图像设置为列表中的列表项目标记： ul { list-style
一、元素分类 特性展示 在此前的课程中，我们还有一些遗留问题没有解决，例如： 有些元素不管宽度多少，都是独立占一行显示，有些元素则可以共同占用一行显示; 有些元素可以设置宽度和高度，有些元素不能设置宽度和高度...行内块元素（内联块元素）：可以设置宽高，可以设置外边距，不独立成行。 行内元素（内联元素）：不可以设置宽高，不可以设置上下外边距，不独立成行。 元素归类 在我们常用的标签中，按元素的分类，如下所示。...块元素：h、div、ul、li、p、form; 行内块元素（内联块元素）：img、input; 行内元素（内联元素）：a、span; 元素类型转换 通过display属性，可以将元素的类型转换成其他类型...通过float属性也可以将一个行内元素或者款元素设置为右对齐，例如融职教育首页的查看更多按钮，示例代码如下所示： 1 教学文档 查看更多的练习还是工作，都建议大家用伪元素来清除浮动。 四、课后练习 用列表元素实现一个横向的导航栏。 实现一个圣杯布局效果。 实现融职教育首页文档列表效果，列表包括图片，标题，还有按钮。
本篇和大家一起巩固html中的块元素和内联元素以及DIV容器。 块元素 块元素的特点是啥？块级元素在浏览器显示时，通常会以新行来开始（和结束），块级元素只能出现在body元素内。...> 标题级别 1-6 定义文档的页眉（介绍信息） 水平分割线 定义列表项目，标签可用在有序列表 () 和无序列表 () 中 标签规定文档的主要内容... 定义导航链接的部分 用来定义在脚本未被执行时的替代内容（文本） 有序列表 行 预格式化文本 一个页面区段 的内容块设置样式属性。 div容器还有啥用途？ 布局！对！...HTML中的span元素是典型的内联元素， 主要用途就是用来作文本的容器，也没其它特定的含义了。它还可以和CSS一同使用，所以span元素可以为部分文本设置样式属性呢。
一对标签 （tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。...元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。 元素也可以有属性（Attribute）： ?...块状元素都可以定义自己的宽度和高度。 块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。 我们可以把这种容器比喻为一个盒子。...； 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状； 内联元素也会遵循盒模型基本规则，如可以定义padding...Block: 块级元素，可以设置宽高，独占一行。 Inline: 内联元素， inline-block：既能设置宽高 有能一行显示。 空元素 不包含任何内容的元素称为空元素。
h6 | 定义标题 | b | 字体加粗 | | ui,li | 定义无序列表 | code | 定义计算机代码文本 | | ol,li| 定义有序列表 | em | 定义为强调的内容 | | p |...2、float 当把行内元素设置为float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了中间莫名的空白。...3、当为行内元素进行定位时，absolute(绝对定位)与fixed(固定定位)都会使原先的行内元素变成块级元素。...行内元素和块级元素的区别，各自的特点： 1、块状元素，总是在新行上开始，默认宽度是它容器的100%，也可以设定宽度和高度，内联元素，和其他元素在一行，设置宽度和高度不起作用。...下面实例： --- 2.导航菜单 ①列表 有序列表
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
