7.从0开始品牌的查询 商品分类完成以后，自然轮到了品牌功能了。 先看看我们要实现的效果： ? 接下来，我们从0开始，实现下从前端到后端的完整开发。...我们去Vuetify查看有关table的文档： ?...卡片v-card包含四个基本组件： v-card-media：一般放图片或视频 v-card-title：卡片的标题，一般位于卡片顶部 v-card-text：卡片的文本（主体内容），一般位于卡片正中...v-card-action：卡片的按钮，一般位于卡片底部 我们可以把新增的按钮放到v-card-title位置，把table放到下面，这样就成一个上下关系。...虽然点击分页，不会发起请求，但是通过浏览器工具查看，会发现pagination对象的属性一直在变化： ?
导航抽屉 导航抽屉是一个视图，可以从应用程序的侧面滑出，以便向用户显示选项列表。...至少，该工具栏包含该部分或应用程序的标题，但是工具栏设计模式还有助于将操作按钮直接放置在工具栏或溢出菜单中，以允许用户在应用程序的该部分中执行任务。...浮动动作按钮 浮动操作按钮模式使开发人员可以突出显示用户在应用程序的一部分中可以执行的单个操作。...此类操作的示例包括电子邮件客户端中的撰写浮动操作按钮，音乐应用程序中的播放/暂停按钮或管理事件或数据的应用程序中的添加按钮。...请勿将这种模式用于次要动作或任何具有破坏性的操作，因为浮动动作按钮旨在在使用时在屏幕上有很强的显示感。 3.
标准按钮 平面按钮Flat buttons 平面按钮是只有文本的按钮 可用在dialogs， toolbars和inline 不会有抬起的效果，但是点击时会填充颜色 浮动按钮 Raised buttons...卡片 按钮最好放在卡的左侧以增加其可见度。 但是，由于卡片具有灵活的布局，因此可以将按钮放置在适合内容和上下文的位置，同时保持产品内的一致性。...---- 扁平按钮(Flat button) 用法 平面按钮印在材料上。 不会浮起，但点击时会填充颜色。...一般的下拉按钮 溢出下拉菜单按钮 这种类型的下拉菜单默认显示箭头或者菜单按钮。点击按钮后会弹出菜单。点击菜单中的任意一个选项将会引导到对应的设置页面。...图标切换 图标适用于切换按钮，允许选择或取消选择单个选项，例如向项目添加或移除星标。 他们最好位于应用栏，工具栏，动作按钮或切换。 图标切换可能会在其触摸目标范围外显示有界或无界的墨水扩散反应波纹。
例如，将主要内容放置在卡的顶部，或使用排版来强调最重要的内容。 图像可以强化卡片中的其他内容。 但是，它们在卡内的大小和位置取决于图像是主要内容还是用于补充卡片上的其他内容。...集合中的第一个项目位于左上角 顺序从左到右，从上到下进行 ? 从左到右，从上到下 滚动 卡片集合只能垂直滚动。 超过最大卡片高度的卡片内容会被省略，内部不会滚动，但可以扩展卡片。...补充操作 使用图标，文本和UI控件（通常放置在卡的底部）明确调出卡内的补充操作。 除了溢出菜单之外，补充操作限制为两个操作。 ? ?...例如，可以选择日期的滑块，评分内容的星星，或选择日期范围的分段按钮。 ? ? ? 溢出菜单（可选） 溢出菜单通常放置在卡的右上角。但当能改善内容布局和易读性时，则可以将其放置在右下角。...注意不要让溢出菜单负荷的操作太多。 ? 其他操作 强烈建议不要在文本内容中使用内联链接。 虽然卡片可以支持多种动作，UI控件和溢出菜单，但请使用限制，并记住卡片是进入更复杂和详细信息的入口点。 ?
注意：clear属性只会对自身起作用，而不会影响其他元素。...: ""; display: block; clear: both; } overflow溢出属性 值 描述 visible 默认值。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 示例代码： <!...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。... 返回顶部按钮样式示例 顶部导航菜单示例 <!
允许 5.4 解决父级边框塌陷的方法 5.4.1 添加空div,并清除两边浮动 5.4.2 设置父元素的高度(灵活性差) 5.4.3 添加overflow属性(溢出处理) 属性值 说明 visible...，相对定位，相对于盒子浮动后的位置，进行定位，盒子原始位置不会保留； 6.2 absolute 绝对定位 absolute属性值：偏移设置： left、right、top、bottom； 绝对定位的规律...1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移 ； 2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位 ； 3.绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响...； 4.元素位置发生偏移后，它原来的位置不会被保留下来； 5.一般定位都是相对定位和绝对定位配合使用，父级元素先相对定位，子元素再绝对定位； 使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景...，当过了设置的时间值后才会被触发 ； 负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 ； 0：默认值，元素过渡效果立即执行； 7.3 过度的触发机制 1.伪类触发 ：hover 鼠标悬停和划过时的显示效果
，从视觉上达到相互分开的目的。...三、清除 clear属性规定标签的那一侧不允许其他浮动标签 ? 注意：clear属性只会对自身起作用，不会影响其他标签。...--不会有其他的标签填补。...绝对定位：（absolute） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 <!
在块盒里面，行盒从块盒一边排版到另一边。 当有浮动时, 行盒从左浮动的最右边排版到右浮动的最左边。...- 浮动(Floats) 在浮动模型中，盒首先根据常规流布局，然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。...- 绝对定位(Absolute positioning) 在绝对定位模型中，盒完全从常规流中脱离（对后面的同胞元素无影响）并根据包含块来分配位置。...即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算。...这些盒子垂直方向的起点从包含块盒子的顶部开始。 摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。
“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话。... 另一个案例是用以实现下拉菜单，下拉菜单通常由触发按钮和下拉列表组成，下拉列表的位置位于触发按钮的下方。...同样，由于触发按钮的高度是可能变化的，那么下拉列表与触发按钮顶端的绝对距离是不固定的，使用单位px是无法达到自适应的，通常的技巧是设置top:100%，其实利用我们上面提到的技巧，对top和bottom...9.6 Absolute positioning 从常规流中完全抽离，对其后继兄弟元素无影响。 固定定位是绝对定位的特例，它的包含块是viewport。...精确地讲，一个元素的静态top值，是指包含块顶部边沿与该元素的假想框的顶部margin边沿之间的距离。
“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话。...(当然，通过嵌套的方式也可实现，但不是最优解) 另一个案例是用以实现下拉菜单，下拉菜单通常由触发按钮和下拉列表组成，下拉列表的位置位于触发按钮的下方。...同样，由于触发按钮的高度是可能变化的，那么下拉列表与触发按钮顶端的绝对距离是不固定的，使用单位px是无法达到自适应的，通常的技巧是设置top:100%，其实利用我们上面提到的技巧，对top和bottom...9.6 Absolute positioning 从常规流中完全抽离，对其后继兄弟元素无影响。 固定定位是绝对定位的特例，它的包含块是viewport。...精确地讲，一个元素的静态top值，是指包含块顶部边沿与该元素的假想框的顶部margin边沿之间的距离。
元素中部与父元素中部对齐,bottom,text-top将元素的顶部与其父元素的顶部对齐,baseline,text-bottom。...此外，不要注意当需要去除浮动的影响时，可以使用clear属性，包括left,right,both,none和inherit，指定clear:left确保左边不允许出现其他的浮动元素。...内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。...通常可以通过float，clear,overflow在控制文本流，overflow用于当元素太小时，控制文本的溢出，当元素的长宽设置过小时，可以通过设置visible自动扩大元素，hidden允许溢出的文本隐藏...可以保证列表项前不会上放置任何图标。
而这个标准的文档流布局方式就是按照解析 HTML 文档元素的顺序，从页面顶部开始，从上到下，从左到右，解析一个元素就绘制一个元素，解析时碰到的是行内元素，就忽略宽高，允许并排布局绘制，碰到的是块级元素，...应用场景： 微调 让后代元素可以使用绝对定位 通常都是用来给后代使用绝对定位的，因为固定定位和绝对定位都会导致该元素从文档流中脱离，就像浮动元素那样，不再占用文档流的坑位。...因为绝对定位是将元素脱离出标准文档流，那么绝对定位的元素显示与否，并不会影响到原本的文档流元素，所以，通常一些弹窗框，弹窗控制面板，可在页面上任意拖放的元素等都会通过绝对定位来做。...应用： 网页右下角的返回顶部按钮 顶部导航栏 z-index 这个属性只有当使用了 position 的元素才会生效，其他元素设置了这个属性没有什么意义。...总结一下，这个属性有几个特性： 属性值大的位于上层，属性值小的位于下层 z-index 值没有单位，就是一个正整数。
1.2 HTML、CSS与JS三者的关系 HTML：页面结构，负责从语义的角度搭建页面结构。 CSS：页面样式表现，负责从审美的角度美化页面。 ...标准流实际上就是一个网页内标签元素正常排列的顺序的意思，比如块级元素会独占一行，行内元素会按照顺序依次从左向右，从上向下排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局，也称为流式布局...如果上一个元素有浮动，则A元素顶部和上一个元素的顶部对齐； 如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。...6.3 内容溢出处理 （1）父容器高度塌陷 如果一个标准流中的合资所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器的整个高度会塌陷。 ? ...比如网页中常见的回到顶部按钮，就是一个典型固定定位案例： ? <!
1.2 HTML、CSS与JS三者的关系 HTML：页面结构，负责从语义的角度搭建页面结构。 CSS：页面样式表现，负责从审美的角度美化页面。 ...标准流实际上就是一个网页内标签元素正常排列的顺序的意思，比如块级元素会独占一行，行内元素会按照顺序依次从左向右，从上向下排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局，也称为流式布局...如果上一个元素有浮动，则A元素顶部和上一个元素的顶部对齐； 如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。...6.3 内容溢出处理 （1）父容器高度塌陷 如果一个标准流中的合资所有的子元素都进行了浮动，而且盒子没有设置高度，那么父容器的整个高度会塌陷。 ...比如网页中常见的回到顶部按钮，就是一个典型固定定位案例： <!
display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。...允许浮动元素出现在两侧 inherit 规定应该从父元素继承clear属性的值 注意：clear属性只会对自身起作用，而不会影响其他元素。...4.5 父标签塌陷问题 .clearfix:after { content: ""; display: block; clear: both; } 5、overflow溢出属性 值 描述 visible...6.3 absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有以定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...在理论上，被设置为 fixed 的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 示例代码： <!
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 ...注意：clear属性只会对自身起作用，而不会影响其他元素。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 示例代码： <!...综合示例 顶部导航菜单 <!
clip：剪辑溢出的文本；fade：将溢出的文本淡化为透明；ellipsis：用省略号表示溢出；visible：在容器之外显示溢出的文本 textScaleFactor double 每个逻辑像素的字体像素值...需使用Text.rich构造方法创建 Image 构造方法 Image : 从ImageProvider中获取图片 Image.asset ：加载资源目录中的图片 Image.network：加载网络图片...输入框的装饰器，用于修改外观 keyboardType TextInputType 设置输入类型，不同的输入类型键盘会不一样 textInputAction TextInputAction 用于设置键盘动作...为空则不会显示 helperStyle TextStyle 设置helperText的样式 hintText String 提示文本，位于输入框内部 hintStyle TextStyle hintText...errorText String 错误文本信息提示 errorStyle TextStyle errorText的样式 hasFloatingPlaceholder bool labelText是否浮动
DOCTYPE html>必须位于HTML文档第一行。 7....一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。...3.层级提高，可以遮盖标准文档流元素和浮动元素。 b.使用场景： 相对定位可以不设偏移量，让后面的绝对定位以它为祖先元素作基准定位。...b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。 52.z-index属性：设置定位元素的堆叠顺序。默认值0，值大的层位于值小层的上方。...层模型有三种形式： (1)绝对定位(position: absolute) 将元素从文档流中拖出来，然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 ...来吧，大家试试把，然后我们再继续学习~~ overflow溢出属性 （先看下面的例子） 值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。...： 然后我们就可以设置一下，如果文字溢出了，溢出的部分怎么办，设置一个overflow为hidden： 再看效果，溢出的文字就不显示了。 ...可以将元素设置成relative，不设置任何的top、left、right、bottom等，它还是它原来的位置 absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，也会有父级标签塌陷的问题...综合示例 顶部导航菜单 <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
