amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css（布局相关3）--辅助类Utility
一、总结
1、元素清除浮动： 添加 am-cf 这个 class 即可
2、水平滚动： .am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。 <div class="am-scrollable-horizontal">
3、垂直滚动： .am-scrollable-vertical
4、浮动相关： .am-cf - 清除浮动
.am-fl- 左浮动.am-fr- 右浮动.am-center- 水平居中
5、垂直对齐：vertical-align
| Class | 描述 |
|---|---|
.am-vertical-align
|
将这个 class 添加到父容器，父容器需要指定高度。 |
.am-vertical-align-middle
|
需要垂直居中的元素 |
.am-vertical-align-bottom
|
添加到需要底部对齐的元素 |
1 <div class="am-vertical-align" style="height: 150px;"> 2 <div class="am-vertical-align-middle"> 3 飘在半空中的 XX 4 </div> 5 </div>
6、显示属性：
.am-block-display设置为block.am-inline-display设置为inline.am-inline-block-display设置为inline-block
7、隐藏属性：添加 .am-hide class。
1 .am-hide {
2 display: none !important;
3 visibility: hidden !important;
4 }
5
6 <!-- 隐藏了，Demo 里看不到按钮 -->
7 <button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>8、尺寸：不加尺寸为默认大小（16px），{size} 可以为 0, xs, sm, lg, xl 中之一。
xs- 5pxsm- 10px- default - 16px
lg- 24pxxl- 32px
9、文本颜色：默认黑色
<p>...</p>
<p class="am-text-primary">...</p> <p class="am-text-secondary">...</p> <p class="am-text-success">...</p> <p class="am-text-warning">...</p> <p class="am-text-danger">...</p>10、链接颜色变灰：超链接颜色默认为主色（蓝色），添加 .am-link-muted class 将链接颜色设置为灰色。 <a href="" class="am-link-muted">...</a>
11、文字大小：
.am-text-xs- 12px.am-text-sm- 14px.am-text-default- 16px.am-text-lg- 18px.am-text-xl- 24px.am-text-xxl- 32px.am-text-xxxl- 42px
12、文本左右对齐
| 左对齐 | 右对齐 | 居中 | 自适应 |
|---|---|---|---|
.am-text-left
|
.am-text-right
|
.am-text-center
|
.am-text-justify
|
.am-sm-text-left
|
.am-sm-text-right
|
.am-sm-text-center
|
.am-sm-text-justify
|
.am-sm-only-text-left
|
.am-sm-only-text-right
|
.am-sm-only-text-center
|
.am-sm-only-text-justify
|
.am-md-text-left
|
.am-md-text-right
|
.am-md-text-center
|
.am-md-text-justify
|
.am-md-only-text-left
|
.am-md-only-text-right
|
.am-md-only-text-center
|
.am-md-only-text-justify
|
.am-lg-text-left
|
.am-lg-text-right
|
.am-lg-text-center
|
.am-lg-text-justify
|
13、文本垂直对齐
.am-text-top- 顶对齐.am-text-middle- 居中对齐.am-text-bottom- 底对齐
14、文字换行及截断（这个好诶）：truncate
| Class | 描述 |
|---|---|
.am-text-truncate
|
禁止换行，超出容器部分截断（以 ... 结束）
|
.am-text-break
|
超出文字容器宽度时强制换行，主要用于英文排版 |
.am-text-nowrap
|
禁止换行，不截断超出容器宽度部分 |
<!-- 超出 200px 的文字将会被截断 --> <div class="am-text-truncate" style="width: 250px; padding: 10px;">千万不要因为走得太久，而忘记了我们为什么出发</div>
15、图片替换：使用 .am-text-ir class 结合背景图片实现图片替换。
可以自己写class啊
1 <header class="doc-ir-demo">
2 <h1><a href="/" class="am-text-ir">Amaze UI</a></h1>
3 </header>
4
5
6 .doc-ir-demo {
7 background: #3bb4f2;
8 }
9
10 .doc-ir-demo h1 {
11 margin: 0;
12 padding: 10px;
13 }
14
15 .doc-ir-demo a {
16 display: block;
17 height: 29px;
18 width: 125px;
19 background: url(/i/landing/logo.png) no-repeat left center;
20 -webkit-background-size: 125px 24px;
21 background-size: 125px 24px;
22 }16、图文混排辅助：
使用 float 实现的类似 HTML align 属性的效果，父容器要清除浮动。与 .am-fl、.am-fr 相比，浮动的元素加了 margin。
.am-align-left.am-align-right
1 <div class="am-cf"> 2 <p class="am-align-left"> 3 <img src="..." alt=""/> 4 </p> 5 ... 6 <p class="am-align-right"> 7 <img src="..." alt=""/> 8 </p> 9 ... 10 </div>
17、响应式辅助
.am-[show|hide]-[sm|md|lg][-up|-down|-only]，调整浏览器窗口大小查看元素的显隐。
class 释义：
show显示，hide隐藏，这应该不难理解；sm、md、lg是划分屏幕大小区间的缩写，对应 small、medium、large，网格里面做了说明；down指小于区间，up指大于区间，only指仅在这个区间。
按照上面的翻译一下下面的 class:
.am-show-sm-only: 只在sm区间显示.am-show-sm-up: 大于sm区间时显示.am-show-sm: 在sm区间显示，如果没有设置md、lg区间的显隐，则元素在所有区间都显示.am-show-md-down: 小于md区间时显示
18、屏幕方向：
- 横屏：
.am-show-landscape,.am-hide-landscape - 竖屏：
.am-show-portrait,.am-hide-portrait
二、辅助类Utility
目录
- 布局相关
- 容器
- 浮动相关
- 垂直对齐
- 元素显示
- 内外边距
- 文本工具
- 字体
- 文本颜色
- 链接颜色减淡
- 文字大小
- 文本左右对齐
- 文本垂直对齐
- 文字换行及截断
- 图片替换
- 图文混排辅助
- 响应式辅助
- 视口大小
- 屏幕方向
一些常用样式的 class，与 LESS minxins 的区别在于：mixins 在样式中调用，而 utility 直接在 HTML 中引用。比如要对一个元素清除浮动，在元素上添加 am-cf 这个 class 即可。
布局相关
容器
基本容器
.am-container，盒模型为 border-box，水平居中对齐，清除浮动。
.am-container 放到了网格里面。
水平滚动
.am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。
| -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- | -= 表格标题 =- |
|---|---|---|---|---|---|---|---|
| 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
| 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
| 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 | 表格数据 |
<div class="am-scrollable-horizontal"><table class="am-table am-table-bordered am-table-striped am-text-nowrap"> ... </table> </div>垂直滚动
.am-scrollable-vertical 内容超过设置的高度以后显示滚动条，默认设置的高度为 240px。
《你不懂我，我不怪你》
作者：莫言
每个人都有一个死角， 自己走不出来，别人也闯不进去。
我把最深沉的秘密放在那里。
你不懂我，我不怪你。
每个人都有一道伤口， 或深或浅，盖上布，以为不存在。
我把最殷红的鲜血涂在那里。
你不懂我，我不怪你。
每个人都有一场爱恋， 用心、用情、用力，感动也感伤。
我把最炙热的心情 藏在那里。
你不懂我，我不怪你。
每个人都有 一行眼泪， 喝下的冰冷的水，酝酿成的热泪。
我把最心酸的委屈汇在那里。
你不懂我，我不怪你。
每个人都有一段告白， 忐忑、不安，却饱含真心和勇气。
我把最抒情的语言用在那里。
你不懂我，我不怪你。
浮动相关
.am-cf- 清除浮动.am-nbfc- 使用overflow: hidden;创建新的 BFC 清除浮动（参考）
.am-cf {.clearfix();
}.am-fl- 左浮动.am-fr- 右浮动.am-center- 水平居中
.am-center {display: block;margin-left: auto;margin-right: auto;
}示例：
<div class="am-cf"><button class="am-btn am-btn-success am-fl">向左浮动</button> <button class="am-btn am-btn-success am-fr">向右浮动</button> </div>垂直对齐
垂直对齐的原理为把父容器内的 “幽灵”元素（使用伪元素）高度设置为 100%，再通过设置需要对齐的元素 vertical-align 属性实现（参考）。
| Class | 描述 |
|---|---|
.am-vertical-align
|
将这个 class 添加到父容器，父容器需要指定高度。 |
.am-vertical-align-middle
|
需要垂直居中的元素 |
.am-vertical-align-bottom
|
添加到需要底部对齐的元素 |
垂直居中对齐
<div class="am-vertical-align" style="height: 150px;"> <div class="am-vertical-align-middle"> 飘在半空中的 XX </div> </div> ``底部对齐
<div class="am-vertical-align" style="height: 150px;"> <div class="am-vertical-align-bottom"> DOWN 到了谷底...降到零下几度 C </div> </div> ``参考链接
- CSS 实现水平、垂直居中
- Centering in the Unknown
- Cube Layout.css
元素显示
显示属性
.am-block-display设置为block.am-inline-display设置为inline.am-inline-block-display设置为inline-block
隐藏元素
添加 .am-hide class。
.am-hide {display: none !important;visibility: hidden !important; }<!-- 隐藏了，Demo 里看不到按钮 -->
<button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>内外边距
尺寸
xs- 5pxsm- 10px- default - 16px
lg- 24pxxl- 32px
class 列表
不加尺寸为默认大小（16px），{size} 可以为 0, xs, sm, lg, xl 中之一。
- v2.4: 增加
0值的内外边距辅助类。
| Margin | Padding |
|---|---|
.am-margin.am-margin-{size}
|
.am-padding.am-padding-{size}
|
水平方向外边距.am-margin-horizontal.am-margin-horizontal-{size}
|
水平方向内边距.am-padding-horizontal.am-padding-horizontal-{size}
|
垂直方向外边距.am-margin-vertical.am-margin-vertical-{size}
|
垂直方向内边距.am-padding-vertical.am-padding-vertical-{size}
|
左外边距.am-margin-left.am-margin-left-{size}
|
左内边距.am-padding-left.am-padding-left-{size}
|
右外边距.am-margin-right.am-margin-right-{size}
|
右内边距.am-padding-right.am-padding-right-{size}
|
上外边距.am-margin-top.am-margin-top-{size}
|
上内边距.am-padding-top.am-padding-top-{size}
|
下外边距.am-margin-bottom.am-margin-bottom-{size}
|
下内边距.am-padding-bottom.am-padding-bottom-{size}
|
文本工具
字体
.am-sans-serif非衬线，Amaze UI 主要使用的。.am-serif衬线字体，中文为宋体，Amaze UI 中未使用。.am-kai应为衬线字体，中文为楷体，Amaze UI<blockquote>使用此。.am-monospace等宽字体，Amaze UI 源代码中使用。
下面为几种字体系列演示：
The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。
The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。
The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。
The quick brown fox jumps over the lazy dog.
千万不要因为走得太久，而忘记了我们为什么出发。
千萬不要因為走得太久，而忘記了我們為什麼出發。
<p>...</p><p class="am-serif">...</p> <p class="am-kai">...</p> <p class="am-monospace">...</p>文本颜色
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
<p>...</p>
<p class="am-text-primary">...</p> <p class="am-text-secondary">...</p> <p class="am-text-success">...</p> <p class="am-text-warning">...</p> <p class="am-text-danger">...</p>链接颜色减淡
超链接颜色默认为主色（蓝色），添加 .am-link-muted class 将链接颜色设置为灰色。
超级链接
- 超级链接
- 超级链接
<a href="" class="am-link-muted">...</a> <h3 class="am-link-muted"><a href="">...</a></h3> <ul class="am-link-muted"> <li><a href="">...</a></li> </ul> ``文字大小
.am-text-xs- 12px.am-text-sm- 14px.am-text-default- 16px.am-text-lg- 18px.am-text-xl- 24px.am-text-xxl- 32px.am-text-xxxl- 42px
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
千万不要因为走得太久，而忘记了我们为什么出发。
<p class="am-text-xs">...</p> <p class="am-text-sm">...</p> <p class="am-text-default">...</p> <p class="am-text-lg">...</p> <p class="am-text-xl">...</p> <p class="am-text-xxl">...</p> <p class="am-text-xxxl">...</p>常用字号参考：
| REMs | Pixels |
|---|---|
| 6.8rem | 68px |
| 5rem | 50px |
| 3.8rem | 38px |
| 3.2rem | 32px |
| 2.8rem | 28px |
| 2.4rem | 24px |
| 2.2rem | 22px |
| 1.8rem | 18px |
| 1.6rem (base) | 16px (base) |
| 1.4rem | 14px |
| 1.2rem | 12px |
| 1rem | 10px |
| 0.8rem | 8px |
| 0.5rem | 5px |
文本左右对齐
文字对齐辅助 class，可设置为响应式。
| 左对齐 | 右对齐 | 居中 | 自适应 |
|---|---|---|---|
.am-text-left
|
.am-text-right
|
.am-text-center
|
.am-text-justify
|
.am-sm-text-left
|
.am-sm-text-right
|
.am-sm-text-center
|
.am-sm-text-justify
|
.am-sm-only-text-left
|
.am-sm-only-text-right
|
.am-sm-only-text-center
|
.am-sm-only-text-justify
|
.am-md-text-left
|
.am-md-text-right
|
.am-md-text-center
|
.am-md-text-justify
|
.am-md-only-text-left
|
.am-md-only-text-right
|
.am-md-only-text-center
|
.am-md-only-text-justify
|
.am-lg-text-left
|
.am-lg-text-right
|
.am-lg-text-center
|
.am-lg-text-justify
|
文本垂直对齐
.am-text-top- 顶对齐.am-text-middle- 居中对齐.am-text-bottom- 底对齐
顶部对齐
居中对齐
底部对齐
文字换行及截断
| Class | 描述 |
|---|---|
.am-text-truncate
|
禁止换行，超出容器部分截断（以 ... 结束）
|
.am-text-break
|
超出文字容器宽度时强制换行，主要用于英文排版 |
.am-text-nowrap
|
禁止换行，不截断超出容器宽度部分 |
单行文字截断
.am-text-truncate，元素 display 属性需为 block 或 inline-block。
.am-text-truncate {word-wrap: normal; /* for IE */text-overflow: ellipsis;white-space: nowrap; overflow: hidden; }<!-- 超出 200px 的文字将会被截断 -->
<div class="am-text-truncate" style="width: 250px; padding: 10px;">千万不要因为走得太久，而忘记了我们为什么出发</div>参考链接：
- https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
- IE8 & 9 white-space nowrap 失效
多行文字截断
在只针对 PC 端开发的年代，可以通过后端控制输出文字的长度来实现固定行数的效果。
但在响应式页面，这可能不再适用，只能输出足够多的文字，然后通过前端截取需要的行数。
Webkit 内核的浏览器可以通过 -webkit-line-clamp 私有属性实现多行文字截取。其他浏览器没有这个属性，我的做法通常是把容器的高度限定为 行高 * 显示的行数，超出的部分隐藏，勉强达到目的。
.line-clamp {overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; // 这里修改为要显示的行数-webkit-box-orient: vertical;
}如果需要考虑其他内核的浏览器，可以使用 Amaze UI 封装的 Mixin:
line-clamp(@lines, @line-height: 1.3em) {text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @lines; // number of lines to show overflow: hidden; line-height: @line-height; max-height: @line-height * @lines; }当然，也有一些 JS 插件可以跨浏览器实现，但个人并不推荐在这种场合使用 JS。
参考链接
- -webkit-line-clamp
- Line Clampin’ - Truncating Multiple Line Text
- CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS
- Clamp.js
- TextTailor.JS
图片替换
CSS Image Replacement 是一个历史悠久的技术，也随着前端技术的发展不断进化。
图片替换技术兼顾显示效果、可访性、SEO，推荐开发者在网站 Logo 、设计特殊的栏目标题等场合使用。
使用 .am-text-ir class 结合背景图片实现图片替换。
Amaze UI
<header class="doc-ir-demo"><h1><a href="/" class="am-text-ir">Amaze UI</a></h1> </header>.doc-ir-demo {background: #3bb4f2;
}.doc-ir-demo h1 { margin: 0; padding: 10px; } .doc-ir-demo a { display: block; height: 29px; width: 125px; background: url(/i/landing/logo.png) no-repeat left center; -webkit-background-size: 125px 24px; background-size: 125px 24px; }- Update CSS image replacement technique
- CSS-Tricks | Search Results for 'image replace'
图文混排辅助
使用 float 实现的类似 HTML align 属性的效果，父容器要清除浮动。与 .am-fl、.am-fr 相比，浮动的元素加了 margin。
.am-align-left.am-align-right
那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨，看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。
“谁叫我们只带来一把小伞哪。”她微笑着说，一面撑起伞，准备过马路帮我寄信。从她伞骨渗下来的小雨点，溅在我的眼镜玻璃上。
随着一阵拔尖的煞车声，樱子的一生轻轻地飞了起来。缓缓地，飘落在湿冷的街面上，好像一只夜晚的蝴蝶。
虽然是春天，好像已是秋深了。
她只是过马路去帮我寄信。这简单的行动，却要叫我终身难忘了。我缓缓睁开眼，茫然站在骑楼下，眼里裹着滚烫的泪水。世上所有的车子都停了下来，人潮涌向马路中央。没有人知道那躺在街面的，就是我的，蝴蝶。这时她只离我五公尺，竟是那么遥远。更大的雨点溅在我的眼镜上，溅到我的生命里来。
为什么呢？只带一把雨伞？
然而我又看到樱子穿着白色的风衣，撑着伞，静静地过马路了。她是要帮我寄信的。那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？
妈：我打算在下个月和樱子结婚。
<div class="am-cf"><p class="am-align-left"> <img src="..." alt=""/> </p> ... <p class="am-align-right"> <img src="..." alt=""/> </p> ... </div>响应式辅助
视口大小
.am-[show|hide]-[sm|md|lg][-up|-down|-only]，调整浏览器窗口大小查看元素的显隐。
class 释义：
show显示，hide隐藏，这应该不难理解；sm、md、lg是划分屏幕大小区间的缩写，对应 small、medium、large，网格里面做了说明；down指小于区间，up指大于区间，only指仅在这个区间。
按照上面的翻译一下下面的 class:
.am-show-sm-only: 只在sm区间显示.am-show-sm-up: 大于sm区间时显示.am-show-sm: 在sm区间显示，如果没有设置md、lg区间的显隐，则元素在所有区间都显示.am-show-md-down: 小于md区间时显示
| 显示辅助 class | 隐藏辅助 class |
|---|---|
.am-show-sm-only.am-show-sm-up.am-show-sm.am-show-sm-down
|
.am-hide-sm-only.am-hide-sm-up.am-hide-sm.am-hide-sm-down
|
.am-show-md-only.am-show-md-up.am-show-md.am-show-md-down
|
.am-hide-md-only.am-hide-md-up.am-hide-md.am-hide-md-down
|
.am-show-lg-only.am-show-lg-up.am-show-lg.am-show-lg-down
|
.am-hide-lg-only.am-hide-lg-up.am-hide-lg.am-hide-lg-down
|
- medium + 可见
- large 可见
- 仅 large 可见
<ul><li class="am-show-sm-only">仅 small 可见</li> <li class="am-show-md-up">medium + 可见</li> <li class="am-show-md-only">仅 medium 可见</li> <li class="am-show-lg-up">large 可见</li> <li class="am-show-lg-only">仅 large 可见</li> </ul>屏幕方向
- 横屏：
.am-show-landscape,.am-hide-landscape - 竖屏：
.am-show-portrait,.am-hide-portrait
- 横屏可见...
<ul><li class="am-show-landscape">横屏可见...</li> <li class="am-show-portrait">竖屏可见...</li> </ul>转载于:https://www.cnblogs.com/Renyi-Fan/p/9008149.html
amazeui学习笔记--css（布局相关3）--辅助类Utility相关推荐
- amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（常用组件1）--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
- amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- amazeui学习笔记--css（HTML元素2）--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css（HTML元素4）--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- amazeui学习笔记--css（常用组件5）--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
最新文章
- 2022-01-22
- 安装mysql时安装不了starting the server_archlinux/manjaro 上安装percona-server
- 第七章 二叉搜索树（b1）BST：查找
- 【Linux】一步一步学Linux——write命令(236)
- ./ffmpeg: error while loading shared libraries: libavdevice.so.57
- QT开发的程序的发布
- 使用Docker来运行WebApp
- FPGA/CPLD状态机稳定性研究
- sql server 日期类型
- Java常见排序算法之堆排序
- 小甲鱼 OllyDbg 教程系列 (五) ： 破解 PC Surgeon 之 查找字符串
- windows安装zabbix客户端
- java写顾客购买的商品总价格_成交总金额＝商品价格×商品件数－总优惠额。 如果一个顾客，购买的商品一口价为5元，购买的商品件数为4，总物流运费4元，满20送3，请问成交的金额是（）。...
- 开发人员生产力指南，细节决定成败！
- Extjs中EditorGridPanel修改并获取数据的两种方式
- 春天最美的成语，都在古诗词里！
- php混淆解密,php混淆加密解密实战
- 详细讲解半加器、全加器、四位全加器，并使用FPGA实现半加器、全加器
- 实力秒杀ArcGIS，各种地图数据一键快速制图
- 微信小程序——车牌键盘组件实现